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){
});