iuap mobile之AngularJS开发入门

iuap mobile之AngularJS开发入门

1. AngularJS是什么

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：

使用双大括号{{}}语法进行数据绑定；
使用DOM控制结构来实现迭代或者隐藏DOM片段；
支持表单和表单的验证；
能将逻辑代码关联到相关的DOM元素上；
能将HTML分组成可重用的组件。
下面我们以AngularJS 1.2.0版本为例讲解经典的Hello world程序，来快速了解AngularJS。

2. 快速了解AngularJS

2.1 AngularJS下载地址

http://angularjs.org

2.2 AngularJS之Hello World

首先还是从第一个经典的Hello world 案例说起，如下HTML（如果你在墙外，可以直接访问https://angularjs.org ，右边就有运行效果）。
如下是一些你在看Hello World 示例和接下来的代码示例时需要重点关注的方面.

ng-app, ng-controller, ng-model 指令；

带有两个大括弧的模板；

<html ng-app=”helloApp“>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js "></script>
        <script>
            var helloApp = angular.module("helloApp", []);
            helloApp.controller("HelloCtrl", function($scope) {
            $scope.name = "Calvin Hobbes";
        </script>
    </head>
    <body ng-controller=”HelloCtrl”>
        <input type="text" name="name" ng-model="name"/>
        <div>
            Hello {{name}}! How are you doing today?
        </div>
    </body>
</html>

注：上面引入AngularJS文件路径请根据具体情况调整且注意放置位置。html标签上加了一个 ng-app属性，意思是整个HTML都属于AngularJS控制。

2.3 开始你的AngularJS之旅

下面我们来具体阐述一下，怎么实现Hello World,其中某些难懂的概念可以参考本文档2.4节
2.3.1 在部分包含Angular Javascript
将下面的代码包含入中，以引入 Angularjs javascript 文件. 可以用如下写法从 Google 管理的库获得最新的代码。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

以上angularJS脚本也可以自行下载，然后将地址替换。
2.3.2 将 ng-app 指令应用到元素
如下将ng-app指令应用到元素. 可以选择给app指定名称. 它可以被简单的写作. 这一指令被用来标记Angular会识别作为我们应用程序的根元素的html元素. 这给了应用程序开发者告诉Angular整个html页面或者只是其中一部分应该作为Angular应用程序来对待的自由.

<html ng-app="helloApp">

2.3.3 将 ng-controller 指令应用到元素
将 ng-controller 指令应用到元素. controller 指令可以被应用在任何元素上，比如div。在下面的代码中，“HelloCtrl” 是控制器的名称，可以被放在元素处中的控制器代码引用.

<body ng-controller="HelloCtrl">

2.3.4 将ng-model指令应用到输入元素
可以使用ng-model指令将输入同模型绑定在一起.

<input type="text" name="name" ng-model="name"/>

2.3.5 编写模板代码
下面是展示名称为“name”的模型的模型值的模板代码. 注意名称为“name”的模型被绑定到了步骤四中的输入上.

Hello {{name}}! How are you doing today?

2.3.6 在Script中创建控制器代码
向下面这样在script元素中创建控制器代码. 在下面的代码中， “helloApp”是在元素中使用ng-app指令定义了的模块的名称. 接下来的一行代码展示了用在元素中使用ng-controller指令定义的名称“HelloCtrl”创建一个控制器. 控制器 “HelloCtrl”被注册到了这个模块——“helloApp”. 最后一行代码展示将模型同 $scope 对象关联了起来.

<script>
    var helloApp = angular.module("helloApp", []);
    helloApp.controller("HelloCtrl", function($scope) {
        $scope.name = "Calvin Hobbes";
    });
</script>

至此一个简单的Hello World应用就实现了，恭喜你！当然你如果想实现复杂一点的应用，光是这些是不够的，首先你得了解一些常见的概念，比如控制器、指令和服务等等。接下来为你讲述这些概念。

2.4 你必须了解的概念

2.4.1 控制器(Controller)
在Angular中，Controller主要负责初始化scope，包括数据以及所需要的函数。上面的HelloController就是个典型的Controller，另外一种更加强大的定义方式允许你声明所依赖的模块。

var controllers = angular.module('demo.controllers');    controllers.controller("demoController", ['$scope', '$http',
function($scope, $http) {
    $scope.test_data = {
        value : 'test data'
    };
    $scope.test_function = function() {
        alert("test function");
    };
}]);

Controller比较直观，需要注意的有两个地方，一是使用$watch关注某个表达式的值，当发生变化时做相应操作，二是使用外部库操作数据，需要使用apply通知angular，不然的话很有可能外部库更新了数据，但angular却没有做相应更新。

2.4.2 指令(Directive)
在前端开发中，经常需要操作DOM，而且有时候需要使用一大堆HTML来构建一个常用的组件，例如Google+信息流中的一条信息，在Angular中这都属于Directive的作用，这也就意味着在Controller中操作DOM是个错误的做法。
通常情况下，Directive定义时采用CamelCase规则进行命名，而在使用时则使用横线进行分隔。

Directive的定义

var directives = angular.module('demo.directives', []);
    directives.directive('customDirective', function() {
    return {
          restrict: 'ECMA',
          template: '<nav></nav>',
          templateUrl: 'directive.html',
          replace: false,
          priority: 0,
          transclude: false,
          scope: false,
          terminal: false,
          require: false,
          controller: function(scope, element, attrs, transclude, otherInjectables {},
          compile: function(element, attrs, transclude) {
            return {
                pre: function preLink(scope, element, attrs, controller) {},
                post: function postLink(scope, element, attrs, controller) {}
            };
          },
         link: function(scope, element, attrs) {
         }
    };
});

restrict: 指定了directive的使用形式，共有四种：

Element（restrict定义时的E）
Attribute（restrict定义时的A）
Class（restrict定义时的C）
Comment（restrict定义时的M）

compile：在directive中如果需要对DOM元素进行处理，基本都是在这个函数中进行。仔细看这个函数，compile并不能访问scope。

link：此函数的主要作用就是对DOM和scope做数据绑定。和compile不同，在这个函数中，已经可以访问scope了。

template和templateUrl：用于指定directive对应的模板，前者直接使用字符串定义模板，而后者则通过url链接外部模板文件。在模板中可以使用对应controller或者rootScope中的scope，当然也有例外，具体请看关于scope的解释。

replace：指定是否使用模板替换directive作用的DOM元素。

priority：指定优先级，angular在处理directive时，会将页面出现的所有directive按优先级排序，一般这个数值都是不指定的。
controller：directive对应的controller，通常用于directive之间的通信。在这个函数中，所有绑定到this上的变量，其他的directive都能通过使用require来进行访问。

require：通过指定某个directive的名字，来访问其对应的controller。其中以？作为前缀时，如果找不到此directive将报错，而以^为前缀，将会在父元素进行递归查找，可以使用数组来引入多个directive，如[‘directive1’,’directive2’,’directive3’]

scope：用于指定当前directive所对应的scope，不同的取值之间的影响非常大。

false：此时directive与父元素共享scope
true：此时directive有自己的scope，该scope继承父元素所对应的scope
isolate：directive有自己的scope，该scope不会继承自父元素对应的scope，但是仍然可以通过scope.$parent访问父节点的scope。这不是一个推荐的做法，因为这样就对父元素进行了限制，影响了directive的使用范围。如果想在父子元素之间共享数据，可以明确指定那些元素需要父子之间共享。方法共有三种：
使用@将父级scope中的属性绑定到本地scope中，单向绑定，这个值总是字符串，在template中需要使用{{}}
使用=同上，只不过这里是双向绑定，在template中可以直接给出父级scope的属性名称
使用&用于倒入函数或者表达式
transclude：用于控制是否要将该directive的子元素添加到模板中ng-tranclude指定的元素之下。

2.4.3 服务(Service)
在Angular中，Service是一些提供常见功能的单例对象。诸如上面出现$http等，其使用也是比较简单的，只要在使用时声明这个依赖就可以了，例如上面的demoController。其定义方式主要有一下几种：
1 service只是简单的数值可以使用constant（name，value）进行注册，如果时已经存在的对象，可以使用value（name，value）进行注册

var services = angular.moudle('demo.services', []);
services.constant('number', 42);
services.constant('string', 'string');
var existingService = {
    notify : function(msg) {
        alert(msg);
    }
};
services.value('notify', existingService);

2 注册一个service构造函数

services.service('demoService1', function() {
    this.func = function() {
    };
});

3 注册一个工厂函数用于创建service实例，这种方式可以在创建服务实例之前做些处理

services.factory('demoService2', function(msg) {
    // some processing code
    return {
        func : function() {
        }
    };
});

4 使用provider，使用这种方式，复杂一点，但是好处是可以对service进行配置。

services.provider('demoService3', function() {
    this.value = "string";
    this.$get = function() {
        var value = this.value;
        return {
            print : function() {
                console.log(value);
            }
        }
    }
    this.setValue = function(value) {
        this.value = value;
    }
});

// 使用config可以对provider进行配置

services.config(function(demoService3Provider) {
    demoServiceProder.setValue('hello');
});

当然，创建服务也是可以声明依赖的，具体格式和controller类似，不再罗嗦。

3. 更多了解AngularJS

Angular还所有很多概念，包括router和filter等，如果你想深入学习，请参考后面的链接。

文档更新时间: 2018-01-15 14:46