AngularJS-01.AngularJS,Module,Controller,scope

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://angularjs.org

中文网：http://www.angularjs.cn

文档：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){

});