Angular快速入门（一）_augular怎么快速入门

Angular快速入门（一）

这篇博客将介绍路由、MVVM、工厂、$resource、控制器、视图、指令、作用域等基本概念。

路由

        .state('app.serve2',{
            url:'/serve2/{fold}',
            templateUrl:'app/serve2/serve2.html',
            controller:'serve2Ctrl',
            resolve : {
                deps : ['$ocLazyLoad',
                function($ocLazyLoad){
                    return $ocLazyLoad.load(['app/product/product.js','app/serve2/serve2.js','app/serve2/modal.js']);
                }
                ]
            }
        })
1
2
3
4
5
6
7
8
9
10
11
12

一个路由函数接受两个参数，一个是路由名称，一个是路由配置对象。
参数一，String,路由名是代码中控制页面状态跳转的唯一标识。
参数二,object,配置了路由的基本属性。包括url，controller，templateUrl，resolve等

1. url是该状态下浏览器的路径显示
2. templateUrl代表视图
3. controller代表控制器（也可以在视图中配置）
4. resolve还是一个对象，当中的内容可以在控制器中进行注入。

MVVM

以数据作为驱动，Angular中的factory、service均可理解为数据模型。controller是控制器，控制视图的显示。template为视图。

工厂

语法：

angular.moudle('appName').factory('name',['inject1','inject2',function(a,b){
    return {};
}]);
1
2
3

注意上面代码中存在的对象和函数。

1. angular.module(‘appName’)，该函数在注册表中找一个名字为‘appName’的Angular模块，作为返回对象。
2. factory(‘name’,[])是一个模块对象的工厂注册函数。注册工厂的目的是为了在控制器或者其他模块中使用，提供数据等等。
3. []是factory中的第二个参数，这是Angular中依赖注入的规范，在上面的例子中，function(a,b)是工厂‘name’的构造函数，在工厂被注入时，该构造函数都会被执行一遍。并将返回的对象作为注入值。
4. 在函数体中，我们可以写我们自己的逻辑，比如。

app.factory("product1",['$resource',function($resource){
    return $resource('/apis/product1/:id',{id:'@id'});
}]);
1
2
3

在上面的代码中我们利用了$resource返回了一个product1的资源对象。我们在写controller的时候，注入‘product1’，就可以使用query、get等RESTFUL风格的后台访问方法。
注意‘product1’这个字符串，这是angular注入机制的标识。是angular大厦的基石。

$resource

语法

$resource(url, [paramDefaults], [actions], options);
1

这里的url还可以更灵活，使用’：’完成路径传参的工作。
接下来的对象参数还可以配置默认的路径参数。如果使用了@，则说明该参数要从请求中获得。
resource官方文档

控制器、视图

$controller(constructor, locals, [bindings]);
1

和factory的定义基本相同。但是要注意他在MVVM中扮演的角色：控制器。
在路由中已经有过例子了。标准的路由，会配置一个控制器和一个视图。视图根据控制器中的数据来进行显示。这数据可能来自作用域scope，也可能直接来自controller对象。
先不说细节，给一个评价，控制器和视图是MVVM的终极目标，所做的一切工作都是为它们而服务的。
现在，你应该认识到问题的重点就在这。Angular的终极目标也就是完成控制器和视图的编写。

指令、作用域

我只会介绍一些常用的，帮助理解概念的东西。
用法举例：

app.directive('name',['inject1',function(a){
    return {
    restrict : '[A|E|C]',
    templateUrl : '',
    replace :[true|false],
    controller:['',function(){}]
    }
    scope :[{}|false]
}]);
1
2
3
4
5
6
7
8
9

注入的机制和前面一样。
这里我主要讲一下scope选项，当scope为false时，表示作用域继承于父作用域（scope），也就是调用该指令所在的视图的scope。也就是说，子控制器和上层控制器的作用域共享了。这样写视图就方便多了。
否则指令的scope就是独立的。评价一句，至今没有发现独立作用域的任何优点！