Question

我已经在主页上定义了控制器，但是仍然出现此错误。 [$ 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>

请建议我是否缺少某些东西，或者需要注入一些东西来使路由工作正常工作

Answer 1

就像@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');

});

即使在主页中定义了控制器后，角路由也不起作用

1 个答案: