5
Sono abbastanza nuovo per AngularJS e ho creato una semplice app che sta avendo pagine seguenti.ngRoute non funziona mentre nessun errore è segnalato alla console
1) index.html
2) View1.html
3) View2.html
Il problema che sto affrontando è, mentre l'instradamento del l'applicazione per View1 e View2. Non viene visualizzato alcun output e il browser. Dopo alcune ricerche mi sono reso conto che da Angular versione 1.2 in poi, è necessario includere il file "angular-route.js" separato che ho fatto ma non ha aiutato. Puoi dare un'occhiata a questo e fornire una soluzione.
PS: Sono nuovo di Angular quindi risparmiami se ho commesso qualche piccolo errore.
Ecco il mio codice.
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>
si verifica un errore nella console? –
Il routing di view2 reindirizza a "Partials/View1.html", errore minore, immagino. Controlla la console come @Pankaj Parkar ha detto e dicci se c'è qualcosa lì – davidivad