角度ルートが機能していません。

私はangularJS.iを学んでいますが、チュートリアルのビデオからHTMLページのビューを表示するためにRouteを使ってコードを実装しようとしていましたが、私は固執していますが、チューターと全く同じことをやっていますが、それが機能しない理由の手がかりは、私はインターネットが、invainで検索しました、誰もが私のmistake.hereをpointoutください角度ルートが機能していません。

私のコードですIndex.htmlと

<html ng-app="App"> 
<head> 
<link href="css/style.css" rel="stylesheet" type="text/css"> 

</head> 
<body> 
    <div ng-view></div> 
    <script src="js/angular.js"></script> 
    <script src="js/angularRoute.js"></script> 
    <script src="App/Myapp.js"></script> 
    <script src="App/CustomerController.js"></script> 

</body> 
</html>

アプリケーション/ MyApp.js

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

App.config(function($routeprovider) 
      { 
    $routeprovider 
     .when('/',{ 
     controller:'CustomerController', 
     templateUrl:'App/views/customers.html' 
    }) 
    .otherwise({ redirectTo:'/'}); 

});

の

ビュー/ customers.html

<div class="heading"> 
     <h1>Customers List</h1> 
    </div> 
    <div class="filterBox"> 
    Filter:<input type="text" ng-model="CustomerFilter.name"/> 
    </div> 
    <table> 
     <th ng-click="sorter='CustomerID';reverse=!reverse">ID</th> 
     <th ng-click="sorter='name';reverse=!reverse">Name</th> 
     <th ng-click="sorter='city';reverse=!reverse">City</th> 
     <th ng-click="sorter='total_orders';reverse=!reverse">Total   Orders</th> 
     <th ng-click="sorter='date';reverse=!reverse">Date of last Order</th> 
    <tr ng-repeat="cust in customers |filter:CustomerFilter|orderBy:sorter:reverse"> 
     <td>{{ cust.CustomerID }}</td> 
     <td>{{ cust.name|uppercase }}</td> 
     <td>{{ cust.city |lowercase}}</td> 
     <td>{{ cust.total_orders|currency:'Rs' }}</td> 
     <td>{{ cust.date|date:'longDate' }}</td> 
     </tr> 
    </table> 
    <span> Total Customers:{{customers.length}}</span>

私はコントローラーは収まるには大きすぎるだろうbeacuaseので、私はここに貼り付けていないCustomerControllerと名付けています。

出典

2016-07-03 Bilal Alam

タイプミスが、私は何回かが、invainを私のURLをeiditedている資本

$routeProvider

出典

2017-01-13 12:25:43

URLエラーと思われます。 app.jsがAppフォルダ内にある場合は、app/app/viewsフォルダのレイアウトがない限り、URLに「App」は必要ありません。 app.jsあなたtemplateurlで

はただの見解/ customers.html "でなければなりません

また、あなたのindex.htmlを確認することができます。あなたはあなたのコントローラをアプリに持っていますか？または、スクリプトフォルダ内または類似した形式の中で？

出典

2016-07-03 00:33:41

のpを書くことを忘れてはいけない、私のコントローラはMyApp.jsが –

ええ、私のプロジェクトが設定されているのと同じファイル内にあります別の方法として、間違った道を私に導きます。ところで、あなたの誤植が$ routeproviderにあったと仮定すると、あなたのバグ追跡をスピードアップしていたであろうブラウザコンソール（ "Unknown provider：$ routeprovider"のような）にエラーメッセージが表示されるはずです。返信を返信するのではなく、自分の質問に回答を投稿してください。 –

はい、私の誤植は$ routeproviderでした。 –

1：OK、問題はあなたがur customer.htmlページでコントローラを持っていないことです。コントローラについてur部分的な表示をする必要があります。 Uは、以下のようなコントローラとdivタグの間にur全体のページを単純にラップすることができます。

<div controller="CustomerController> 
// ur data of customer.html page goes here 
</div>

2：このように設定を宣言すると、アプリを小さくしたときに問題は発生しません。

App.config(['$routeProvider', function($routeProvider) 
{ 
    // routerProvider goes here 
}]);

出典

2016-07-03 01:08:19 Wcan

まだ動作していません... –

コントローラをビューで参照する必要がある場合、最初にルートのコントローラを参照する理由は何ですか？ –

あなたがコンソールに入っているエラーは何ですか？ – Wcan

のでエラーは、コンソール上で発生したエラーは、「不明なプロバイダ：$のrouteprovider」だったの$ routeprovider上myApp.jsのタイプミスでした。修正されたバージョンは$ routeProviderです。大文字のP人を忘れないでください。

出典

2016-07-10 11:48:52

角度ルートが機能していません。

答えて

関連する問題