Angular Page Routing

Page routing is one of the Main concepts in angular js when you decide to create a complete app.

One of the interesting capabilities of  Single Page APP like Angular js is the ability to Fetch the  portions dynamically of a page without making a full page refresh. At the same time which allows you have to different html structure.

Angular accomplishes this using the “$routeProvider” service.  Using the route provider service you can provide the path for the page as well as the corresponding template for it.

 

First thing we have to define our Angular APP using  ng-app directive.

1. Here my app  name is “myApp”. It should be anything( just a name for your app)

2. ng-view is an angular directive where the dynamic content will be fetched based on the page routing and it will be displayed inside that HTML snippet.

<div ng-app=”myApp”><div ng-view></div></div> 

 Next we define the module using the angular.module construct as follows… make sure this code is referenced as a java script file.
angular.module('myApp', [])// defining my module here
    .config(function ($routeProvider) {
        $routeProvider
        .when('/', {template: '<div>This is the default Home Page</div>'})// first page path
        .when('/about', {templateURL: '/partials/about.html'})// second page path
});

You can either insert template code directly as using the template property as with the first .when chain for the $routeProvider, or you can reference an html file using the templateURLproperty, as we do in the second example that links to the /partials/about.html file.

As it was a single page APP, so we should have only one Master HTML template (index.html)

To test the Page Routing, create links in the index.html above/below the “ng-view” html structure but inside “ng-app” structure.

<div ng-app=”myApp”>
<a href=”/”>Home</a><a href=”/about”>About</a>
<div ng-view></div>
</div>

Now click on the link and it will shows the corresponding templates based on the page routing we provided in the js File.

Try it out here  “http://campus.codeschool.com/courses/shaping-up-with-angular-js&#8221;

 

Advertisements
Tagged with: , , , , ,
Posted in Angularjs, web

GIT Cheat sheet

 

Tagged with: , , ,
Posted in web

AMMA AMMA…( VIP SONG LYRICS)

Amma Amma Nee Enga Amma
Unna Vitta Enakku Yaaru Amma
Thedi Paarthaene Kaanom Unna
Kannambochiyae Vaa Nee Vella
Thaaye Uyir Pirinthaaye
Enna Thaniye Thavikka Vittayae
Indru Nee Paadum Pattukku Naan Thoongavenum
Naan Paadum Pattukku Thaaye Nee
Un Kangal Tharanthaale Pothum

Amma Amma Nee Enga Amma
Unna Vitta Enakku Yaaru Amma

Naan Thoongum Munnae Nee Thoongi Ponaai
Thaaye Enmael Unakenna Kobam
Kannana Kanne En Deiva Penne
Kannil Thoosi Nee Ootha Vendum
Aiyo Aen Intha Saabam
Ellam Endro Naan Seitha Paavam
Pagalum Iravaagi Bayamaanathey Amma
Vilakin Thunai Indri Irulaanathey
Uyirin Oru Paathi Pariponathey Amma
Thanimai Nilayaanathey

Amma Amma Nee Enga Amma
Unna Vitta Ènakku Yaaru Amma

Naan Pøna Pinnum Nee Vaazha Vendum
Ènthan Møøchu Unakkulum Undu
Vaan Èngum Vannam Pøøvellam Vaasam
Naan Vaazhum Ulagil Deivangal Undu
Iraivan Perumaiyin Èllai
Unthan Kangal Per Šøllum Pillai
Oørum Perithillai Kalangaathey Èn Kanne
Ulagam Vilayada Unn Munne
Kaalam Karainthødum Un Vaazhvil Thunai Šerum
Meendum Naan Un Pillai

Amma Amma Nee Ènga Amma
Unna Vitta Ènakku Yaaru Amma

Ènga Pønaalum Naanum Varuven
Kannadi Paaru Naanum Therivaen
Thaaye Uyir Pirinthaaye
Kanne Neeyø Èn Uyir Thaane
Indru Nee Paadum Pattukku Naan Thøøngavenum
Naa Paadum Thaalaatu
Nee Thøønga Kaathøram Èndendrum Ketkum

Tagged with: , , , ,
Posted in Others, Song Lyrics
%d bloggers like this: