Angular.js学习笔记（三）-优快云博客

本文链接：https://blog.youkuaiyun.com/ouyangyanlan/article/details/49385013

按照约定，我们这一篇开始学习angular中的service。

service 即angular中的服务。angular中有很多service组件，每一个都有不同的使用场景。
1.service
在angular中，service都是单例的，几乎每一个学习的教程中都会提到这一点，并加以强调。单例的意思是说，在整个的应用中，每一个service对象只会被实例化一次，其他地方对这个对象的操作，会影响到全局。
angular的不同版本提供的service可能不尽相同，我们挑一些常用的，带有共性的来讲解。
2.$Controller
controller（控制器）是我们最常用的一个。它很类似于我们在js中写一个function方法，通过某种方式来触发它，在angular中，我们来看一个小例子。

var app = angular.module('app', []);
app.controller('MainCtrl', function($scope){
    $scope.peoples=[{
        name:'Jesus',
        country:'spain'
    },
    {
        name:'Dave',
        country:'USA'
    },
    {
        name:'Carolina',
        country:'Italy'
    }];
});

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body ng-app="app" ng-controller="MainCtrl">
Search:<input ng-model="search" type="text"/>

<ul>
<li ng-repeat="person in peoples | filter:search">
{{person.name}} from {{person.country}}
</li>
</ul>

<script src="angular.js"></script>
<script src="angular.min.js"></script>
<script src="controller.js"></script>
</body>
</html>

这个小程序实现的是在输入框中输入字符，下面的文本自动匹配显示符合要求的内容。演示效果
这里写图片描述

这里写图片描述

这里演示了控制器的使用，其中还牵扯到了filter的内容，因为比较简单，而且在我们该系列的第一篇中已经做过介绍，这里就不再赘述。

3.service 、provider、factory
ok, 这篇文章的重头戏终于到了。
首先，有个东西需要说一下。以往在Js中,我们写了大量的代码来存取变量值，在angular中我们找到了一个比较好的方法。然后，刚开始写angular的时候，我们容易把数据放的乱七八糟，有时候各种$scope, 各种域，各种controller的问题，这样其实就失去了angular的优势，angular的设计中 controller层是很薄的，一些业务逻辑的处理和数据持久化的问题需要放到service中。出于内存的考虑，controller只有在需要的时候才会被初始化，不需要的的时候就会被抛弃。所以说，当你刷新页面时，controller就会被清空。而service就可以用来保存应用数据，并且可以在不同的域中被使用。
(1)用Factory就是创建一个对象，添加了一定的属性之后，把它返回回来。你把service传进controller之后，在controller里这个对象里的属性就可以通过factory使用了。

app.controller('myFactoryctrl', function($scope, myFactoryctrl){
    $scope.artist = myFactory.getArtist();
});
app.factory('myfactory', fuction(){
    var _artist = '';
    var service = {};
    service.getArtist = fuction(){
        return _artist;
    }
    return service;
});

(2) service 是用‘new’ 关键字实例化的。因此，你应该给‘this’添加属性，然后 service返回‘this’，把service传进controller之后，在controller里的‘this’ 上的属性就可以通过service来使用了。

app.controller('myServicectrl',function($scope, myService){
    $scope.artist =myService.getArtist();
});
app.service('myService', function(){
    var _artist = 'Nelly';
    this.getArtist = function(){
        return _artist;
    }
});

(3)provider 是唯一一种可以传进config()函数的service。当你想要在service对象启用之前，先进行模块范围的配置，那就应该使用provider.

app.controller('myProviderCtrl', function($scope, myProvider){
    $scope.artist = myProvider.getArtist();
    $scope.data.thingFromConfig = myProvider.thingOnConfig;
});
app.provider('myProvider', function(){
    this._artist = '';
    this.thingFromConfig = '' ;
    this,$get = function(){
        var that = this;
        return {
        getArtist:function(){
            return that._artist;
        }
        thingOnConfig: that.thingFromConfig
    }
    }
});

app.config(function(myProviderProvider){
    myProviderProvider.thingFromConfig = 'this was set in config()';
});