将 viewroute.js 文件与 angularjs 分开无法加载

Question

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

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

文件夹结构如下：- public> 1.控制器>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: '/'
        });
});

Answer 1

您好像在声明 tdmModule 两次。

您可以遵循两条路径：

将您的路由声明为 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: '/'
    });
});

将您的路由声明为新模块的一部分，routesModule，作为您[=43]的依赖项=]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。

所以你必须在 viewroutes.js 之前放置 controller/app.js 导入。

将 viewroute.js 文件与 angularjs 分开无法加载

separating viewroute.js file from angularjs does not load

javascript

modularity

angularjs

angular-services