Single page application with Angularjs Routing root provider and template viewNovember 24, 2015January 8, 2016admin
Single-page-application-with-Angularjs-Routing-root

Single page application with Angularjs Routing root provider and template view

Routers are the most promising feature in angularjs, to create single page applications (SPA) also it will give feasibility to create light weighted apps day by day this apps are becoming increasingly popular. In series of this tutorial you will learn how to create angularjs template with routers and controllers for multiple pages (views) with help of directives.

Advantages

  1. SPA –Single Page Application.
  2. No page refresh- if you want to go from home page to about us page, without page loading (refresh), page will land into about page.
  3. Different data on each page-every single page contains with different content.
  4. Page loading- this will saves the band width and saves the user time (light weighted app).

Introduction and usage

Let’s go to agenda. Here this post agenda is to create a Single Page Apps with AngularJS Routing and Templating, along with simple pages like, home, about us, services, contact pages. Will show you including code and brief explanation of each topic.

Angularjs routes enables you to land in different pages with different data depending on what route is called. And the routes is specified in the url(unique resource link) after the sign(#). The following application url contains the same, but each point has different routes.

Please take a look into this pictures, which gives an idea of routes, this helps you in dividing your application in logical views and bind different views to Controllers.

If you browse the any above links, angularjs application will loads and it located to index for example http://ustutorials.com/index.html, but in angularjs will look at the route which will come after the sign(#) and that will decide which html templete to show.

Demo of following angularjs application

Simple Application code

Here we have simple angularjs application code, Please Don’t panic by seeing this, we will see each part of the below code with examples and it all will be more clear in the below sections.

Html is basic views for the programming actions. In this below html code we have ng-app directive (ng-app directive called demo app) to read more about angularjs ng-app please read this.

Also we have couple of angularjs route #about, #services, # contact,  this will act according to user click(views).

HTML Angularjs routes code

HTML Angularjs ng-views

Angularjs views are the representers of the mapped templates which is called, in our case we have a div, which is containing with ng-view all views will show inside the div.

When you clicks on about button #about the respective page templates/about.html gets load in the views accordingly.

In index.html ng-app declared app name demoApp , this will point to angularjs module which is defined in myApp.js file.

Declaring and Single page application with Angularjs Routing root provider and template view

demoApp config method to define $routeProvide configuration, this is the main service while creating this kind of routes. And also we have two method one is when and otherwise inside the function. When the user clicks on the about button /about router respond, with templateUrl (template/about.html). And one more important thing is controller every view has controller, currently we are not using full controller features, just showing some content, but controller can do many things in large application that will cove in other section.

demoApp.config([‘$routeProvide ‘,

function($routeProvider) {

$routeProvider.

When (‘/about ‘, {

templateUrl: ‘templates/about.html‘,

controller: ‘AboutController

}).

When(‘/services’, {

templateUrl: ‘templates/services.html‘,

controller: ‘ServicesController

}).

otherwise({

redirectTo: ‘/about’

});

}]);demoApp.controller(‘AboutController‘, function($scope) {

$scope.message = ‘Route number1 and page name about.html';

});

demoApp.controller(‘ServicesController‘, function($scope) {

$scope.message = ‘Route number 2 and page name services.html';

});

HTML pages

Single-page-application-with-Angularjs-Routing-rootWe have 4 html pages including index, below is the list of pages. Which is carrying the message angularjs expression {{message}}.

Conclusion

The main aim of the post is you to understand some fundamentals of angularjs routes, and templating and views.

We have used views for showing the content and templates for pages routes to route app.