Question

这是我第一次玩Angular.js。我有一个索引页面：

<html ng-app="toDoListApp">
<head>

    <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
    {{ 1+2 }} #<-- this part is breaking

    <div class="main" ng-view></div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/directives.js"></script>
</body>
</html>

我正试图让我的路线与它一起工作。这是我的routes.js：

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


/////////////////////////////
//when I remove this bottom part, the index.html page works.
toDoListApp.config(function($routeProvider) {
    $routeProvider.when(
        '/',
        {
            templateUrl: 'partials/chores.html',
            controller: 'ChoresController'
        });
});

///////////////////////////////

不太确定我做错了什么......我错过了依赖吗？这是我从angular网站教程中复制的package.json文件：

{
  "version": "0.0.0",
  "private": true,
  "name": "toDoListApp",
  "description": "fooling around with angular",
  "devDependencies": {
    "karma": "~0.10",
    "protractor": "~0.20.1",
    "http-server": "^0.6.1",
    "bower": "^1.3.1",
    "shelljs": "^0.2.6"
  },
  "scripts": {
    "postinstall": "bower install",

    "start": "http-server -p 8000",
    "test": "karma start test/karma.conf.js",

    "update-webdriver": "webdriver-manager update",
    "protractor": "protractor test/protractor-conf.js",
    "test-single-run": "karma start test/karma.conf.js --single-run",

    "update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\""
  }
}

和我的bower.json也来自angular的教程：

{
  "name": "toDoListApp",
  "version": "0.0.0",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "1.2.x",
    "angular-mocks": "~1.2.15",
    "bootstrap": "~3.1.1",
    "angular-route": "~1.2.15",
    "angular-resource": "~1.2.15",
    "jquery": "1.10.2",
    "angular-animate": "~1.2.15"
  }
}

如果您需要更多文件，请与我们联系。

=== 更新 ===

添加ngRoutes后，日志似乎发生了变化，但我的控制器出现了问题：

INDEX.HTML

<html ng-app="toDoListApp">
<head>

    <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
    {{ 1+2 }} #<-- still breaks

    <div class="main" ng-view></div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular-route.min.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/directives.js"></script>
</body>
</html>

路线：

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

toDoListApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when(
        '/',
        {
            templateUrl: 'partials/chores.html',
            controller: 'ChoresController'
        });
})];

但是在日志中它现在说我的控制器中存在语法错误：

toDoListApp.controller("ChoresController", function($scope) {
    $scope.chores = ["laundry", "dishes"];
});

Answer 1

ngularJS中的ngRoute不包含在库中。

您可以通过Google的CDN

下载

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular-route.min.js

在AngularJS之后加载它。

您还需要将其指定为应用模块的依赖项。

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

配置路线时。你必须注入$ routeProvider

toDoListApp.config(['$routePrivder',function($routeProvider) {
    $routeProvider.when(
        '/',
        {
            templateUrl: 'partials/chores.html',
            controller: 'ChoresController'
        });
}]);

路由控制器用于在更改路由时处理特殊逻辑。不要将路由控制器与您将与指令一起使用的控制器混淆。

Answer 2

我的路线中使用controller并没有成功。因此，我选择仅在视图中设置控制器。

<div ng-controller="ChoresController">

</div>

Angular noob：为什么我的主页没有加载（相关路线）？

2 个答案: