1

Angular.js で単純な todo リスト アプリを作成しようとしていますが、ルーティングと ng-view を適切に機能させるのに苦労しています。私は主に、Dan Wahlinモジュール、ルート、およびファクトリによって記述されたコードの例に取り組んできました。

現在、このコードを実行すると、Angular が適切に起動されて機能していることがわかりますが、ng-view は、routes.js ファイルが表示するように指示しているものを認識していないようです (私の 2 つの部分ファイルは単なるランダム テキストです)。そのため、ng-view が適切に機能したときにわかります...)。routes.js ですべてが適切にコーディングされていると思いますが、ng-view がまだ Angular によって処理されない理由がよくわかりません。誰かが私のコードで ng-view が無視されている理由を説明できますか?

現在、私が持っているファイルは次のとおりです。

index.html

<!doctype html>
<html lang="en" ng-app="todoApp">
<head>
    <link rel="stylesheet" type="text/css" src="css/app.css">
    <title>Todo App</title>
</head>
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">    </script>
<script src="js/routes.js"></script>
<script src="js/controllers.js"></script>
</body>

controller.js

var todoApp = angular.module('todoApp');

todoApp.controller('UsersCtrl', function($scope) {
    $scope.users = [];
});

todoApp.controller('TodoCtrl', function($scope) {
    $scope.todos = [];
});

ルート.js

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

todoApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/users', {templateURL: 'partials/users.html', controller: 'UsersCtrl'});
    $routeProvider.when('/todos', {templateURL: 'partials/todos.html', controller: 'TodoCtrl' });
    $routeProvider.otherwise({ redirectTo: '/users' });
}]);
4

4 に答える 4

5

「templateURL」ではなく「templateUrl」を使用する必要があります。サンプルの動作プランクは @ http://plnkr.co/edit/peugMW8c0AmMO8YumhO7?p=previewです。

-バスカラ

于 2013-06-09T07:56:20.023 に答える
1

通常の方法では、コントローラーをファイルから取り出して、モジュール定義を別のファイルに入れます。すると、次の式が成り立ちます: 1 file = 1 piece of application:

app.js

var todoApp = angular.module('todoApp', [])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/users', {templateURL: 'partials/users.html', controller: 'UsersCtrl'});
        $routeProvider.when('/todos', {templateURL: 'partials/todos.html', controller: 'TodoCtrl' });
        $routeProvider.otherwise({ redirectTo: '/users' });
    }]);

コントローラー/UsersCtrl.js

todoApp.controller('UsersCtrl', function($scope) {
    $scope.users = [];
});

コントローラー/TodoCtrl.js

todoApp.controller('TodoCtrl', function($scope) {
    $scope.todos = [];
});

すべてのファイルを index.html に含めることを忘れないでください。

この原則の実際の応用を見たい場合は、angular-seedプロジェクトを調べてください。

于 2013-06-09T07:53:17.200 に答える