@gogogodeng
2016-03-28T15:01:29.000000Z
字数 12435
阅读 1365
angularjs
目录
1. 初始化
2. 控制器
3. 指令
1. 指令介绍
2. 常用指令
4. 过滤器
5. 事件处理
AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
要使用AngularJS首先要在页面头部加载(以下全部以1.50正式版为例)
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
但是现在还是不能用的,在需要的标签上添加ng-app
<!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中的任何标签
其中ng-model代表模型,通过标签中的{{}}双花括号,可以直接进行绑定
文本输入指令<input type="text" ng-model="name">
绑定到一个叫name的模型变量。
我们在输入框输入任何字符,都会直接出现在Hello之后替换{{name}}
这就是双向绑定,在修改输入框中的值得时候,对应的name这个模型就会一起改变,从而同步到视图中
{{ expression }}括号内的内容称之为表达式
表达式可以是数字运算,字符串拼接,数组,对象,过滤器
通常我们应用的时候,我们会主动的进行初始化,就需要这样写
<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将会自动检测变化,并作出相应的处理及更新。
首先看一个例子
<!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的指令就是扩展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
<!-- directive: my-directive --> 注释 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>
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>
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>