angularjs应用骨架(3)

　　好，继续上一章节我们继续聊聊angularjs骨架。开发任何一款优秀的应用都会面临一项非常困难的工作，那就是找到一种合适的方式方法把代码组织在合适的功能范围内。我们已经看过控制器的处理方式，它会提供一块空间，把正确的数据模型和函数暴露给视图模版。但是用来支持我们应用的代码该怎么办呢？有一块最明显的可以放在这些代码的地方，那就是控制器的函数。

　　这种做法对于小型的应用和例子来说可以工作的很好，我们已经看到过很多这样的例子，但是在真实的应用中，这种做法很快就会使得代码无法维护。控制器将会变成一个垃圾场，我们做的所有东西都会倒在里面。它们会变得非常难以理解，并且很难修改。

　　我们来看模块
　　我们来看模块，它们提供了一种方法，可以用来组织应用中一块功能区域的依赖关系；同时还提供了一种机制，可以自动解析依赖关系（又叫做依赖注入）。一般来说，我们把这些东西叫做依赖服务。因为它们负责为应用提供特殊服务。

　　例如，我们要在购物站点中的一个控制器中需要从服务器上获取一个商品列表，那么我们就需要这些对象——不妨把它叫做Items——用来处理服务器端获取商品列表的工作，进而，Items对象就需要以某种方式与服务器上的数据库进行交互，可以通过XHR或者WebSocket。

　　如果没有模块的情况下，我们的控制器看起来可能就是这样：

　　

!(function () {
var app = angular.module('AMail', ['ngRoute']);

function emailRouteCoinfig($routeProvider) {
$routeProvider.when('/', {controller: ListController, templateUrl: 'list.html'}).
when('/view/:id', {controller: DetailController, templateUrl: 'detail.html'}).
otherwise({redirectTo: '/'});
};
//配置我们的路由，以便AMail能够找到他
app.config(emailRouteCoinfig);

//一些虚拟的哟意见
var messages = [
{
id: 0,
sender: 'jean@yesno.com.cn',
subject: '今天不用加班啦，明天周末',
date: '2015年7月14日 21:39:59',
message: '今天不用加班啦，明天周末！明天是周末，可以好好休息两天了。',
recipients: ['woshixuleijava@163.com']
},
{
id: 1,
sender: 'jean2@yesno.com.cn',
subject: '明天不用加班啦，明天周末',
date: '2015年7月15日 21:39:59',
message: '明天不用加班啦，明天周末！明天是周末，可以好好休息两天了。',
recipients: ['woshixuleijava2@163.com']
},
{
id: 2,
sender: 'jean3@yesno.com.cn',
subject: '后天不用加班啦，明天周末',
date: '2015年7月16日 21:39:59',
message: '后天不用加班啦，明天周末！明天是周末，可以好好休息两天了。',
recipients: ['woshixuleijava3@163.com']
}
];

function ListController($scope) {
$scope.messages = messages;
};
function DetailController($scope, $routeParams) {
$scope.message = messages[$routeParams.id];
};

}());

controller.js

　　效果图：

　　


　　


我们已经为应用搭好了基本框架，这款应用带有很多视图，可以通过修改url的方式来切换视图。这就意味着对用户来说，前进后退按钮能真正运行起来了。而这里实际上只有一个真实的HTML页面。