Angular Routing and Views Templating Tutorial

Angular Routing and Views Templating Tutorial

Today, We want to share with you Angular Routing and Views Templating Tutorial.
In this post we will show you AngularJS Routing and Templating Example, hear for Single Page Apps with AngularJS Routing and Templating we will give you demo and example for implement.
In this post, we will learn about AngularJS Routing and Views Tutorial with Example with an example.

AngularJS Apps-Goals

1st Goal : (SPA)Single page application (web application)
2nd Goal : No any page refresh or reload on page change routing
3rd Goal : Different type of all data on each page view

1st Way :
<div></div> 

2nd Way :
 

3rd Way :
<div class="ng-view"></div> 

ng-view usage Templating – Syntax

	
<div>
   ...
   <div></div>

</div>    

ng-template usage with Syntax

<div>
   ...
	
   
      <h2> Add SalesOrder </h2>
      {{textmessage}}
   

</div>    

Example of Angular views with route

index.html

   
   
      <title>Simple Example of Angular JS Views with demo</title>
      <a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js</a>
      <a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js</a>
   
   
   
      <h2>Example of <b> AngularJS </b> Sample Application</h2>
      <div>
         <p><a href="#addsalesorder">Add SalesOrder</a></p>
         <p><a href="#viewsalesorder">View SalesOrder</a></p>
         <div></div>
         
         
            <h2> Add SalesOrder </h2>
            {{texmessage}}
         
         
         
            <h2> View SalesOrder </h2>
            {{texmessage}}
         
      </div>
   

javaScript

	 var infinityknowApp = angular.module("infinityknowApp", ['ngRoute']);
	 infinityknowApp.config(['$routeProvider', function($routeProvider) {
		$routeProvider.
		
		when('/addsalesorder', {
		   templateUrl: 'addsalesorder.htm',
		   controller: 'addsalesorderController'
		}).
		
		when('/viewsalesorder', {
		   templateUrl: 'viewsalesorder.htm',
		   controller: 'viewsalesorderController'
		}).
		
		otherwise({
		   redirectTo: '/addsalesorder'
		});
	 }]);
	 
	 infinityknowApp.controller('addsalesorderController', function($scope) {
		$scope.texmessage = "SalesOrder page will be used to display content add salesorder form";
	 });
	 
	 infinityknowApp.controller('viewsalesorderController', function($scope) {
		$scope.texmessage = "SalesOrder page will be used to display all the salesorder";
	 });
		

We hope you get an idea about Angular Routing and Views Templating Tutorial
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.