Angularjs中service与controller注入

Dear 丶 2022-08-03 13:55 162阅读 0赞

相关项目:[AngularJsPractice][]

对于angularjs的MVC结构主要依赖注入。下文已controller以及service注入为例说明。

代码中的scope,http本身也是注入形式引入的。它们是AngularJs自身封装的对象。

## 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);
    };

调用方法如上所示。

[AngularJsPractice]: https://github.com/WengShengyuan/angularjsPractice