1

我能够在不分离的情况下运行此代码。但是当我分开时，它停止运行，控制台上没有任何错误。同样在单独的 viewroute.js 中，我可以点击调试器但无法加载正常行为。我正在做一些概念性错误，因为我也面临将服务与相同代码分离的问题。请指教。也尝试在 angularjs 之前加载 jquery

默认本地主机地址是：- http://localhost:3000/#!/

文件夹结构如下：-public>1.controllers>1. 会员控制器 2. mgRoute > viewroute.js 视图- index.html

Index.html 文件如下，其中包含加载脚本的顺序：-

<!DOCTYPE html>
<html ng-app="tdmModule">

<head>
    <title>welcome</title>
    <!-- Bootstrap core CSS -->

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular- 
        route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular- 
          resource.js"></script>
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="ngRoute/viewroute.js" type="text/javascript"></script>
    <script src="controllers/app.js" type="text/javascript"></script>
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="stylesheets/style.css" rel="stylesheet">

</head>

<body>

    <div>
        <div class="container pt-5">
            <div ng-view></div>
        </div>
    </div>

</body>

</html>

我的 app.js 文件如下：-

var app = angular.module("tdmModule", ["ngRoute"]);

app.config(['$qProvider', function($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);

//I WANT TO SEPERATE THIS FILE FROM HERE TO A SEPERATE FILE
app.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider
            .when("/", {
                templateUrl: "home",
                controller: 'homeController'
            })
            .when("/membershipdetails", {
                templateUrl: "membershipdetails",
                controller: 'membershipController'
            })
            .when("/help", {
                templateUrl: "help",
                controller: 'helpController'
            }).otherwise({
                redirectTo: '/'
            });
    }
]);
// TILL HERE 

app.controller('membershipController', function($scope, $filter, $http,
    $httpParamSerializer, $location, membershipService, setnotanoption,
    compileservice) {
    var absurl = $location.absUrl().split('/#!/')[1];
    $scope.pagename = absurl;
    $scope.noOfColumn = false;
    $scope.currentPage = 0;
    $scope.pageSize = 5;
    $scope.q = '';
    $scope.selectColumnList = [];
    $scope.tableBody = [];
    $scope.columnResponse = [];
    $scope.output = [];
    $scope.inputjson = '';
    $scope.NoOfRecords = '';
    $scope.enviornmentOptions = [{
        name: "Select a Enviornment",
        id: 1
    }, {
        name: "BOSSBR03",
        id: 2
    }, {
        name: "BOSST03",
        id: 3
    }];

    $scope.selectedEnvOption = $scope.enviornmentOptions[0];

    $scope.nextData = function() {
        return $filter('filter')($scope.tableBody, $scope.q)
    }

    $scope.numberOfPages = function() {
        return Math.ceil($scope.nextData().length / $scope.pageSize);
    }


    $scope.isObjectEmpty = function(card) {
        return Object.keys(card).length === 0;
    }

    $('#fetchDetail').on('click', function() {
        $scope.selectColumnList = [];
        $("#rightColumn option").each(function(index) {
            $scope.selectColumnList[index] = $(this).text();
        });
        if ($scope.selectColumnList.length > 3) {
            $("#columnSelectionModel").modal('hide');
        } else {
            $scope.$apply(function() {
                $scope.noOfColumn = true;
            });
        }
    });
});

我尝试的是以下文件：-viewroute.js。我可以点击暗示它正在加载的调试器。但是当我从 app.js 文件中注释掉它时。我的页面没有加载。在控制台中也不会引发错误。

var app = angular.module("tdmModule", ["ngRoute"]);

//for Possibly unhandled rejection
app.config(['$qProvider', function($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);

debugger; ///this debugger is being hit
app.config(function($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "home",
            controller: 'homeController'
        })
        .when("/membershipdetails", {
            templateUrl: "membershipdetails",
            controller: 'membershipController'
        })
        .when("/help", {
            templateUrl: "help",
            controller: 'helpController'
        }).otherwise({
            redirectTo: '/'
        });
});
4

1 回答 1

0

好像您要声明tdmModule两次。

您可以遵循两条路径：

  1. 将您的路线声明为tdmModule 的一部分

    这样，您的viewroutes.js遗嘱将如下所示：

    var app = angular.module("tdmModule");

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
        templateUrl: "home",
        controller: 'homeController'
    })
    .when("/membershipdetails", {
        templateUrl: "membershipdetails",
        controller: 'membershipController'
    })
    .when("/help", {
        templateUrl: "help",
        controller: 'helpController'
    })
    .otherwise({
        redirectTo: '/'
    });
});

  2. 将您的路线声明为新模块的一部分，即routesModule，作为 tdmModule 的依赖项。

    这样，您的viewroutes.js遗嘱将如下所示：

    var app = angular.module("routesModule", ["ngRoute"]);

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
        templateUrl: "home",
        controller: 'homeController'
    })
    .when("/membershipdetails", {
        templateUrl: "membershipdetails",
        controller: 'membershipController'
    })
    .when("/help", {
        templateUrl: "help",
        controller: 'helpController'
    })
    .otherwise({
        redirectTo: '/'
    });
});

    你app.js应该是：

    var app = angular.module("tdmModule", ["routesModule"]);
...

希望能帮助到你。

已编辑

由于脚本的顺序，第一个选项在您的情况下不起作用。

顺序很重要，您必须在tdmModule上定义配置之前声明它。

所以你必须controller/app.js在viewroutes.js.

于 2018-09-25T10:53:22.150 回答