Angular入门笔记
AngularJS（下面简称其为ng）是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，其经过使用指令（directives）结构来扩展HTML词汇，使开发者能够使用HTML来声明动态内容，从而使得Web开发和测试工做变得更加容易。javascript
1、历史html
AngularJS最初由Misko Hevery和Adam Abrons于2009年开发，后来成为了Google公司的项目。前端
当前最新版是：1.2.0-beta.10java
当前最新稳定版是：1.2.16git
2、受权angularjs
Angular是开源免费的。受权协议是：MITgithub
GitHub地址：https://github.com/angular/angular.jsajax
3、兼容性api
Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari). 数组
对于早期IE版本，请参考： Internet Explorer Compatibility
5、核心特性
1.MVC
2.模块化
3.自动化双向数据绑定
4.语义化标签
5.依赖注入
6、优缺点
若是你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。可是像游戏开发之类对DOM进行大量操纵、又或者单纯须要 极高运行速度的应用，就不是AngularJS的用武之地了。
7、使用Angular
1.新建一个名为index的网页。
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
</head>
<body>
</body>
</html>
2.引入Angular.js文件
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="./angular.min.js"></script>
</head>
<body>
</body>
</html>
也能够使用谷歌的cdn
https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js
3.使用ng-app来声明Angular的边界，使用ng-controller来声明其使用的控制器
<!DOCTYPE html>
<html>
<head>
<title>Learning AngularJS</title>
<script src="./angular.min.js"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
</div>
</body>
</html>
4.在index.html文件同目录下新建app.js，并写入如下内容。
//module方法传入做用域和初始化的模块数组（此处为空数组）
var app = angular.module('MyTutorialApp',[]);
5.在index.html同目录下新建maincontroller.js并写入如下内容
app.controller("MainController", function($scope){ //传入的$scope表示变量的做用域
});
6.将app.js和maincontroller.js分别引入到index.js目录中。App.js要先于maincontroller.js引入
<!DOCTYPE html>
<html>
<head>
<title>Learning AngularJS</title>
<script src="./angular.min.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
</div>
</body>
</html>
7.在maincontroller.js中添加$scope的变量
app.controller("MainController", function($scope){
//为做用域内的understand变量赋值，这样页面上的{{understand}}就获得相应的值了
$scope.understand = "I now understand how the scope works!";
});
8.在index.js页面中写上要访问的变量
<!DOCTYPE html>
<html>
<head>
<title>Learning AngularJS</title>
<script src="./angular.min.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
{{understand}}
</div>
</body>
</html>
{{}}双大括号，这是ng的模板中用于书写表达式的标记，ng成功运行起来后，{{}}内的表达式会生效
9.效果
{{understand}}变成了I now understand how the scope works!了
8、模板与数据的双向绑定
例一：
1.修改maincontroller.js文件以下
app.controller("MainController", function($scope){
$scope.inputValue = "";
});
2.修改index.html文件以下:
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<input type='text' ng-model='inputValue' />
{{inputValue}}
</div>
</body>
</html>
3.效果
这里咱们使用了ng-modle这个指令，咱们使用它分别为输入框中的值和$scope中的变量inputValue进行了双向绑定，这样当输入框内的值发生变化时，函数中的变量也会跟随变化，它的变化会实时反馈在后面的区域中
例二:二级select联动
1.修改maincontroller.js文件内容以下：
app.controller("MainController", function($scope){
$scope.selectedPerson = 0;
$scope.selectedGenre = null;
$scope.people = [
{
id: 0,
name: 'Leon',
music: [
'Rock',
'Metal',
'Dubstep',
'Electro'
]
},
{
id: 1,
name: 'Chris',
music: [
'Indie',
'Drumstep',
'Dubstep',
'Electro'
]
},
{
id: 2,
name: 'Harry',
music: [
'Rock',
'Metal',
'Thrash Metal',
'Heavy Metal'
]
},
{
id: 3,
name: 'Allyce',
music: [
'Pop',
'RnB',
'Hip Hop'
]
}
];
});
2.修改index.html文件的内容以下：
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<select ng-model='selectedPerson' ng-options='obj.name for obj in people'></select>
<select ng-model='selectedGenre'>
<option ng-repeat='label in people[selectedPerson.id].music'>{{label}}</option>
</select>
</div>
</body>
</html>
ng-repeat表示循环输出
3.效果
这个例子实现了二级联动的效果
9、Angular的数据过滤
1.修改index.html文件内容以下:
<!DOCTYPE html>
<html>
<head>
<title>Learning AngularJS</title>
<script src="./angular.min.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<input type='text' ng-model='searchText' />
<ul>
<li ng-repeat='person in people | filter:searchText'>#{{person.id}} {{person.name}}</li>
</ul>
</div>
</body>
</html>
2.效果
当在输入框中输入文字时，下面的列表就会根据输入的文字进行过滤
10、使用Angular显示或隐藏元素
1.修改maincontroller.js文件以下：
app.controller("MainController", function($scope){
$scope.people = [
{
id: 0,
name: 'Leon',
music: [
'Rock',
'Metal',
'Dubstep',
'Electro'
],
live: true
},
{
id: 1,
name: 'Chris',
music: [
'Indie',
'Drumstep',
'Dubstep',
'Electro'
],
live: true
},
{
id: 2,
name: 'Harry',
music: [
'Rock',
'Metal',
'Thrash Metal',
'Heavy Metal'
],
live: false
},
{
id: 3,
name: 'Allyce',
music: [
'Pop',
'RnB',
'Hip Hop'
],
live: true
}
];
});
2.修改index.html文件以下
<!DOCTYPE html>
<html>
<head>
<title>Learning AngularJS</title>
<script src="./angular.min.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<input type='text' ng-model='searchText' />
<ul>
<li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
</ul>
<ul>
<li ng-repeat='person in people | filter:searchText' ng-hide='person.live == false'>#{{person.id}} {{person.name}}</li>
</ul>
</div>
</body>
</html>
ng-show与ng-hide，用于控制元素的显示和隐藏
3.效果
能够看出，live=false的#2被隐藏了
11、事件绑定
1.修改index.html内容以下：
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<input type='text' ng-model='searchText' />
<ul>
<li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
</ul>
<input type='text' ng-model='newPerson' />
<button ng-click='addNew()'>Add</button>
</div>
</body>
</html>
2.修改maincontroller.js文件内容以下
app.controller("MainController", function($scope){
$scope.people = [
{
id: 0,
name: 'Leon',
music: [
'Rock',
'Metal',
'Dubstep',
'Electro'
],
live: true
},
{
id: 1,
name: 'Chris',
music: [
'Indie',
'Drumstep',
'Dubstep',
'Electro'
],
live: true
},
{
id: 2,
name: 'Harry',
music: [
'Rock',
'Metal',
'Thrash Metal',
'Heavy Metal'
],
live: false
},
{
id: 3,
name: 'Allyce',
music: [
'Pop',
'RnB',
'Hip Hop'
],
live: true
}
];
$scope.newPerson = null;
$scope.addNew = function() {
if ($scope.newPerson != null && $scope.newPerson != "") {
$scope.people.push({
id: $scope.people.length,
name: $scope.newPerson,
live: true,
music: []
});
}
}
});
3.效果
点击add按钮的时候，people数组会新增一个元素，而后模板中的变量会自动的更新，而后页面跟着改变
12、优势与缺点
优势：
1. 模板功能强大丰富，而且是声明式的，自带了丰富的Angular指令；
2. 是一个比较完善的前端MVC框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等全部功能；
3. 自定义Directive，比JQuery插件还灵活，可是须要深刻了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，咱们能够经过阅读源代码来找到某些咱们须要的东西，如：在directive使用 $parse；
4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），可以很容易的写出可复用的代码，对于敏捷开发的团队来讲很是有帮助。
缺点：
1.angular 入门很容易 但深刻后概念不少, 学习中较难理解.
2.中文教程很是少, 官方的文档基本只写了api, 一个例子都没有, 不少时候具体怎么用都是google来的, 或直接问misko,angular的做者.
3.对IE6/7 兼容不算特别好, 就是能够用jQuery本身手写代码解决一些.
4.不利于seo.(SEO目前也有了prerender解决方案) https//prerender.io
5.不适合交互频繁的，如游戏之类交互体验网站。