Question

我是AngularJS的新手，并与Yeoman建立了我的项目。 Yeoman为以下方式控制选项卡内容的基本AngularJS选项卡导航网站生成脚手架。

app.js：

'use strict';

angular
  .module('ang1050315App', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'formModule'
  ])

  .controller('HeaderController', ['$scope',  
  }]).

  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
            .when('/contact', {
        templateUrl: 'views/contact.html',
        controller: 'ContactCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

然后，每个标签的模块内容基本相同，例如。

about.js：

'use strict';

angular.module('ang1050315App')
  .controller('AboutCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

  });

html模板：

   <div class="collapse navbar-collapse" ng-controller="HeaderController">
        <ul class="nav navbar-nav">
            <li ng-class="{ active: isActive('/')}"><a href="#/">Home</a></li>
            <li ng-class="{ active: isActive('/about')}"><a href="#/about">About</a></li>
            <li ng-class="{ active: isActive('/contact')}"><a href="#/contact">Contact</a></li>
        </ul>
    </div>

我想知道的是，为什么要为每个标签使用相同的名称模块，即＆＃34; ang1050315App＆＃34;。这似乎是一个缺点，因为它强制每个选项卡具有相同的模块依赖性。

Answer 1

模块名称（在本例中为ang1050315App）只是整个应用的标识符。生成的代码中发生的所有事情都是每个controller被分配给特定的应用程序模块（ang1050315App）。换句话说，＆＃34;控制器＆＃39;关于控制＆＃39;是模块名称＆＃39; ang1050315App＆＃39;＆＃34;。

的项目的一部分。

如果您希望代码更简洁，可以使用变量引用Angular项目（例如myApp）：

var myApp = angular.module('ang1050315App', [
                'ngAnimate',
                'ngCookies',
                'ngResource',
                'ngRoute',
                'ngSanitize',
                'ngTouch',
                'formModule'
            ]);

对于你的控制器：

myApp.controller('AboutCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
});

请注意您不再需要从controller。

引用模块名称

Answer 2

您只需将yr角度应用名称指定给变量并导出即可。如果您不导出“app”，jshint将在其他js文件中显示错误。

'use strict';
/* global app:true */
/* exported app */

/**
* @ngdoc overview
* @name yrAppName
* @description
* # yrAppName
*
* Main module of the application.
*/
var app = angular.module('yrAppName', []);

然后在你的控制器，指令或服务......

somecontroller.js

app.controller('controllerName', []);

somefactory.js

app.factory('factoryName',[]);

为什么AngomanJS的Yeoman脚手架为每个选项卡使用相同的模块

2 个答案: