Fatal编程技术网
  • angularjs/
  • Angularjs 即使在主页面中定义了控制器，角度路由也不起作用

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

angularjs

Angularjs 即使在主页面中定义了控制器，角度路由也不起作用,angularjs,Angularjs,我已经在主页面中定义了我的控制器，但仍然不断出现此错误。[$controller:ctrlreg]$controller/ctrlreg？p0=NavCtrl app.module.js var app = angular.module("myApp", ["ngRoute"]); routeConfig.js angular.module("myApp", ["ngRoute"]).config(function ($routeProvider) { $routeProvider

我已经在主页面中定义了我的控制器，但仍然不断出现此错误。[$controller:ctrlreg]$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>
请建议如果我遗漏了什么，或者我需要注入一些东西使路由工作

正如@Lex所说， 请从
TestScript.js
中的所有控制器中删除
['ngRoute']
，并在
MainPage.html
中包含/取消注释
app.module.js
和
routeConfig.js
脚本

这样，如果把所有这些放在一起，你就可以实现这样的目标

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

});
正如@Lex所说， 请从
TestScript.js
中的所有控制器中删除
['ngRoute']
，并在
MainPage.html
中包含/取消注释
app.module.js
和
routeConfig.js
脚本

这样，如果把所有这些放在一起，你就可以实现这样的目标

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

});
您只需将
app.module.js
脚本移动到
MainPage.html
中控制器脚本下方即可。请参阅@Tyler I Twest对我无效。每次调用
angular.module（'myApp'，['ngRoute']）
时，您都在创建一个新的应用程序模块，因为您正在传递第二个参数（要注入的东西数组）。第一次注册应用程序模块后，以后的引用应该是
angular.module（'myApp'）
，不带第二个参数。只需将
app.module.js
脚本移动到
MainPage.html
中控制器脚本下方即可。请参阅@Tyler I Twest对我无效。每次调用
angular.module（'myApp'，['ngRoute']）
时，您都在创建一个新的应用程序模块，因为您正在传递第二个参数（要注入的东西数组）。一旦您第一次注册了应用程序模块，以后的引用应该是
angular.module（'myApp'）
，不带第二个参数。