24. angularjs layout template( $routeProvider)

              Layout template\Master page for other content pages. generally layout/master page has Header,Footer, Leftmenu, rightmenu...it can be anything common to all other pages of application/project.

for our SPA application also required a layout file which is common to remains content pages which are(home,courses,students)...inside index/welcome page of the project. ---Style

now we will add this index.html for page to design header,leftmen, footer and content pages(home,courses,students) of the project

   once browse the index.html page, now we get below design page. now we will configure home,courses,students content pages out layout page using Angularjs $routeProvider.

using ng-Route module we will configure routes in index.html.

ng-Route : it is angular module which provides routing features, to provide routing functionality to our application we will inject this module while declare our application module itself.

.config() Method help us to configure our routes using $routeProvider object. as well define multiple chain controllers.  --add a script as RegisterRoutes.js

now add all reference to index.html page. every content(home,courses,students) has their own content.

now save and start page.

     when click on students page 

              

same page is updated with respective page content(without ng-include). so we called as Single Page Applications(SPA's) development.

another demo with Angularjs routing module (angularjs-route.min.js).