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


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




    var app = angular.module('app', ['ngRoute']);
    app.config(['$routeProvider',function($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=""></script>
     <script src=""></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

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: