Angularjs 1.5版快速入门

时间 2019-11-12

原文原文链接

仍是习惯markdown编辑器，原文地址：https://www.zybuluo.com/gogogodeng/note/321997

1. 初始化
2. 控制器
3. 指令
1. 指令介绍
2. 经常使用指令
4. 过滤器
5. 事件处理

初始化AngularJS应用

AngularJS 是一个 JavaScript 框架。它可经过标签添加到 HTML 页面。AngularJS 经过指令扩展了 HTML，且经过表达式绑定数据到 HTML。javascript

要使用AngularJS首先要在页面头部加载(如下所有以1.50正式版为例)css

<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

可是如今仍是不能用的，在须要的标签上添加ng-apphtml

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
         <p>名字 : <input type="text" ng-model="name"></p>
         <h1>Hello {{name}}</h1>
    </div>
</body>
</html>

标记ng-app以后就表示angularjs将在标记的标签内部开始处理（angular做用域），因此一旦要使用它，请不要忘记这个标记
能够是html中的任何标签java

其中ng-model表明模型，经过标签中的{{}}双花括号，能够直接进行绑定
文本输入指令<input type="text" ng-model="name">绑定到一个叫name的模型变量。
咱们在输入框输入任何字符，都会直接出如今Hello以后替换{{name}}
这就是双向绑定，在修改输入框中的值得时候，对应的name这个模型就会一块儿改变，从而同步到视图中angularjs

{{ expression }}括号内的内容称之为表达式
表达式能够是数字运算，字符串拼接，数组，对象，过滤器数据库

一般咱们应用的时候，咱们会主动的进行初始化，就须要这样写express

<script type="text/javascript">
	var app = angular.module('myapp',[]);
</script>

其中须要注意的是var app = angular.module('myapp',[]); 这里的myapp应该对应的就是咱们一开始声明的ng-app='myapp'
因此代码应该改为这样数组

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Angular JS</title>
	<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body>
	<div ng-app="myApp">
	 	<p>名字 : <input type="text" ng-model="name"></p>
	 	<h1>Hello {{name}}</h1>
	</div>
	<script type="text/javascript">
		var app = angular.module('myApp',[]);
	</script>
</body>
</html>

若是有一些附加的模块，就须要写在方括号的数组中，并且要在引用angularjs核心包以后一块儿引用
经过这样的方式，就建立了一个angular的对象，经过对象，咱们还能够建立其中很重要的控制器和指令。
因此通常一个页面就只有一个这样的angular对象。跨页面是无效的。
适合作一些SPA。浏览器

AngularJS应用引导过程有3个重要点：注入器(injector)将用于建立此应用程序的依赖注入(dependency
injection)；注入器将会建立根做用域做为咱们应用模型的范围；
AngularJS将会连接根做用域中的DOM，从用ngApp标记的HTML标签开始，逐步处理DOM中指令和绑定。
一旦AngularJS应用引导完毕，它将继续侦听浏览器的HTML触发事件，如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生，AngularJS将会自动检测变化，并做出相应的处理及更新。安全

AngularJS的控制器

首先看一个例子

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Angular JS</title>
	<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body>
	<div ng-app="myApp" ng-controller="myCtrl">
	名: <input type="text" ng-model="firstName"><br>
	姓: <input type="text" ng-model="lastName"><br>
	<br>
	姓名: {{ firstName + " " + lastName }}
	</div>
	<script type="text/javascript">
		var app = angular.module('myApp',[]);
		app.controller('myCtrl',function($scope) {
		// $scope表明做用域
		$scope.firstName = "John";
		$scope.lastName = "Doe";
		})
	</script>
</body>
</html>

ng-controller="myCtrl" 声明了一个控制器
而后经过app.controller('myCtrl',function($scope){})定义一个控制器
控制器中的$scope做用域参数，用来保存一些模型,咱们建立了两个模型firstName和lastName并分别赋值，运行以后能够看到效果。$scope他自带有属性和方法，咱们也能够直接为他建立（参考javascript）。
好比：

$scope.fullName = function() {

　　return $scope.firstName + " " + $scope.lastName;

}

当咱们写一个数据CRUD的时候，就能够直接定义方法去操做其中的模型对象

$scope.addStore = function(){};
$scope.updateStore = function(){};
$scope.queryStore = function(){};
$scope.deleteStore = function(){};

在控制器中，还有一个参数，$rootScope(根做用域)

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Angular JS</title>
	<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
	<div  ng-controller="myCtrl">
    	名: <input type="text" ng-model="firstName"><br>
    	姓: <input type="text" ng-model="lastName"><br>
    	<br>
    	姓名: {{ firstName + " " + lastName }}
    	性别: {{ Sex }}
	</div>

	<div  ng-controller="secondCtrl">
	你的性别是: {{ Sex }}
	</div>

	<script type="text/javascript">
		var app = angular.module('myApp',[]);
		app.controller('myCtrl',function($scope, $rootScope) {
			// $scope表明做用域
			$scope.firstName = "John";
			$scope.lastName = "Doe";
			$rootScope.Sex = "女";
		});
		app.controller('secondCtrl',function($scope, $rootScope) {
		});
	</script>
</body>
</html>

$scope只能在对应得控制器中使用，而$rootScope能够在多个控制器中使用。它是存在于整个myApp中。

AngularJS的指令

angularjs的指令就是扩展html的属性，全部ng开头的都是指令。
例如：ng-app, ng-model, ng-controller, ng-repeat等等，angular所有都是靠指令来进行处理html

除了这些自带的指令以外，咱们还能够进行自定义指令。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
    
    <my-directive></my-directive>

    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.directive("myDirective",function() { return { template: "<h1>个人自定义指令!</h1>" } }) </script> </body> </html>

app.directive就是定义一个指令,返回了一个模板<h1>个人自定义指令!</h1>
可是要注意的是，定义指令名称的时候，若是是这样的驼峰命名，在标签中由于是不区分大小写的，故要在前面加上一个横杠，像这样<my-directive></my-directive>

调用指令的方式有四种，分别是:

<my-directive></my-directive> 元素 E
<div my-directive></div> 属性 A
<div class="my-directive"></div> 类名 C
 注释 M

能够在定义指令的时候，设置使用的方式，默认的是EA

app.directive("myDirective",function() {
return {
restrict : "M",
// replace: true,
template: "<h1>个人自定义指令!</h1>"
}
})

其中restrict就是设置使用的方式，若是所有都要用就写成restrict : "EACM"
通常只会用EA，若是要用注释的方式，就必定要设置replace: true 进行替换，默认的replace: false，会自动在标签内部生成template

经常使用的一些指令

ng-repeat 遍历数据反映到视图中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">

    <div ng-controller="myCtrl">
        <ul>
            <li ng-repeat="x in items">
                {{ '第' + $index + '条数据: 有' + x.num + '个来自' + x.country + '的' + x.name }}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller("myCtrl",function($scope) { $scope.items = [ { name: 'box', num: 1, country: 'Norway'}, { name: 'football', num: 2, country: 'Sweden'}, { name: 'toy', num: 3, country: 'Denmark'}, { name: 'guitar', num: 4, country: 'Germany'} ] }) </script> </body> </html>

当咱们返回数据库的一些数据的时候，能够经过这个指令遍历数组
ng-repeat="x in items"items对应$scope的数组，x表示其中的一个，而后就能够把每一个x的属性的值给遍历出来，其中若是须要获得数据的索引，可使用$index。

select下拉列表的用法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
    
    <div ng-controller="myCtrl">
        <select ng-model="selectedNames" ng-options="x for x in names"></select>
        <h1>你选择的是: {{ selectedNames }}</h1>
    </div>
    
    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller("myCtrl",function($scope) { $scope.names = [ 'Norway','Sweden','Denmark','Germany']; }) </script> </body> </html>

这样就简单的绑定了下拉列表，虽然使用ng-repeat也能够，可是ng-repeat选择的是一个值，而ng-options能够选择一个对象。
好比咱们常常用到的，就是一个key对应一个value，咱们显示value，操做的是key:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
    
    <div ng-controller="myCtrl">
        <select ng-model="selectedNames" ng-options="x.name for x in names"></select>
        <h1>你选择的是: {{ selectedNames.id }}  {{ selectedNames.name }}</h1>
    </div>
    
    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller("myCtrl",function($scope) { $scope.names = [ { id: '0001', name: 'Norway' }, { id: '0002', name: 'Sweden' }, { id: '0003', name: 'Denmark' }, { id: '0004', name: 'Germany' } ]; }) </script> </body> </html>

for后面表示names中的一个对象x，for以前的表示下拉列表显示什么字段。
根据数据结构不一样，有不一样的写法。

$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<h1>你选择的值是: {{selectedSite}}</h1>

$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in sites">
</select>
<h1>你选择的值是: {{selectedCar}}</h1>

