0.前言
已经有多天没有写博客了，关键是最近实在是太忙了，没时间写，前段时间有朋友让我多写一点关于前端框架的知识点，目前前端市场的框架技术分为三大阵营——Rect.js、Angular.js、Vue.js，所以今天就和大家分享一下AngularJS这个目前市场上前端很火的技术框架。
1.Angular.js简介
（1）什么是Angular.js？
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
（2）Angular.js中的模块
（3）Angular.js控制器
（4）Angular.js知识点总结
（5）Angular.js的常用内置指令
2.案例介绍
上面主要介绍了Angular.js一些基础知识，可能大家还是会感觉到困惑，表达的不够直白，现在我们来用代码可能会更加清晰。
（1）HelloWorld
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
span{
color: red;
font-size: 30px;
}
</style>
<!-- 导入AngularJs -->
<script src="../../lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<h1>AngularJS Hello World</h1>
<!-- {{ }}是angularJS中的表达式 -->
<h2>Hello<span>{{ 1 + 2 }}</span></h2>
</div>
</body>
</html>
运行效果：
现在我们来分析一下上述的功能：
ng-app：表示是一个AngularJS的应用程序，告诉AngularJS管理哪一部分的DOM，初始化AngularJS程序，但整个应用中不必每一个标签使用AngularJS，可以给任何标签声明ng-app指令。通俗点讲，就是AngularJS的标识，标明那一块是用AngularJS管理的。
注意：一把用在开头的位置，用以表示这整个程序都是用AngularJS管理的，也可用在其他位置。
①用在开头：
<html ng-app=" ">
②用在其他位置
<div ng-app=" ">
...
</div>
我们猜想一下，如果现在给ng-app=" "加一个值会是什么结果：
<html ng-app=" myApp">
结果：
注意：暂时我们先不要给名字，如果给名字的话会报Uncaught Error: [$injector:modulerr]过后会解释为什么。
最重要的一步，要导入AngularJS，否则指令不会生效
<script src="../../lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
{{ }}是angularJS中的表达式，当声明了AngularJS结构，他就可以计算括号里面的值，否则就会当成一个字符串。
当我们在程序中加入如下程序：
<div>
<h1>传统JS实现某个功能</h1>
<input type="text" id="js_input" />
<h2>Hello <span id="js_span"></span></h2>
</div>
<script type="text/javascript">
var input = document.querySelector("#js_input");
var span = document.querySelector("#js_span");
input.onkeyup = function(){
span.innerHTML = this.value;
}
</script>
它是实现在输入框中输入值，动态的在span标签中显示出来。如果用AngularJS的方法的话只需如下代码：
<div>
<h1>angularJS实现上述功能</h1>
<input type="text" ng-model="msg" />
<h2>Hello <span ng-bind="msg"></span></h2>
<!-- 表达式的功和ng-bind一样 -->
<h2>Hello <span>{{ msg }}</span></h2>
</div>
ng-model一般是给输入控件使用的，在这里可以用来存储变量名为msg这个变量，然后其他元素可以通过ng-bind指令来绑定这个变量，这样就实现数据的绑定，减少了DMO操作。
（2）ng-init和表达式
ng-init使用来声明angularJS变量的，如果有多个变量，中间用分号“;”隔开
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- ng-init使用来声明angularJS变量的，如果有多个变量，中间用分号“;”隔开 -->
<div ng-init="name = '小雪';person = {name : '小黑',age : 18};arr = [10,20]">
<h1>{{ name }}</h1>
<!-- 可以使用点语法分析出对象的结构 -->
<h2>{{ person.name }}</h2>
<h2>{{ arr }}</h2>
<!-- 可以运算 -->
<h2>{{ arr[0] + person.age }}</h2>
<!-- 可以使用结果的某些方法 -->
<h1>{{ arr.join("===") }}</h1>
<h1>{{ "abc".toUpperCase() }}</h1>
<div ng-init="name = '小红'">
<!-- 这里和JS不一样，这里修改完name的值，前面在显示上也会被修改掉 -->
<h1>名字：{{name}}</h1>
</div>
</div>
<hr />
<div>
<h1>{{name}}</h1>
<input type="text" ng-model="name" />
<h2>{{ name }}</h2>
</div>
</body>
</html>
运行效果：
这里也能访问到上面div设置的name变量，因为上面的声明名的变量会把name变量存储到整个ng-app模块中，只要是用ng-app模块来管理的元素，就可以访问到这个变量。
（3）ng-bind和ng-bind-template
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-init="name = '小雪';age = 18">
<h1>{{ name }}</h1>
<h1>{{ name + " and " + age }}</h1>
<h1>{{ name }} and {{ age }}</h1>
<h1 ng-bind="name"></h1>
<hr />
<h1 ng-bind-template="{{ name }} and {{ age }}"></h1>
</div>
<script src="../lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
在这个程序中我把 script 标签挪到程序的最后面，运行后不停地刷新界面，会发现有停顿的现象，这大大影响了用户的体验。
{{}}和ng-bind具有同样的功能，使用 {{ }} 必须要在之前引入angularJS，否则会有闪现的效果，影响用户体验。
ng-bind-template要显示值的话，必须用表达式语法，否则这里都是字符串。
（4）ng-include
案例：
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- ng-include可以引入其他页面，注意：一定要加
''，否则会被当成变量
-->
<div ng-include="'./footer.html'"></div>
</body>
</html>
footer.html
<footer>
<h1>我是footer</h1>
</footer>
注意：要添加的页面中只保留body标签里面的内容。
结果：
（5）创建控制器
<!DOCTYPE html>
<!-- 这里设置一个名字，下面会创建这个模块 -->
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<!-- 设置控制器指令，让名字为MainCtrl控制器来控制整个body -->
<body ng-controller="MainCtrl">
<script type="text/javascript">
//创建模块
var app = angular.module('myApp',[]);
console.log(app);
//创建控制器 第二个参数一般使用[]给括起来
// app.controller('MainCtrl',[function(){
// console.log("我是控制器");
// }])
//这样写也可以，但将来构建代码的时候，有可能出现问题，所以尽量写上面的那种形式
// app.controller('MainCtrl',function(){
// console.log("我是控制器");
// })
//以后可以写链式语法，这样看起老比较简洁
angular.module('myApp',[])
.controller('MainCtrl',[function(){
console.log("我叫控制器！！");
}])
</script>
</body>
</html>
程序中有详细的注释，这里就不一一解释了。
3.总结
今天就先到这里，谢谢！！
