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

 

posted @ 2018-12-26 14:01  youguess  阅读(295)  评论(0)  编辑  收藏  举报