AngularJS学习笔记一

Select下拉列表框的使用：

1、添加“ng-model”指令，代表下拉框绑定的实体对象

2、添加“ng-options”指令，指令的形式四种：

① model.text for model in array;

② mode.value as model.text for model in array;

③ model.text grou by group for model in array;

④ model.value as model.text group by group for model in array;

以上②和④中的model.value是下拉列表各个项的value值，可以将其绑定为array数组中一个元素的的某个属性，也可直接绑定为array数组中单个元素对象，

即 mode as model.text for model in array;

3、为下拉框设置默认选中项，selected=users[0].id

服务（Service）

创建服务有多种种方式：Factory、Service、Provider、Decorator、Constant、Value

介绍几种常用创建服务方法：①Factory ②Service ③Provider

1、Factory可创建多个服务，然后将Factory名称注入到Controller中去，使用Factory对象来获取具体的服务对象。

2、Service只创建一个特定的具体服务，再注入到Controller中去使用。

3、Provider提供一个具体的服务+服务的配置信息。通过指定服务的配置信息，来实现一个服务的多种表现形式，以适配各种需求。

各创建服务的方式代码如下：

① Factory

app.factory(“myFactory”,function(){
　　var services={
　　　　“serviceName1”:function() { ... }, //服务1 
　　　　“serviceName2”:function() { ... }, //服务2 
　　　　“serviceName3”:function() { ... }, //服务3 
　　　　……
　　};
　　return  services; //将所有服务返回（工厂模式）
})

应用：

var app = angular.module("app", []);
//factory
app.factory("factory", function ($http, $q) {
    var factory = {
        "getUsers": function () {
            var deferred = $q.defer(); // 声明延后执行，表示要去监控后面的执行
            $http.post("/Demo/GetUsers")
                .success(function (data) {
                    deferred.resolve(data);  // 声明执行成功，即http请求数据成功，可以返回数据了
                });
            return deferred.promise;        //返回promise对象
        }
    };
    return factory;
});
//注入factory
app.controller("serviceCtrl", function ($scope, factory) {
    var promise = factory.getUsers();　　//调用factory中的service
    promise.then(function (data) {
        $scope.users = data;
    });
});

② Service

app.service(“myService”,function(){
　　var service = function() { ... } //具体服务
　　return  service; //返回具体服务
})

应用：

//service
app.service("service", function ($http, $q) {
    function getUsers() {
        var deferred = $q.defer(); // 声明延后执行，表示要去监控后面的执行
        $http.post("/Demo/GetUsers")
            .success(function (data) {
                deferred.resolve(data);  // 声明执行成功，即http请求数据成功，可以返回数据了
            });
        return deferred.promise;        //返回promise对象
    }
    return getUsers;
});

//注入service
app.controller("serviceCtrl", function ($scope, service) {
    $scope.getUsers= function () {
        var promise = service();        //直接调用service
        promise.then(function (data) {
            $scope.users = data;
        });
    };
});

③ Provider

app.factory(“myProvider”,function(){
　　var provider={
　　　　“serviceName”:function() { ... }, //服务
　　　　“config”: { ... }, //配置信息
　　};
　　return  provider; //将所有服务和配置信息返回（通过配置让服务表现不同结果）
})

调用时，修改配置：

app.config(function(myProviderProvider){
    myProviderProvider.config = {.....} //修改配置
});