Page 203 - AngularJS权威教程
P. 203
18.7 开始 183
<link rel="stylesheet" href="styles/bootstrap.min.css"> 1
</head>
<body>
<div ng-view></div>
<script src="scripts/app.js"></script> 2
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/directives.js"></script> 3
</body>
</html>
在这个标准的Angular模板中,并未加载任何出格的东西。我们加载了基础的Angular库,以 4
及ngRoute和自定义的应用代码。
我们的应用代码也是标准的。scripts/app.js文件简单地定义了一个带有单个路由/的Angular模块: 5
angular.module('myApp', [
'ngRoute', 6
'myApp.services',
'myApp.directives'])
.config(function($routeProvider) {
$routeProvider 7
.when('/', {
controller: 'MainController',
templateUrl: 'templates/main.html' 8
})
.otherwise({
redirectTo: '/'
}); 9
});
scripts/controllers.js文件从主模块创建了控制器: 10
angular.module('myApp')
.controller('MainController', function($scope) { 11
});
scripts/services.js和scripts/directives.js文件也很简单,如图18-5所示。 12
// scripts/services.js
angular.module('myApp.services', []); 13
// scripts/directives.js
angular.module('myApp.directives', [])
14
15
16
17
图18-5 Angular结构 18