1.表达式
<html> <head> <title>入门小 Demo-1</title> <script src="angular.min.js"></script> </head> <body ng-app> {{100+100}} </body> </html>
执行结果如下：
表达式的写法是{{表达式 }}表达式可以是变量或是运算式
ng-app 指令 作用是告诉子元素一下的指令是归 angularJs 的,angularJs 会识别的
ng-app 指令 定义了 AngularJS 应用程序的根元素。
ng-app 指令 在网页加载完毕时会自动引导（自动初始化）应用程序。
2.双向绑定
<html> <head> <title>入门小 Demo-1 双向绑定</title> <script src="angular.min.js"></script> </head> <body ng-app> 请输入你的姓名：<input ng-model="myname"> <br> {{myname}},你好 </body> </html>
运行效果如下：
ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。
3.控制器
<html> <head> <title>入门小 Demo-3 初始化</title> <script src="angular.min.js"></script> <script type="text/javascript"> //定义函数 function helloController($scope) { $scope.greeting = { text : "hello" }; } </script> </head> <body ng-app> <div ng-controller="helloController"> <p>{{greeting.text}},angular!</p> </div> </body> </html>
ng-controller 用于指定所使用的控制器
理解 $scope：
$scope的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图.
4.MVC模式
Angular 遵循软件工程的 MVC 模式,并鼓励展现，数据，和逻辑组件之间的松耦合,提高代码的复用性.angularJS 为后端减轻了很多业务压力,带来了更轻的 web 应用.
那么在 AngularJS 的应用中,怎么提现 mvc 设计模式的呢?下面来看以下代码展示 AngularJS 的
应用.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/angular.min.js"/> <script type="text/javascript"> //定义函数 function helloController($scope) { $scope.greeting = { text : "hello" //模型层 }; } </script> </head> <body ng-app> <div ng-controller="helloController"> //控制层 <p>{{greeting.text}},angular!</p> //视图层 </div> </body> </html>
5.模块化设计
js 编程通常把 js 都放在全局环境中,那么这些变量函数,或者是对象都会产生在 window 对象下,会污染全局空间.为了更好管理 js,我们使用模块化的开发方式.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/angular.min.js"/> <script type="text/javascript"> //定义一个叫oneModule名称的模块 var myModule = angular.module('oneModule',[]); //使用模块调用方法 myModule.controller('helloController',function($scope){ $scope.greeting = function(){ return "hello,angular!"; } }) </script> </head> <body ng-app="oneModule"> <div ng-controller="helloController"> <p>{{greeting()}},angular!</p> </div> </body> </html>
6. 初始化指令
我们如果希望有些变量具有初始值，可以使用ng-init 指令来对变量初始化。
<html> <head> <title>入门小 Demo-3 初始化</title> <script src="angular.min.js"></script> </head> <body ng-app ng-init="myname='陈大海'"> 请输入你的姓名：<input ng-model="myname"> <br> {{myname}},你好 </body> </html>
7.事件指令
<html> <head> <title>入门小 Demo-5 事件指令</title> <script src="angular.min.js"></script> <script> var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块 //定义控制器 app.controller('myController',function($scope){ $scope.add=function(){ $scope.z= parseInt($scope.x)+parseInt($scope.y); } }); </script> </head> <body ng-app="myApp" ng-controller="myController"> x:<input ng-model="x" > y:<input ng-model="y" > <button ng-click="add()">运算</button> 结果：{{z}} </body> </html>
运行结果：
ng-click 是最常用的单击事件指令，再点击时触发控制器的某个方法。
8.循环数组
<html> <head> <title>入门小 Demo-6 循环数据</title> <script src="angular.min.js"></script> <script> var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块 //定义控制器 app.controller('myController',function($scope){ $scope.list= [100,192,203,434 ];//定义数组 }); </script> </head> <body ng-app="myApp" ng-controller="myController"> <table> <tr ng-repeat="x in list"> <td>{{x}}</td> </tr> </table> </body> </html>
这里的 ng-repeat 指令用于循环数组变量。
运行结果如下：
9.循环对象数组
<html> <head> <title>入门小 Demo-7 循环对象数组</title> <script src="angular.min.js"></script> <script> var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块 //定义控制器 app.controller('myController',function($scope){ $scope.list= [ {name:'张三',shuxue:100,yuwen:93}, {name:'李四',shuxue:88,yuwen:87}, {name:'王五',shuxue:77,yuwen:56} ];//定义数组 }); </script> </head> <body ng-app="myApp" ng-controller="myController"> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="entity in list"> <td>{{entity.name}}</td> <td>{{entity.shuxue}}</td> <td>{{entity.yuwen}}</td> </tr> </table> </body> </html>
运行结果如下：
10.内置服务
我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http 来实现。注意：以下代码需要在 tomcat 中运行。
<html> <head> <title>入门小 Demo-8 内置服务</title> <meta charset="utf-8" /> <script src="angular.min.js"></script> <script> var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块 //定义控制器 app.controller('myController',function($scope,$http){ $scope.findAll=function(){ $http.get('data.json').success( function(response){ $scope.list=response; } ); } }); </script> </head> <body ng-app="myApp" ng-controller="myController" ng-init="findAll()"> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="entity in list"> <td>{{entity.name}}</td> <td>{{entity.shuxue}}</td> <td>{{entity.yuwen}}</td> </tr> </table> </body> </html>
建立文件 data.json:
[ {"name":"张三","shuxue":100,"yuwen":93}, {"name":"李四","shuxue":88,"yuwen":87}, {"name":"王五","shuxue":77,"yuwen":56}, {"name":"赵六","shuxue":67,"yuwen":86} ]
