Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Routing in AngularJS

    @mukul.kant
    Recommendations Offline Message

    • 0
    • 1
    • 0
    • 3
    • 0
    • 0
    • 0
    • 0
    • 492
    Comment on it

    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:-

    1. <body ng-app="sampleApp">
    2. <section>
    3.     <p class="links">
    4.         <a href="#AddNewOrder"> Add New Order </a>
    5.         <a href="#ShowOrders"> Show Order </a>
    6.     </p>    
    7.     <div class="mainSection" ng-view></div>
    8.  
    9.     <div class="list">
    10.         <ul>
    11.             <li>Hello</li>
    12.         </ul>
    13.     </div>
    14.  
    15. </section>
    16. </body>

    Controller :-

    1. sampleApp.controller('firstController', function($scope) {
    2.     $scope.message = 'This is Add new order screen';
    3.  
    4. });
    5.  
    6. sampleApp.controller('SecondController', function($scope) {
    7.     $scope.message = 'This is Show orders screen';
    8. });

    Routes :-

    1. var sampleApp = angular.module('sampleApp', []);
    2. sampleApp.config(['$routeProvider',
    3. function($routeProvider) {
    4.     $routeProvider.
    5.         when('/AddNewOrder', {
    6.             templateUrl: 'views/add_order.html',
    7.             controller: 'firstController'
    8.         }).
    9.         when('/ShowOrders', {
    10.             templateUrl: 'views/show_orders.html',
    11.             controller: 'SecondController'
    12.         }).
    13.         otherwise({
    14.             redirectTo: '/AddNewOrder'
    15.     });
    16. }]);

    add_order.html

    1. <h1>TWO PAGE</h1>
    2. {{message}}

    show_orders.html

    1. <h1>SENDOND PAGE</h1>
    2. {{message}}
    routes routeProvider angular.js angular Directives in AngularJS script Javascript HTML5
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: