Question

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

这是我的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]它为我提供了此page的链接。我已经访问过该网站，在检查完所有内容之后，只有当我在app.js中没有路由代码时，模块似乎才能正常加载。那么我在这里做错了什么？我正在看这个约一个小时，我无法弄明白。

Answer 1

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

最具体：

然后通过将模块添加为依赖模块来加载应用程序中的模块：
$routeProvider

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 个答案: