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
   198   199   200   201   202   203   204   205   206   207   208