Menu
I am fairly new to AngularJS and I built a simple app which is having following pages.
1) index.html
2) View1.html
3) View2.html
The problem I am facing is while routing the the app to View1 and View2. No output is displayed and the browser. After some reseach I realised that from Angular version 1.2 onwards, seperate "angular-route.js" file needs to be included which I did but got no help. Can you pls look into this and provide solution.
PS: I am new to Angular so pls spare me if I have made a any small mistakes.
Here is my code.
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>
864
The typo:
templateurl: 'Partials/View1.html'
should be
templateUrl: 'Partials/View1.html'
Angular is not going to load anything since no template is provided.
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
