5
私はAngularJSをかなり新しくしており、次のページを持つ簡単なアプリケーションを構築しました。コンソールにエラーが報告されていない間にngRouteが動作していない
2のindex.html
1））View1.html
3）View2.html
View1をとVIEW2にアプリをルーティングしながら、私が直面してい問題があります。出力は表示されず、ブラウザも表示されません。いくつかの調査の後、Angularバージョン1.2以降では、個別の "angular-route.js"ファイルをインクルードする必要があるが、助けが必要であることに気付きました。あなたはこれを見て解決策を提供することができますか？
PS：私はAngularを初めて使っているので、私は少しの間違いをしてしまった場合、私に余裕を持てます。
ここに私のコードです。
index.htmlを
<html data-ng-app="demoApp">
<head>
<title>Using AngularJS Directives and Data Binding</title>
<meta charset="UTF-8">
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
</head>
<body>
<div>
<!--Placeholder for Views-->
<div data-ng-view=""></div>
</div>
<script>
var demoApp = angular.module('demoApp',['ngRoute']);
demoApp.config(function($routeProvider){
//demoApp.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/view1',{
controller: 'SimpleController',
templateurl: 'Partials/View1.html'
})
.when('/view2',{
controller: 'SimpleController',
templateurl: 'Partials/View1.html'
})
.otherwise({ redirectTo: '/view1'});
});
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{name:'John Smith', city:'Phoenix'},
{name:'John Doe', city:'New York'},
{name:'Jane Doe', city:'San Fancisco'}
];
$scope.addCustomer = function() {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
});
</script>
</body>
View1.html
<div class="container">
<h2>View 1</h2>
Name:
<br />
<input type="text" data-ng-model="filter.name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:filter.name | orderBy:city "> {{cust.name | uppercase}} - {{cust.city | lowercase }}</li>
</ul>
<br />
Customer Name:<br />
<input type="text" data-ng-model="newCustomer.name" />
<br />
Customer City:<br />
<input type="text" data-ng-model="newCustomer.city" />
<br /><br />
<button data-ng-click="addCustomer()">Add Customer</button>
<br /><br />
<a href="#/view2">View 2</a>
View2.html
<div class="container">
<h2>View 1</h2>
City:
<br />
<input type="text" data-ng-model="city" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:city | orderBy:name "> {{cust.name | uppercase}} - {{cust.city | lowercase }}</li>
</ul>
コンソールでエラーが発生していますか？ –
view2のルーティングは 'Partials/View1.html'にリダイレクトされます。 @Pankajパーカーが言ったようにコンソールをチェックしてください。何かがあれば教えてください – davidivad