简介
- 版本（1.x、2.x、3.x），由三个不同团队进行维护，三个版本之间并无关系，typescript 是 2.x 版本的语法糖
- 以 1.x 版本为主
- 适用于大型的项目开发、MV*（mvc框架之母 / mvvm）
- 特性：模块化、双向数据绑定、指令、依赖注入
特性
1. 模块化
- APP应用模块，是由若干个模块（module）组成的，每个模块实现一个功能，便于代码的复用
<!doctype html>
<html ng-app='App'> <!-- 绑定应用模块、指定根元素 -->
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 将控制器绑定到元素上，此元素中就可以使用控制器的数据 -->
<div ng-controller='demoCtrl'>
<ul>
<li>name: {{info[0].name}} age: {{info[0].age}}</li>
</ul>
</div>
<script src='angular.js'></script> <!-- 引入 angular -->
</body>
</html>- AngularJS对外暴露了一个全局对象
angular angular.module()参数1：模块名称；参数2：此模块依赖的其他模块
// 调用 angular 对象的 module 方法创建模块
var app = angular.module('App', [])
// 用模块对象的方法去创建控制器
app.controller('Demo', ['$scope', function(){
// $scope为模型对象，将数据绑定到该对象
$scope.info = [
{ name: 'logen', age: 270 }
];
}])2. 双向数据绑定
- 数据模型（Module）和视图（View）之间的双向绑定
- 即 view 界面的操作能实时反映到数据 module，数据 module 的变更能实时展现到界面 view
<div ng-app="App" ng-controller="demoCtrl">
<!-- input 值的改变会实时同步到模型数据 $scope.name -->
<input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div><script>
var app = angular.module('myApp', []);
app.controller('demoCtrl', function($scope) {
// 数据模型中的值发生改变也会实时同步到页面视图中去
$scope.name = "hannah";
});
</script>3. 指令
ng-app
- 所有 AngularJS 应用都必须要要一个根元素
ng-app指令用于指定根元素- 只允许有一个
ng-app，若有多个，只有第一个会生效 - 所有的 HTML 元素都支持该指令
<html ng-app = 'App'> <!-- 指定根元素 -->
<body ng-controller = "Demo"> <!-- 指定控制器 -->
</body>
</html>//
var app = angular.module('App', [])
app.controller('Demo', ['$scope', function(){
}])4. 依赖注入
依赖注入简化了Angular解析模块/组件之间依赖的过程。
通常一个组件要获得它的依赖，有三种方式：
- 直接创建出依赖，如使用new操作符
- 能够查找到依赖，如引用全局变量
- 在需要的地方传入依赖
// 调用 angular 对象的 module 方法创建模块
var app = angular.module("App", []);
// 创建 value 对象 "defaultInput" 并传递数据
app.value("item", 5);
// 将 "item" 注入到控制器
app.controller('demoCtrl', function($scope, CalcService, item) {
$scope.number = item;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});- 注入式（推荐）
app.controller('demoCtrl', ['$scope', '$http', '$log', function($scope, $http, $log) {
}])- 推断式
app.controller('demoCtrl', function($scope, $http, $log) {
})
扫一扫
1455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
