Sharing Top Content from the Angular-sphere.

Single page web app using AngularJs

Single Page Web App Using #Angular.JS  #javascript #Programming #coding #webdevelopment

  • AngularJs provides ng-route and ng-view directive and by using them we can easily develop our single page web app.
  • In this tutorial i am going to show you how to develop simple one page web application using AngularJs.
  • We are building simple web app, we are consist of following files.
  • Single page web application is very intuitive and easy to use.
  • In this, web app used to load once and then only particular part of app keeps on changing without refreshing whole page which saves bandwidth as well as no loading of external files again and again such as Images or CSS files which in most of web app is static….

AngularJs provides ng-route and ng-view directive and by using them we can easily develop our single page web app. In this tutorial i am going to show you

AngularJs provides ng-route and ng-view directive and by using them we can easily develop our single page web app. In this tutorial i am going to show you how to develop simple one page web application using AngularJs.

ng-route manage routing of web application. By routing i mean when you click on link in ordinary web page you get redirected to target anchor link. By using ng-route we can handle those routes.

ng-view allow us to render different templates on particular view depending upon the router. For example, if user hits example.com/about then route will tell to load particular template for this route.

Our project:

We are building simple web app, we are consist of following files.

Here is how it works.

Before explanation let me show you the code. First have a look at index.html.

Here is our angular code. Responsible for handling routes and updating view.

If you have noticed $routeProvide here we are loading home and about HTML files into view. Let’s have a look on to them too.

The main code which does the magic is this.

Depending upon your templates and routes you can add more in it. As you see, when particular URL hits, we simply passing our file URL and Angular automatically Loads it into ng-view.

How to run the code:

Download file, serve it using…

Single page web app using AngularJs

Comments are closed, but trackbacks and pingbacks are open.