Angularjs中service与controller注入

最新推荐文章于 2019-07-10 15:23:16 发布

嗡汤圆

最新推荐文章于 2019-07-10 15:23:16 发布

阅读量6.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端开发文章标签： mvc angularjs

本文链接：https://blog.youkuaiyun.com/tzdwsy/article/details/47375537

Web前端开发专栏收录该内容

24 篇文章

订阅专栏

本文探讨AngularJS的MVC结构，重点讲解Service如何注入到Controller中，以实现数据和视图的分离，提高代码复用。通过一个实例展示了从声明模块、创建Service、注入Controller到调用Service的完整过程。

controller

相比于网上常常看到的教程，新版AngularJs(1.3.x)以后对于controller声明有一些限制。


function IndexController($scope) {
    //controller code
}

这种方法已经不允许，取而代之的是如下声明方法：


//声明模块
var indexApp = angular.module('indexApp', []);

// 声明controller
indexApp.controller('IndexController', function($scope, listService) {
    //controller code
}

大致流程：

1、声明模块(module)。
2、声明controller(注入)。
3、声明数据、函数。

service的注入与使用

对service的合理利用可以实现前台数据与页面(model and view)的分离，进而可以实现js代码的充分复用，不需要专门写DOM处理的脚本。因此前期设计<ul>后期突然
编程<table>的蛋疼情形就无需担心了。

使用一个简单例子：

前台有个

列表绑定$scope中的list，现声明一个service实现对list的新增操作。

1、前台绑定


<ul>
    <li ng-repeat="item in list">hello \{\{item.name}} you are \{\{item.gender}} and \{\{item.age}} years old</li>
</ul>

2、声明service


//声明模块
var indexApp = angular.module('indexApp', []);

// 声明service
indexApp.service('listService', function() {
    this.addOneRecord = function(list) {
        console.log(list);
        var one = eval("[{name:'new',gender:'male',age:1}]");
        console.log(one);
        list.push(one[0]);
        console.log('after:' + list);
    };
});

3、将service注入controller


// 声明controller
indexApp.controller('IndexController', function($scope, listService){
    //controller code
}

4、对service调用


//声明了一个函数来调用service
$scope.addOneServiceTrigger = function() {
        console.log($scope);
        listService.addOneRecord($scope.list);
};

调用方法如上所示。