AngularJS 应用组成如下：
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。scope 是模型,scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
- Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。ng-controller 指令定义了应用程序控制器。
AngularJS 指令
1.ng-app 指令初始化一个 AngularJS 应用程序。
2.ng-init 指令初始化应用程序数据。
3.ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
4.ng-repeat 指令会重复一个 HTML 元素(循环)
<body> @*声明作用域*@ <div ng-app="myApp" ng-controller="myCon"> <input type="text" ng-model="name" /> 计算： {{5+5}} {{name}} <div ng-init="price=5;count=4"> @*初始化值*@ 结果：{{price * count}} </div> <div ng-init="price=6;count=7"> <input type="text" ng-model="price" />@*绑定值到控件*@ <input type="text" ng-model="count" /> 结果:{{price*count}} </div> <div ng-init="point=[1,2,3,4]"> <ul> <li ng-repeat="x in point">{{x}}</li>@*循环输出*@ </ul> </div> <div> <input type="text" ng-model="spname" /> <span>您输入了：{{spname}}</span> </div> <form name="myForm"> Email:<input type="email" name="mailAddress" ng-model="text" /> <span ng-show="myForm.mailAddress.$error.email">非法邮箱地址</span> </form> <div> <input type="text" ng-model="gname" /> {{greeting}} <input type="button" ng-click="sayHello()" value="点我" /> </div> <div ng-controller="zsCon"> <span>{{lastName}}:家族成员</span> <ul> <li ng-repeat="t in lNames">{{t}}{{lastName}}</li> </ul> </div> </div> <br /> </body>
<script>
var app = angular.module("myApp", []);
app.controller('myCon', function ($scope) {
$scope.spname = "haha";
});
app.controller('myCon', function ($scope) {
$scope.gname = "peter";
$scope.sayHello = function () {
$scope.greeting = 'Hello,' + $scope.gname + "!";
}
});
app.controller('zsCon', function ($scope, $rootScope) {
$scope.lNames = ["白起", "孙武", "孙膑"];
$rootScope.lastName = "战神";
})
</script>