AngularJS 应用组成:
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。
- Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
<!-- 通用部分 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
......
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
......
</body>
</html>
作用域 Scope
一个对象,有可用的方法和属性,应用于 HTML和 JavaScript,是二者联系的纽带。(可将$scope当做参数传递)
1、
<!--控制器(JavaScript)中创建一个属性名"name",对应视图(HTML)中{{ }}里的名称。-->
<div ng-app="xxApp" ng-controller="xxCtrl">
<h2>{{name}}</h2>
</div>
<script>
var app = angular.module('xxApp', []);
app.controller('xxCtrl', function($scope) {
$scope.name = "Evan Lee";
});
</script>
输出:
2、
<!--修改输入框中的值,会影响到模型,以及控制器对应的属性值。-->
<div ng-app="xxApp" ng-controller="xxCtrl">
<input ng-model="name">
<h2>姓名是 {{name}}</h2>
</div>
<script>
var app = angular.module('xxApp', []);
app.controller('xxCtrl', function($scope) {
$scope.name = "Evan Lee";
});
</script>
输出:
根作用域 rootScope
作用于整个应用,是各 controller 中 scope 的桥梁。
用 rootScope 定义的值,可以在各 controller 中使用。
<!--$rootScope 在循环对象内外都可以访问。-->
<div ng-app="xxApp" ng-controller="xxCtrl">
<h3>{{fans}}</h3>
<ul>
<li ng-repeat="x in names">{{x}} {{fans}}</li>
</ul>
</div>
<script>
var app = angular.module('xxApp', []);
app.controller('xxCtrl', function($scope, $rootScope) {
$scope.names = ["YY", "FF", "LL"];
$rootScope.fans = "Bee";
});
</script>
输出: