1.AngularJS的历史
AngularJS是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行的。它的目标是通过MVC模式(MVC)功能增强基于浏览器的应用,使开发和测试变得更加容易。AngularJS是由Google的员工Miško Hevery从2009年开始着手开发,版本1.0是在2012年发布的。
2.AngularJS的运行原理
利用AngularJS,开发者可将页面的一部分封装为一个应用,并且不强迫整个页面都使用AngularJS进行开发。这个特质在某些情况下非常有用,比如你的工作流程中已经包含了另外一个框架,或者你只希望页面中的某一部分是动态的,而剩下的部分是静态的或者是由其他JavaScript框架来控制的。
当在页面中通过<scriptsrc="lib/angular/angular.js"></script>引入Angular.js库时,这行代码载入Angular.js脚本,Angular.js中有自执行的函数。Angular.js脚本运行后将会寻找含有ng-app指令的HTML标签,该标签即定义了AngularJS应用的作用域,然后Angular会找ng-app所属标签下所有的Angular指令。说到底,Angular.js是根据页面上各种Angular指令去操作HTML元素,最终显示给用户的动态的HTML页面。
3.AnguarJS的几大特性:
(1)MVC
(2)模块化
var myModule = angular.module("HelloAngular", []);
myModule.controller("helloAngular", ['$scope',
function HelloAngular($scope) {
$scope.greeting = {
text: 'Hello'
};
}
]);
如上代码解析:
>>angular.module("HelloAngular", [])用来定义一个Angular模块,那么可以基于这个模块定义很多东西,例如controller等等,这样就避免将controller写到全局作用域中,污染全局作用域。
>>myModule.controller()在模块中定义一个controller,第一个是控制器的名称,第二个参数是一个数组,第一个$scope表示的是让AngularJS依赖注入$scope;$scope后面的controller的定义。
在开发AngularJS的应用时,首先想到的Module,因为controller,filter,directive等等都是挂载Angular模块下面的。一切都是从Module开始。一个module是由controller,filter,directive,model等等组成的,是一个功能的组合。
(3)指令系统
//HelloAngular_Directive.js
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict: 'E',
template: '<div>Hieveryone!</div>',
replace: true
}
});
//index.html
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
</head>
<body>
<hello></hello>
</body>
<scriptsrc="js/angular-1.3.0.js"></script>
<scriptsrc="HelloAngular_Directive.js"></script>
</html>
备注,在html视图中,<hello></hello>会被替换成<div>Hieveryone!</div>
(4)双向数据绑定
单向数据绑定示意图:
双向数据绑定示意图:
(5)依赖注入
(6)service
(7)Filter
总结来说: