Angulaire de routage ne fonctionne pas, même après le contrôleur est défini dans la page principale

voix
0

J'ai défini mon contrôleur à la page principale mais je continue à obtenir cette erreur. [contrôleur $: ctrlreg] http://errors.angularjs.org/1.6.10/ ? contrôleur / 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>

S'il vous plaît indiquer si je manque quelque chose ou ai-je besoin d'injecter quelque chose à faire le travail de routage

Créé 07/11/2018 à 20:20
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
2

Il est tout comme le @lex dit, s'il vous plaît supprimer ['ngRoute']de tous les contrôleurs de votre TestScript.jset include / décommenter vos app.module.jset routeConfig.jsscripts dans votreMainPage.html

Alors que vous pouvez obtenir quelque chose comme ça, si tout cela est mis en place;

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');

});
Créé 07/11/2018 à 22:21
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more