// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
controllers.js
'use strict';
/* Controllers */
angular.module('myApp.controllers', [])
.controller('MyCtrl1', ['$scope', function($scope) {
}])
.controller('MyCtrl2', ['$scope', function($scope) {
}]);
directives.js
'use strict';
/* Directives */
angular.module('myApp.directives', []).
directive('appVersion', ['version', function(version) {
return function(scope, elm, attrs) {
elm.text(version);
};
}]);
filters.js
'use strict';
/* Filters */
angular.module('myApp.filters', []).
filter('interpolate', ['version', function(version) {
return function(text) {
return String(text).replace(/\%VERSION\%/mg, version);
};
}]);
services.js
'use strict';
/* Services */
// Demonstrate how to register services
// In this case it is a simple value service.
angular.module('myApp.services', []).
value('version', '0.1');
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html ng-app="myApp"> <![endif]-->
<!--[if IE 7]> <html ng-app="myApp"> <![endif]-->
<!--[if IE 8]> <html ng-app="myApp"> <![endif]-->
<!--[if gt IE 8]><!--> <html ng-app="myApp"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta content="">
<meta content="width=device-width, initial-scale=1">
<link href="https://www.linuxidc.com/bower_components/html5-boilerplate/css/normalize.css">
<link href="https://www.linuxidc.com/bower_components/html5-boilerplate/css/main.css">
<link href="https://www.linuxidc.com/css/app.css"/>
<script src="https://www.linuxidc.com/bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<ul>
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>
<!--[if lt IE 7]>
<p>You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="https://www.linuxidc.com/ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="https://www.linuxidc.com/bower_components/angular/angular.js"></script>
<script src="https://www.linuxidc.com/bower_components/angular-route/angular-route.js"></script>
<script src="https://www.linuxidc.com/js/app.js"></script>
<script src="https://www.linuxidc.com/js/services.js"></script>
<script src="https://www.linuxidc.com/js/controllers.js"></script>
<script src="https://www.linuxidc.com/js/filters.js"></script>
<script src="https://www.linuxidc.com/js/directives.js"></script>
</body>
</html>
如此在不使用requirejs的情景下,项目就构建完成了.还有几个补充点就是其一你可以将controllers继续拆分为多个controller模块,这里可以完全按照你的业务进行划分.比如user目录下userController等等.然后将所有这些我们自己写的文件通过grunt或者gulp进行合并为一个单独的总的文件all.js这样在页面中除了库文件只要这一个文件就行了.angular的module所带来的好处就是这样合并的文件,不用在乎js合并的顺序,因为它是通过angular依赖注入的.