ng-bind-html
能够直接将Html内容绑定

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular-sanitize.min.js"></script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
    
    <p ng-bind-html="myText"></p>
    
    <script type="text/javascript">
        var app = angular.module('myApp',['ngSanitize']); app.controller("myCtrl",function($scope) { $scope.myText = "my name is <h1>John Doe</h1>"; }) </script> </body> </html>

须要注意的是，必须引用ngSanitize模块，若是是1.3的版本可使用<div ng-bind-html-unsafe="expression"></div>这样的方式
ngSanitize能够检测html代码的安全性

ng-checked

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

</head>
<body ng-app="myApp">
    
    <input type="checkbox" ng-model="all"> Check all<br><br>
    <input type="checkbox" ng-checked="all">Volvo<br>
    <input type="checkbox" ng-checked="all">Ford<br>
    <input type="checkbox" ng-checked="all">Mercedes
    
    <script type="text/javascript">
        var app = angular.module('myApp',['']); </script> </body> </html>

<input type="checkbox|radio" ng-checked="expression"></input>

ng-change

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
    
    <input type="text" ng-change="myFunc()" ng-model="myValue" />
    <p>The input field has changed {{count}} times.</p>
    
    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller("myCtrl",function($scope) { $scope.count = 0; $scope.myFunc = function() { $scope.count++; }; }) </script> </body> </html>

ng-hide和ng-show

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

</head>
<body ng-app="myApp">
    
    <div>
        隐藏 HTML: <input type="checkbox" ng-model="myVar1">
        <div ng-hide="myVar1">
        <h1>Welcome 隐藏</h1>
        <p>Welcome to my home.</p>
        </div>
    </div>
    
    <div> 显示 HTML: <input type="checkbox" ng-model="myVar2"> <div ng-show="myVar2"> <h1>Welcome 显示</h1> <p>Welcome to my home.</p> </div> </div> <script type="text/javascript"> var app = angular.module('myApp',[]); </script> </body> </html>

ng-class
经过绑定模型来同步修改css

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
    <style>
        .sky {
            color:white; background-color:lightblue; padding:20px; font-family:"Courier New"; } .tomato { background-color:coral; padding:20px; font-family:Verdana; } </style> </head> <body ng-app="myApp"> <select ng-model="home"> <option value="sky">Sky</option> <option value="tomato">Tomato</option> </select> <div ng-class="home"> <h1>Welcome Home!</h1> <p>I like it!</p> </div> <script type="text/javascript"> var app = angular.module('myApp',[]); </script> </body> </html>

ng-if

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>

<script type="text/javascript">
var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { }) </script> </body> </html>

`ng-if="expression"`可用表达式

ng-href

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<div ng-init="myVar = 'http://www.itravac.com'">
<h1>想去旅游？</h1>
<p>访问 <a ng-href="{{myVar}}">{{myVar}}</a> 出发!</p>
</div>

<script type="text/javascript">
var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { }) </script> </body> </html>

AngularJS的过滤器

currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

过滤器能够经过一个管道字符（|）和一个过滤器添加到表达式中。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    
    <!-- 大写 -->
    <p>姓名为 {{ lastName | uppercase }}</p>

    <!-- 小写 -->
    <p>姓名为 {{ lastName | lowercase }}</p>
    
    <!-- 数字格式化 -->
    <input type="number" ng-model="quantity">
    <input type="number" ng-model="price">
    <p>总价 = {{ (quantity * price) | currency }}</p>
    
    <!-- 排序 -->
    <ul>
      <li ng-repeat="x in names | orderBy:'country'">
        {{ x.name + ', ' + x.country }}
      </li>
    </ul>
    
    <!-- 过滤输出 -->
    <p><input type="text" ng-model="test"></p>

    <ul>
      <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li> </ul> <script type="text/javascript"> var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { $scope.lastName = "john doe"; $scope.names = [ { name: 'box', num: 1, country: 'Norway'}, { name: 'football', num: 2, country: 'Sweden'}, { name: 'toy', num: 3, country: 'Denmark'}, { name: 'guitar', num: 4, country: 'Germany'} ]; }) </script> </body> </html>

AngularJS的事件处理

ng-click (ng-hide,ng-show,ng-change等)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    
    <button ng-click="clickme()">点我！</button>
    <p>{{ count }}</p>

    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { $scope.count = 0; $scope.clickme = function() { $scope.count += 1; } }) </script> </body> </html>