Hi all,
Here is an example, how to use Routing.
We can use .config() to configure $routeProvider and in the same file we define two controllers firstController and SecondController. Usually these controllers holds a lot of logic but for example we just define a message property on $scope we use to display on view.
We used otherwise() to define a default route because if routeProvider don't get provided URL then it automatically redirect on default route. In this example if URL is wrong or not provided, it will redirect to /AddNewOrder.
HTML:-
<body ng-app="sampleApp">
<section>
<p class="links">
<a href="#AddNewOrder"> Add New Order </a>
<a href="#ShowOrders"> Show Order </a>
</p>
<div class="mainSection" ng-view></div>
<div class="list">
<ul>
<li>Hello</li>
</ul>
</div>
</section>
</body>
Controller :-
sampleApp.controller('firstController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('SecondController', function($scope) {
$scope.message = 'This is Show orders screen';
});
Routes :-
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'views/add_order.html',
controller: 'firstController'
}).
when('/ShowOrders', {
templateUrl: 'views/show_orders.html',
controller: 'SecondController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}]);
add_order.html
<h1>TWO PAGE</h1>
{{message}}
show_orders.html
<h1>SENDOND PAGE</h1>
{{message}}
0 Comment(s)