0

angular js を試し、egghead.io ビデオを使用し始めたところです。サンプルの 1 つは、routeProvider に関するものです。vs.net 2012 を使用して実行していますが、ヒットしたときにテンプレートやメッセージを表示できません。

http://localhost/app.html/pizza

これは、app.html 内のソースコードです。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    // Create a new module
    var app = angular.module("app", []);

    app.config(function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: "app.html",
            controller: "AppCtrl"
        })
            .when('/pizza', {
                template: "yum"
            })
    });

    app.controller("AppCtrl", function ($scope) {
        $scope.model = {
            message: "this is my app"
        }
    });
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app" ng-controller="AppCtrl">

</div>
4

3 に答える 3

0

app.htmlyum.htmlページがロードされた後、角度によってフェッチされます。したがって、例http://localhost/pizzaでは、上記のコードを含むページを指す必要があり、yum.html (および app.html) はプロジェクトのルートに配置する必要があります。

ロード時に angular は、「/」を押すと app.html をダウンロードし、「/pizza」を押すと yum.html をダウンロードします。これが例です

index.html<html>( 、<head>、<body>などを除く)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    // Create a new module
    var app = angular.module("app", []);

    app.config(function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: "app.html",
            controller: "AppCtrl"
        })
            .when('/pizza', {
                template: "yum.html" // there was a typo here in the OP
            })
    });

    app.controller("AppCtrl", function ($scope) {
        $scope.model = {
            message: "this is my app"
        }
    });
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
  <div ng-view></div>
</div>

app.html

<div>
  <p ng-bind="model.app"><p>
  <a ng-href="/pizza">Go get some pizza!</a>
</div>

yum.html

<p>
 MMMM, pizza
</p>

ルートでコントローラーを定義したため、ng-controller 属性は必要ありません。ng-viewangular がテンプレートを挿入する場所を認識できるように、メインの html ファイルのどこかに属性が必要です。

于 2013-10-21T21:49:22.073 に答える
0

Egghead.io の John は、チュートリアルのこのセクションを更新する必要があります。

この回答を参照してください: モジュールのインスタンス化に失敗しました [$injector:unpr] 不明なプロバイダー: $routeProvider

この依存関係を追加する必要があります:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

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

PStemplate: "yum"は完全に有効ですtemplate: "<p>yum</p>"
（JoeyPはあなたがやろうとしていると思いますtemplateUrl: "yum.html"）

于 2014-10-14T20:56:41.200 に答える