1.AngularJS
一个构建动态Web应用程序的结构化框架。
基于JavaScript的MVC框架。( MVC ---- Model（模型）、View(视图）、Controller（控制器） )
主要作用：
1）简化复杂Web应用的开发难度
a) MVC程序架构，解耦应用逻辑、数据模型和视图
b) 数据绑定
c) 依赖注入
d) Ajax服务
2）提高应用程序的可测试性、可维护性
擅长领域：
1）单页面应用程序Single Page Application（SPA）
2）CRUD程序
下载和使用
文档：http://docs.angularjs.cn/api
AngularJS的使用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="description" content="KunShan Online retailers "> <title></title> <link rel="stylesheet" href="css/angular-csp.css" /> </head> <body> <script type="text/javascript" src="js/angular.js" ></script> </body> </html>
2.Module:模块
创建方式：angular.module(‘myApp’,[]);
使用模块的好处：
1）保持全局命名空间的清洁；
2）编写测试代码更容易；
3）易于在不同的应用程序之间复用代码。
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="description" content="KunShan Online retailers "> <title></title> <link rel="stylesheet" href="css/angular-csp.css" /> </head> <body ng-app='myApp'> <!-- ng-app : Angularjs的模块,也可以理解为AngularJS的作用域 --> <h3>{{"hello"}}</h3> <script type="text/javascript" src="js/angular.js" ></script> <script type="text/javascript" src="js/index.js" ></script> </body> </html>
var app = angular.module('myApp',[]);//创建的模块赋值给app对象
3.Controller和scope
控制器：在AngularJS中控制器是一个函数，用来向视图的作用域添加额外的功能，用来设置作用域的初始状态并添加自定义行为。
控制器的声明：
app.controller(‘controllerName’,function($scope){...}) //app对象是angularJs定义好的模块
控制器的使用：
在需要的地方（html某个标签上）添加ng-controller
使用控制器注意事项：
1）尽可能精简控制器，制作和$scope相关的操作
2）不适合在控制其中执行DOM操作、格式化或数据操作。
控制器的嵌套
控制器之间可以发生嵌套关系，子控制器可以访问父控制器中的属性和方法。
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="description" content="KunShan Online retailers "> <title></title> <link rel="stylesheet" href="css/angular-csp.css" /> </head> <body ng-app='myApp' ng-controller='myController'> <!-- ng-app : angularjs的模块 ng-controller ：控制器的使用 --> <h3>{{"hello"}}</h3> <button ng-click='add()'>Test</button><!--ng-click:点击事件--> <h4>{{num}}</h4> <div ng-controller='myController2'><!--myController2嵌套在myController中--> <button ng-click='add()'>Test,myController2</button> <span>{{num}}</span> </div> <script type="text/javascript" src="js/angular.js" ></script> <script type="text/javascript" src="js/index.js" ></script> </body> </html>
var app = angular.module('myApp',[]);//创建的模块赋值给app对象 //controller $scope:作用域对象 app.controller('myController',function($scope){ $scope.num=0;//视图中的num变量 //add方法 视图中的add() $scope.add=function(){ $scope.num++; }; }); app.controller('myController2',function($scope){ });