Not able to redirect page using Angular Routing
Question
I am trying to learn Angular but stuck with the routing issue. I have tried looking at other questions but couldn't find an answer.
This is my index page
<!DOCTYPE html>
<html data-ng-app = 'myFirstApp'>
<head>
<title>View</title>
</head>
<body>
<div>
<div ng-view></div>
</div>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script>
var demoApp = angular.module('myFirstApp', ['ngRoute']);
demoApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/view1', {
templateUrl: 'demoPartials/view1.html',
controller: 'SimpleController'
})
.when('/view2', {
templateUrl: 'demoPartials/view2.html',
controller: 'SimpleController'
})
.otherwise({redirectTo: '/view1'});
}]);
demoApp.controller('SimpleController', function($scope){
$scope.customers = [
{name:'A F', city:'M'},
{name:'D D', city:'B'},
{name:'S J', city:'I'}
];
$scope.addCustomer = function(){
$scope.cutomers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
}
);
};
});
</script>
</body>
</html>
The issue of routing is that whenever I click the view2 link it doesn't route to the View2.html page. How should I fix it?
The View1 page
<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 }} - {{ cust.city }}
</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>
<button data-ng-click="addCustomer()">Add Cutomer</button>
<br>
<a href="#/view2.html">View 2</a>
</div>
And view 2 page
<div class="container">
<h2>View 2</h2>
City:
<br>
<input type="text" data-ng-model="city">
<br>
<ul>
<li data-ng-repeat="cust in customers | filter:city | orderBy:'city'">
{{ cust.name }} - {{ cust.city }}
</li>
</ul>
</div>
Do check at the images once.
normal view of page: https://s15.postimg.org/3jrg76nsb/image.png
after clicking view2: https://s7.postimg.org/7xazbqqij/image.png
2 answers
solution1
2 ACCPTED 2017-04-02 07:30:57
solution2
1 2017-04-02 07:28:34
更新href至路线名称
<a href="#/view2">View 2</a>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.