的index.html

Question

我有一个这样的模块：

var master = angular.module('master', ['DataService'])

master.controller('MasterController', function ($scope, MasterOp) {
$scope.status;
$scope.reports;

$scope.data = {
        singleSelect: "all",
        flag : "true"
       };

       $scope.filter = function() {

           $scope.data.flag = "false";

       };

$scope.groupBy = {
        pubid : "false",
        sid : "false",
        device : "false"    
};

$scope.getMasterReports = function() {

  $scope.user = JSON.parse(sessionStorage.response);

    //alert($scope.groupBy.pubid+"ak");

    MasterOp.getMasterReport($scope.sdate,$scope.edate,$scope.user.pubProfile.pubid,$scope.groupBy.pubid,$scope.groupBy.sid,$scope.groupBy.device)
        .success(function (data) {

            $scope.reports = JSON.parse(data.report);
            $scope.metrics= $scope.user.pubProfile.metrics;
        })
        .error(function (error) {
            $scope.status = 'Unable to load customer data: ' + error.message;
        });
};

$scope.logout = function(){

    window.location.href="/AnalyticsMaster/index.html";
};

$scope.tab2 = function()
{
    $scope.groupBy.sid="true";
    $scope.groupBy.pubid="false";
    $scope.data.flag = "true";
    $scope.data.SingleSelect = "all";
    $scope.reports=null;
    $scope.getMasterReports();
};

$scope.tab3 = function()
{
    $scope.groupBy.pubid="true";
    $scope.groupBy.sid="false";
    $scope.data.SingleSelect = "all";
    $scope.data.flag = "true";
    $scope.reports=null;
    $scope.getMasterReports();
};

$scope.tab1 = function()
{
    $scope.groupBy.pubid="false";
    $scope.groupBy.sid="false";
    $scope.data.flag = "true";
    $scope.data.SingleSelect = "all";
    $scope.reports=null;
    $scope.getMasterReports();
};


 });

当我尝试在此添加更多模块时，它会停止工作。我无法理解为什么会发生这种情况。例如，如果我这样添加，即使添加任何其他模块也无法工作，它也会停止工作。

var master = angular.module('master',['myApp','DataService'])

var master = angular.module('master',['ui.directives','ui.filters','DataService'])

两种情况都停止工作。请帮助我理解我做错了什么。

Answer 1

的index.html

在项目中添加多个模块时，请确保在索引html中有一个参考。像这样

<!-- Angular Modules -->
<script type="text/javascript" src="app/app.module.js"></script>
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/components/home/homeCtrl.js"></script>

或非自定义模块

<!-- Angular links -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>

与添加任何脚本相同。

主要模块

您要做的第二件事就是将它们添加到主模块中，如下所示

var app = angular.module("myApp",   [
 'ui.bootstrap',
 'ngAnimate',
 'myAppRouter',
 'myAppHomeCtrl',
 'myAppHomeService',
 'myAppNavbarDirective',
 'myAppNavbarService',
 'myAppLoginCtrl',
 'myAppLoginService'
 ]);

实例

角度的最佳做法是为每个功能创建一个模块。我一直在研究一个项目here是项目的链接，随意分叉或克隆它以便更好地了解结构。

Answer 2

您正在重复声明相同的模块名称。

您只需申报一次模块。声明它时，模块函数需要依赖数组的第二个参数。

之后，当您想要向该模块添加组件时，您使用的模块getter没有依赖数组参数

// declare a new module
angular.module('master', ['DataService']); // has another module dependency

// add components to existing module
angular.module('master').controller(....;

// add the dependency module shown in "master"
angular.module('DataService', []);// might also have different dependencies here

在angularjs中包含多个模块

2 个答案:

的index.html

主要模块

实例