刚开始学AngularJS的时候,觉得模块这个东西很拽,但是学了路由之后,会导致一个js文件里面放置了很多JS代码,如果程序的代码量再继续扩大,那么,AngularJS的代码就会变得难以维护了。那么此时,我们就需要对我们的代码进行模块化组织了:
Index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/AngularFiles/app.js"></script>
<script src="~/AngularFiles/controllers.js"></script>
<script src="~/AngularFiles/ServiceModule.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#/"><i class="fa fa-home"></i> 雅安校区</a></li>
<li><a href="#/about"><i class="fa fa-shield"></i> 成都校区</a></li>
<li><a href="#/contact"><i class="fa fa-comment"></i> 都江堰校区</a></li>
</ul>
</div>
</nav>
</header>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
app.js,程序的入口,就相当于我们C语言的Main函数。
(function () {
'use strict';
var myApp = angular.module('myApp', ['ngRoute', "controllersModule"]);//申明对controllers的依赖
//配置路由
myApp.config(["$routeProvider", function ($routeProvider) {
$routeProvider
//home
.when('/', {
templateUrl: '/Template/home.html',
controller: 'mainController'
})
//about
.when('/about', {
templateUrl: '/Template/about.html',
controller: 'aboutController'
})
//contact
.when('/contact', {
templateUrl: '/Template/contact.html',
controller: 'contactController'
});
}]);
}())
controller.js,这里我们主要将所有的控制器代码放置到一个文件下面,便于日后的管理和维护。
(function () {
'use strict';
var app = angular.module("controllersModule", ["common"]);//声明对common模块的依赖
app.controller('mainController', ["$scope", "MathService", "$http", function ($scope, MathService, $http) {
// create a message to display in our view
$scope.message = '四川农业大学(Sichuan Agricultural University)简称“四川农大”,是由四川省人民政府主管的一所以生物科技为特色、农业科技为优势,农、理、工、经、管、医、文、教、法、艺多学科协调发展的重点大学,是国家“211工程”重点建设院校之一,入选“111计划[1] “、“卓越农林人才教育培养计划”、“援疆学科建设计划”、“国家建设高水平大学公派研究生项目”,是国家“973计划”承担高校,“四川2011计划”高校[2] ,是全国首批高等学校新农村发展研究院[3] 试点单位,是中华人民共和国教育部与四川省人民政府共建的省部共建大学,[4] 四川省首批人才优先发展试验区2所试点高校之一, [5] 具备自主招生资格[6] 。';
$scope.img_path = "/IMG/ya.jpg";
$scope.add = MathService.add;
}]);
//about控制器
app.controller('aboutController', ["$scope", "$location", function ($scope, $location) {
$scope.img_path = "/IMG/cd.jpg";
$scope.message = '学校最早起源于1906年(清光绪三十二年)在成都创办的“四川通省农业学堂”,学校前身为原四川大学农学院。1956年,四川大学农学院迁往雅安独立办学,定名“四川农学院”;1985年,学校更名为四川农业大学。';
}]);
//contact控制器
app.controller('contactController', ["$scope", "$location", function ($scope, $location) {
$scope.img_path = "/IMG/djy.jpg";
$scope.message = '截止2015年7月,学校拥有三个校区,分别位于雅安市雨城区(校本部校区)、成都市温江区(成都校区)和都江堰市(都江堰校区),校园总面积约4500亩;全日制在校生37000余人,其中:本科生32000余人,硕士和博士研究生近4000人。同时学校在成都市崇州市建有占地2300余亩的现代农业研发基地,在四川农业大学邛崃现代农业专家大院示范基地安置有我国第二台(世界第三台)毫米波扫描昆虫雷达。';
}]);
}())
Servicer.js,主要包括服务的各种代码.
(function () {
'use strict';
var app = angular.module('common', []);
app.factory("MathService", function () {
var add = function (x, y) {
return x + y;
}
var minus = function (x, y) {
return x - y;
}
var multiply = function (x, y) {
return x * y;
}
var divide = function (x, y) {
if (y == 0) {
throw Error;
}
return x / y;
}
return {
add: add,
minus: minus,
multiply: multiply,
divide: divide
}
});
})()
如果还有各种filters,也是按照这个道理组织。
经过这样处理之后的代码,就变得井井有条了,以后无论我们的业务逻辑怎样扩展,我们的程序照样可以很好的组织。
TIPS:
1.在AngularJS中建议大家使用立即函数,即:
(function () {
//angularjs代码
}())
2.希望大家在写AngularJS代码的时候启用JavaScript的严格模式,这样可以避免一些不必要的错误。
3.在编写模块的时候,希望大家采用第二种方式书写,这样可以避免在代码压缩的时候,AngularJS报错:
不推荐的做法:
app.controller('aboutController', function ($scope, $location) {
$scope.img_path = "/IMG/cd.jpg";
$scope.message = '学校最早起源于1906年(清光绪三十二年)在成都创办的“四川通省农业学堂”,学校前身为原四川大学农学院。1956年,四川大学农学院迁往雅安独立办学,定名“四川农学院”;1985年,学校更名为四川农业大学。';
});
推荐的做法:
app.controller('mainController', ["$scope", "MathService", "$http", function ($scope, MathService, $http) {
// create a message to display in our view
$scope.message = '四川农业大学(Sichuan Agricultural University)简称“四川农大”,是由四川省人民政府主管的一所以生物科技为特色、农业科技为优势,农、理、工、经、管、医、文、教、法、艺多学科协调发展的重点大学,是国家“211工程”重点建设院校之一,入选“111计划[1] “、“卓越农林人才教育培养计划”、“援疆学科建设计划”、“国家建设高水平大学公派研究生项目”,是国家“973计划”承担高校,“四川2011计划”高校[2] ,是全国首批高等学校新农村发展研究院[3] 试点单位,是中华人民共和国教育部与四川省人民政府共建的省部共建大学,[4] 四川省首批人才优先发展试验区2所试点高校之一, [5] 具备自主招生资格[6] 。';
$scope.img_path = "/IMG/ya.jpg";
$scope.add = MathService.add;
}]);