添加路由后，为什么我的AngularJS应用无法正常工作？

Question

我是AngularJS的新手，我实际上是从今天开始的，我想为使用AngularJS的公司创建示例站点。 我的计划是为产品创建一个视图，并为“关于”页面创建一个视图。

这是我的index.html代码：

<!doctype html>


<html ng-app="myApp" ng-controller="myCtrl">
<head>
    <title>{{ title }}</title>
    <script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.5.0/angular-route.js"></script> 
    <script src="js/app.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 

</head>

<body>
    <nav class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand"> {{ title }}</a>
        </div> <!-- navbar-header -->

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#/products">Products</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </div>
    </nav>

    <div ng-view></div>
</body>
</html>

这就是我的app.js文件中的内容：

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

app.controller('myCtrl', function($scope){
   $scope.title = "My company site"; 
});

app.config(['$routeProvider', function($routeProvider){
    $routeProvider.
    when('/products', {
        templateUrl: 'partials/home.html',
        controller: 'productsController'
    }).
    when('/about', {
        templateUrl: 'partials/about.html',
        controller: 'myCtrl'
    }).
    otherwise({
        redirectTo: '/products'
    });
}]);

app.controller('productsController', function($scope){
    $scope.message = 'This will show my products page';
});

app.controller('aboutController', function($scope){
    $scope.message = 'This will show my about page';
});

每当我单击导航栏上的链接时，单击链接的视图都不会呈现。 网站的标题也会在浏览器中显示为{{ title }} 。 这些问题是在我添加路由代码时开始的。 如果我从路由中删除代码，标题将正确显示。 另外，无论何时我在站点上拥有路由代码，我的浏览器都会收到此错误。 Uncaught Error: [$injector:modulerr] ，它给了我此页面的链接。 我已经访问了该站点，并且在检查了所有内容之后，仅当我在app.js中没有用于路由的代码时，模块才能正常加载。 那我在做什么错呢？ 我正在看这个约一个小时，我无法弄清楚。

Answer 1

您正在尝试使用ngRoute ，这是一个单独的模块，需要单独安装和包含。 错误页面链接到另一个页面，该页面专门告诉您$routeProvider在当前项目中未知。 有关安装说明，请参见ngRoute页面： https ://docs.angularjs.org/api/ngRoute。

最具体地说：

然后通过将模块添加为依赖模块来将其加载到应用程序中：
 angular.module('app', ['ngRoute']); 

Answer 2

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

添加依赖项。 为我工作。

Answer 3

您没有在应用程序中加载ngRoute。 要加载它，您应该执行以下操作：

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

Answer 4

更改var app = angular.module('myApp', []); 到var app = angular.module('myApp', ['ngRoute']); 您缺少模块注入。

添加路由后，为什么我的AngularJS应用无法正常工作？

问题描述

4 个解决方案

解决方案1
2 2016-03-14 15:28:42

解决方案2
1 已采纳 2016-03-14 15:34:06

解决方案3
0 2016-03-14 15:29:20

解决方案4
0 2016-03-14 15:29:37

添加路由后，为什么我的AngularJS应用无法正常工作？

问题描述

4 个解决方案

解决方案1 2 2016-03-14 15:28:42

解决方案2 1 已采纳 2016-03-14 15:34:06

解决方案3 0 2016-03-14 15:29:20

解决方案4 0 2016-03-14 15:29:37

解决方案1
2 2016-03-14 15:28:42

解决方案2
1 已采纳 2016-03-14 15:34:06

解决方案3
0 2016-03-14 15:29:20

解决方案4
0 2016-03-14 15:29:37