引入一个 anjular.js 文件
1.通过 ng-app 指令启动AnjularJS ,指定HTML中，哪一部分归AnjularJS控制。 这条语句置于<html>标签代表AnjularJS能够控制整个HTML应用。 也可以放在<body>或其他元素上，该元素的所有子节点都处于AnjularJS的控制下，其余部分则不会。
2.<input> 调用ng-model="name". ng-model 指令可以用于输入控件中，获取<input>输入框的值，并存储传入给一个叫name的变量。
3.另一个指令叫ng-bind。该指令与花括号表达式是可以互换，｛｛name｝｝来替换 <span ng-bind="name"></span>。这两种写法将name变量的值放于标签内，当name值发生变化，其绑定的组件<span>的值也会更新。
hello
hellow{ {1+2}}
二. AnjularJS模块
AnjularJS将相关代码封装起来，通过某种命名方式进行调用，可理解为java中的package
一个AnjularJS模块包含两部分：
1.模块可以自己定义控制器，指令......这些代码和函数在整个模块中都可以访问到。
2.模块可以依赖其他模块
3.通过将模块名称传给ng-app指令来告诉AnjularJS应用入口在哪里
定义一个不依赖其他模块的方式,该模块名称为notesApp:
anjular.module('notesApp',[]); 第一个参数代表模块名称，第二个参数是数组，代表该模块所依赖的名称列表，（空数组代表所创建的模块不依赖任何其他模块）
<!DOCTYPE html>
<html ng-app="notesApp"> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script> angular.module('notesApp',[]); </script> </head> <body> hello { {1+1}}nd time Angularjs </body> </html>hello 2nd time Angularjs
注： angular.module('notesApp',[]);可放在下面，但放在document.ready（functions（））中不好用
三.如何定义控制器
3.1以上模块为空的，没有功能
控制器包揽了Anjularjs中得杂活，通过javascript函数来执行或触发与UI相关的任务。
AnjularJS控制器的主要职责有
1.从服务器获取所需数据，以生成页面UI.
2.决定哪些数据会被呈现给用户
3.一些与页面相关的逻辑
4.用户交互，比如响应用户单击事件以及验证文本输入框中的值
AnjularJs控制器通常和某个HTML视图直接关联。
3.2 controller函数定义了一个控制器，他对于AnjularJS中的某个模块是可见的，
controller的第一个参数为控制器的名称（MainCtrl）.
第二个参数是一个数组，数组以字符串格式包含了控制器所依赖的模块名称
数组的最后那个参数为真正的控制函数。下面的例子中无依赖关系
3.3 ng-controller=”MainCtrl“, 让AnjularJS通过名称创建出控制器实例，然后将它关联到DOM元素中。
本例中指令会加载MainCtrl控制器，任务为打印console.log()中内容。
<!DOCTYPE html>
<html ng-app="notesApp"> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script src="js/jquery-3.1.1.min.js"></script> </head> <body ng-controller="MainCtrl"> hello { {1+1}} nd time AnjularJs <script> angular.module('notesApp',[]).controller('MainCtrl', [function(){ //此处为与控制器相关的代码 console.log("MainCtrl has been created") }]); </script> </body> </html>四.将显示的信息从HTML移到控制器中，然后通过控制器来显示它
<!DOCTYPE html>
<html ng-app="notesApp"> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script src="js/jquery-3.1.1.min.js"></script> </head> <body ng-controller="MainCtrl as ctrl"> { { ctrl.helloMsg}} AngularJS<br /> { { ctrl.goodbyMes}} AngularJS <script> angular.module('notesApp',[]).controller('MainCtrl',[function(){ this.helloMsg='hello'; var goodbyMes='Goodby'; }]) </script> </body> </html>
五，为控制器添加函数
<!DOCTYPE html>
<html ng-app="notesApp"> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script src="js/jquery-3.1.1.min.js"></script> </head> <body ng-controller="MainCtrl as ctrl"> { {ctrl.message}} <button ng-click="ctrl.changeMessage()">change Message</button> <script> 1. angular.module('notesApp',[]).controller("MainCtrl",[function(){ var self=this; self.message='hello'; self.changeMessage=function(){ self.message='Goodbye'; } }]) </script> </body> </html>
1.定义一个名为 notesApp 的模块
2.创建一个名为MainCtrl的控制器来控制模块
3.定义一个self变量指向控制器实例，而不是直接调用this关键字。
4.绑定变量self.message ,可在HTML中访问
5.添加方法，改变 self.message的值
6.添加按钮，内嵌ng-click指令， 将处理事件的函数作为参数传给指令。
注：当用户点击按钮时changeMessage函数会自动触发，不需要通知UI(AnjularJS宗旨之一由数据驱动)