5月 18

 AngularJS中,通常需要注册一个module,然后为module在注册controller等。AngularJS不仅仅有angular.js文件,还有其他的js文件,比如用来做路由配置的angular-route.js文件等,每一个文件包含module,使用AngularJS的过程就是让这些modules协同工作的过程。

 

首先在页面引入AngularJS的核心js文件:

<script src="angular.min.js"></script>

接着,在定义js文件中为当前页面注册一个module:

var myApp = angular.module("helloApp",[])

以上,module的名称为helloApp, []数组用来存放与当前module有依赖关系的其它modules,比如['ngRoute','….']。

然后,为module注册controller。

    myApp.controller("TestController",['$scope',function($scope){
        $scope.hello = "Hello World!";
    }]);

 以上,controller()的第一个参数是controller的名称,第二个参数的数组,数组的最后一个元素一定是匿名函数,其它元素是AngularJS的全局service,或者说是全局对象。需要注意的是:数组中的全局service的位置和名称必须和匿名函数的形参一一对应。

我们还可以这样写:

myApp.controller("TestController", function($scope){
    $scope.hello = "Hello World!";  
});

不过,以上的写法在给js文件优化压缩的时候,会改变$scope变量的名称,比如替代为a,由于AngularJS只认$scope不认识a,这样会导致报错。所以,这种方法不推荐。

另外,全局service是以注入的方式被当前controller所使用。在AngularJS中,很多全局service都是通过依赖注入的方式被运用。

 

最后,页面中要做3件事情。

1、使用ng-app声明当前module的名称

<html ng-app="helloApp">

2、使用ng-controller声明需要使用的controller

<body ng-controller="TestController">

3、使用{{}}显示$scope中的变量

<p>{{hello.name}}</p>

 下面两种写法是等价的

<p>{{hello.name}}</p>
<p ng-bind="hello.name"></p>

 总结:留给我们的关键词是:module, module之间的协同和依赖, controller, 全局service依赖注入

 

项目目录

App/images // 存放Web前端使用的图片资源

App/Styles // 存放样式文件

App/scripts // 整个Web前端用到的脚本文件
                / Controllers // angularJS控制器模块存放目录
               /  directives // angularJs指令模块存放目录
              /   filters  // 过滤器模块存放目录
              /   services // 服务模块存放目录
            / app.js // Web前端程序配置模块(路由配置)
App/Modules  // 项目依赖库,angular、Bootstrap、Jquery库

App/Views // AngularJs视图模板存放目录

转载学习自:http://www.cnblogs.com/darrenji/p/4850739.html

written by ocean \\ tags: