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

    • 0
    • 1
    • 0
    • 3
    • 0
    • 0
    • 0
    • 0
    • 189
    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:-

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

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: