Угловая маршрутизация не работает даже после определения контроллера на главной странице - PullRequest
Новая
       1

Угловая маршрутизация не работает даже после определения контроллера на главной странице

0 голосов
/ 07 ноября 2018

Я определил свой контроллер на главной странице, но все равно получаю эту ошибку. [$ controller: ctrlreg] http://errors.angularjs.org/1.6.10/$controller/ctrlreg?p0=NavCtrl

app.module.js 

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

routeConfig.js 

angular.module("myApp", ["ngRoute"]).config(function ($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'Home.html',
            controller: 'HomeController'
        })
        .when('/blog', {
            templateUrl: 'Blog.html',
            controller: 'BlogController'
        })
        .otherwise({
            redirectTo: '/home',
            controller: 'HomeController',

        });
});

TestScript.js 

angular.module("myApp", ["ngRoute"]).controller('NavCtrl',
['$scope', '$location', function ($scope, $location) {
    $scope.navClass = function (page) {
        var currentRoute = $location.path().substring(1) || 'home';
        return page === currentRoute ? 'active' : '';
    };

    $scope.loadHome = function () {
        $location.url('/home');
    };

    $scope.loadBlog = function () {
        $location.url('/blog');
    };

}]);


angular.module("myApp", ["ngRoute"]).controller('HomeController', function ($scope, $compile) {
    console.log('inside home controller');

});

angular.module("myApp", ["ngRoute"]).controller('BlogController', function ($scope, $compile) {
    console.log('inside blog controller');

});

home.html 

<div>
    Home Navigation panel.
</div>

Blog.html 

<div>
    Blog Navigation panel.
</div>

MainPage.html 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' />
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="scripts/angular.min.js"></script>



    <script src="scripts/angular-route.min.js"></script>


    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



    <!--<script src="Views/Config/app.module.js"></script>
    <script src="Views/Directives/Ecommerce/controller.js"></script>
    <script src="Views/Directives/Ecommerce/directive.js"></script>-->
    <script src="TestScript.js"></script>
    <link rel="stylesheet" href="Content/EcommerceStyleSheet.css" type="text/css" />
</head>

<body ng-controller="NavCtrl">
    <!--<my-Directive></my-Directive>-->
    <a href="#" ng-click="loadHome()">Home</a><br />
    <a href="#" ng-click="loadBlog()">Blog</a>
    <br />
    <div ng-view></div>
</body>
</html>

Пожалуйста, предложите, если я что-то упустил или мне нужно что-то добавить, чтобы маршрутизация работала

1 Ответ

0 голосов
/ 08 ноября 2018

Это как сказал @Lex, удалите ['ngRoute'] со всех контроллеров в вашем TestScript.js и включите / раскомментируйте ваши app.module.js и routeConfig.js сценарии в ваших MainPage.html

Так что вы можете достичь чего-то подобного, если все это вместе; 

var app = angular.module("myApp", ["ngRoute"]); // from app.module

angular.module("myApp", ["ngRoute"]).config(function ($routeProvider) { // from routeConfig
    $routeProvider
        .when('/home', {
            templateUrl: 'Home.html',
            controller: 'HomeController'
        })
        .when('/blog', {
            templateUrl: 'Blog.html',
            controller: 'BlogController'
        })
        .otherwise({
            redirectTo: '/home',
            controller: 'HomeController',

        });
});


angular.module("myApp").controller('NavCtrl',
['$scope', '$location', function ($scope, $location) { // from TestScript

    $scope.navClass = function (page) {
        var currentRoute = $location.path().substring(1) || 'home';
        return page === currentRoute ? 'active' : '';
    };

    $scope.loadHome = function () {
        $location.url('/home');
    };

    $scope.loadBlog = function () {
        $location.url('/blog');
    };

}]);


angular.module("myApp").controller('HomeController', function ($scope, $compile) {
    console.log('inside home controller');

});

angular.module("myApp").controller('BlogController', function ($scope, $compile) {
    console.log('inside blog controller');

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...