angularjs logo

AngularJS Routing Example

In this article we will be developing a simple app using AngularJS. We will use AngularJS Routing for a single page app. Actually, app will be composed of two different templates/pages and a home/index page but single page app means that we will be loading these two pages without page refresh.

Index.html

This is the index page of our app with navigation and ng-view directive. This is the section of page where content of other pages will be inserted without page reloading with the help of AngularJS Routing.

Angular App

Now after HTML of index page, lets create our application. The code of app.js file(mentioned in index.html page) is as under.

As you can see that both controllers (addUserCtrl and showUserCtrl) are empty yet. We will use them later(in upcoming article) for sending data to their respective template. Above controllers, we have configured routes( /showusers and /addnewuser). We have set both, templateUrl and controller for each route. Right now we are missing template files so lets create both of them(show_users.html and add_user.html).

Template files

show_users.html

add_user.html

I opened the main page of app using localhost/angularpractice. Use the correct URL according to your root folder name. It will show showusers page because of configuration that we did for routing. Click on the nav buttons and it should work like single page app but changing the content according to template pages.

According to route configuration, both add_user.html and show_users.html should be placed within templates folder. Make sure that you have template folder within root folder.

Note

Don’t forget to include required files. You can get the files from URLs mentioned next to files.

  1. angular.min.js Download from here
  2. angular-route.js Download from here

In upcoming article we will be creating a simple form in add_user.html and sending data to addUserCtrl.

 

  • http://www.topnotchdev.com Top Notch Developer

    (y) it was really helpful … please do write more about angular ….

    • http://codeschunks.com Muhammad Zeeshan

      Thanks for the feedback. Sure, more articles will be available soon