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
    • 427
    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.


    <body ng-app="sampleApp">
        <p class="links">
            <a href="#AddNewOrder"> Add New Order </a>
            <a href="#ShowOrders"> Show Order </a>
        <div class="mainSection" ng-view></div>
        <div class="list">

    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', []);
    function($routeProvider) {
            when('/AddNewOrder', {
                templateUrl: 'views/add_order.html',
                controller: 'firstController'
            when('/ShowOrders', {
                templateUrl: 'views/show_orders.html',
                controller: 'SecondController'
                redirectTo: '/AddNewOrder'


    <h1>TWO PAGE</h1>


    <h1>SENDOND PAGE</h1>

 0 Comment(s)

Sign In

Sign up using

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: