отделяет файл viewroute.js от angularjs не загружается - PullRequest
Новая
       7

отделяет файл viewroute.js от angularjs не загружается

0 голосов
/ 25 сентября 2018

Я могу запустить этот код без разделения.Но когда я отделился, он перестает работать без каких-либо ошибок на консоли.Также в отдельном viewroute.js я могу поразить отладчик, но не могу загрузить нормальное поведение.Я делаю некоторую концептуальную ошибку, так как сталкиваюсь с проблемами при отделении сервисов от одного и того же кода.Пожалуйста, порекомендуйте.Пробная загрузка jquery также и до angularjs

По умолчанию адрес локального хоста: - http://localhost:3000/#!/

структура папок выглядит следующим образом: - public> 1. controllers> 1.memberscontroller 2. mgRoute> viewroute.js views- 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: '/'
        });
});

1 Ответ

0 голосов
/ 25 сентября 2018

Похоже, вы объявляете 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. Объявление ваших маршрутов как части нового модуля, routModule , в зависимости от вашего 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.

...