AngularJS实现路由实例(2)

angular.module('myApp') .factory('FirstService',[function () { var list = [ { name : 'Rose',age : 10 }, { name : 'Tom',age : 19 } ]; return { getList : function () { return list; } } }])

注意：angular.module('myApp')不需要注入依赖

6、下面看一下控制器集成，controller.js

angular.module('myApp') .controller('FirstCtrl',['$css','FirstService',function ($css,$service) { var self = this; $css.add('css/first.css'); self.list = function () { return $service.getList(); } }]) .controller('SecondCtrl',['$css','FirstService',function ($css,$service) { var self = this; $css.add('css/second.css'); self.list = function () { return $service.getList(); } }])

代码分析：

1）在控制器中注入服务依赖以及#css依赖

复制代码 代码如下:

controller('FirstCtrl',['$css','FirstService',function ($css,$service)

2）添加css依赖路径

复制代码 代码如下:

$css.add('css/first.css');

注意：angular.module('myApp')不需要注入依赖

7、好了。逻辑的部分已经完成了，下面展示一下我们的样式以及结构部分吧

first.html

<div> <h1> First Page </h1> <div ng-repeat="p in firstCtrl.list()"> {{ p.name }} == {{ p.age }} </div> </div>

second.html

<div> <h1> Second Page </h1> <div ng-repeat="p in secondCtrl.list()"> {{ p.name }} == {{ p.age }} </div> </div>

first.css

.first{ background-color: yellow; } .first *{ color: red; }

second.css

.second{ background-color: skyblue; } .second *{ color: green; }

您可能感兴趣的文章: