AngularJS 是一个 JavaScript 框架，它是一个以 JavaScript 编写的库。
原文
Angular 简介
- AngularJS 把应用程序数据绑定到 HTML 元素。
- AngularJS 可以克隆和重复 HTML 元素。
- AngularJS 可以隐藏和显示 HTML 元素。
- AngularJS 可以在 HTML 元素"背后"添加代码。
- AngularJS 支持输入验证。
一般应用组成
- View（视图），即HTML
- Model（模型），当前视图中绑定的数据
- Controller（控制器），即Javascript函数，可以添加或修改属性
Angular 表达式
Angular 表达式写在双大括号内{{expression}}，具有双向绑定功能，不过在框架未加载之前页面会显示出源码，可以使用ng-bind替代需要渲染的数据。
类似于Javascript表达式，Angular表达式可以包含字符串、变量和运算符。
与JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与JavaScript 表达式不同，AngularJS 表达式支持过滤器。
<p>Angular 表达式：{{'express :'+ 'Angular'}}</p>
Angular 指令
Angular通过指令拓展HTML
ng-app
指令告诉AngularJS该元素是AngularJS应用程序根元素。
<div ng-app="app"></div>
ng-model
双向绑定元素值与变量
<div ng-app="app" ng-init="name='bestvist'">
<input type="text" ng-model="name">
<p><b>名字：</b> {{ name }}</p>
</div>
ng-repeat
重复一个HTML元素
<div ng-app="app" ng-init="category=[{name:'picture',count:10},{name:'video',count:11},{name:'text',count:50}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="item in category">
{{ x.name + ', ' + x.count }}
</li>
</ul>
</div>
自定义指令
<body ng-app="app">
<my-directive></runoob-directive>
<script>
var app = angular.module("app", []);
app.directive("myDirective", function() {
scope: false,
restrict: 'EA',
return {
template : "<h1>这是一个自定义指令!</h1>"
};
});
</script>
</body>
scope表明指令的作用域
- false 共享父级作用域
- true 继承父级作用域并创建自己的作用域
- {} 创建自己的作用域，与父级无关
restrict可以指定指令的调用方式
- E 作为元素名使用
- A 作为属性名使用
- C 作为类名使用
- M 作为注释使用
Angular 作用域（scope）
Scope 是应用在HTML和JavaScript之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
所有的应用都有一个 $rootScope，它可以作用在ng-app指令包含的所有HTML元素中。
$rootScope可作用于整个应用中。是各个controller中scope的桥梁。用rootscop，定义的值，可以在各个controller中使用。
Angular 控制器
ng-controller 指令定义了应用程序控制器。
控制器是JavaScript对象，由标准的JavaScript对象的构造函数 创建。
<div ng-app="app" ng-controller="myCtrl">
name: <input type="text" ng-model="name"><br>
age: <input type="number" ng-model="age"><br>
<br>
描述: {{"名字："+name + "，年龄：" + age}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "bestvist";
$scope.age = 24;
});
</script>
ng-controller 指令定义一个控制器，名称为myCtrl。
$scope是控制器内的作用域对象，具有name，age两个属性，可以在控制器中赋值。
Angular 过滤器
过滤器可用于转换数据，使用一个管道字符 | 添加到表达式和指令中
| 过滤器 | 描述|
|---|
| currency | 格式化数组为货币格式|
| filter | 从数组项中选择一个子集|
| lowercase | 格式化字符串为小写|
| uppercase | 格式化字符串为大写|
| orderBy | 根据某个表达式排列数组|
<div ng-app="app" ng-controller="myCtrl">
<p>姓名为 {{ name | uppercase }}</p>
</div>
自定义过滤器
var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "bestvist";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
Angular 服务
服务是一个函数或对象，可在你的 AngularJS 应用中使用。
在很多服务中，比如$location服务，它可以使用DOM中存在的对象，类似window.location对象，但window.location对象在AngularJS应用中有一定的局限性。
AngularJS会一直监控应用，处理事件变化，AngularJS使用$location服务比使用 window.location 对象更好。
但服务需要在控制器中引入
var app = angular.module('app', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
常用内置服务
- $http 数据请求服务
- $location url处理服务，对应于window.location
- $timeout 定时服务，对应于window.setTimeout
自定义服务
var app = angular.module('app', []);
app.service('myService', function() {
this.add = function (x, y) {
return x + y;
}
});
app.controller('myCtrl', function($scope, myService) {
var a= 10;
var b= 20;
$scope.sum = myService.add(a, b);
});
Angular 依赖注入
依赖注入（Dependency Injection，简称DI）是一种软件设计模式，
在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，
并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖
一句话 --- 没事你不要来找我，有事我会去找你。
Angular 提供了5个核心组件作为依赖注入
- value 简单值注入，可以是Javascript对象
- factory 工厂注入，在service和controller需要时创建
- service 服务注入，在controller中引入
- provider 可以创建factory和service
- constant 常量注入，定义一些常量值使用
总结
Angular的双向绑定使用非常方便，整体框架的MVC结构很清晰，
但是成也萧何败也萧何，脏值检测和渲染机制的复杂也使得在大量数据处理时造成页面卡顿，性能方面还有待改善。
网友评论