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

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 350
    Comment on it

    AngularJs is basically used for the single page application with multiple views.

    For this we will be using ng-view directive and certain code of AngularJS to make it possible for you to make multiple view.

    Here is a code:

    HTML:

    <body ng-app="app">
      <ul>
        <li><a href="#/firstPage">First page</a></li>
        <li><a href="#/secondPage">Second page</a></li>
        <li><a href="#/thirdPage">Third page</a></li>
      </ul>
      <div ng-view></div ng-view>
    </body>

     

     

    Script:

    
    var app = angular.module('app', ['ngRoute']);
    
    app.config(['$routeProvider',function($routeProvider) {
    
     $routeProvider.
    
      when('/' , {
    
        templateUrl: 'templates/welcome.html',
        controller: 'first'
      }).
      when('/firstPage' , {
        templateUrl: 'templates/firstPage.html',
        controller: 'first'
      }).
      when('/secondPage' , {
        templateUrl: 'templates/secondPage.html',
        controller: 'second'
      }).
      when('/thirdPage' , {
        templateUrl: 'templates/thirdPage.html',
        controller: 'third'
      });;
       
     
    }]);

     

     

    These are the two script to add inside the head tag:

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>

     

    Then finally we have to create a folder with templates name and add 3 HTML file naming:

    • firstPage.html
    • secondPage.html
    • thirdPage.html

     

    This is how we can make multiple views in our SPA.

    You can also download the demo attached. Hope this will help you.

 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: