Go to Comments

Simple angularjs application example

Created: 15/03/2017 08:29:16 a.m.

Simple angularjs application example

Before watch this tutorial i recommend you to make this short course in AngularJs to have some basic notions of what is all about.


I used only notepad++ and xamp to create this tutorial.

1) First create our basic web app structure

- Books

--> index.html

- Music

--> index.html

angular-rout.js (Download the full project at the end of this tutorial and you can get this library.)

index.html (our main file)

2) This is how our main index.html looks like. Just include the libraries.

3) Now create the main structure of the application basically we have 2 menu buttons, each one will load the indicated template.

4) In this step we add a Controller to our Books Route and printed all the array of our books in the books/index.html file as we can see in the picture.

5) We do the same for the music.

6) Create custom directive for the menu so we can pull it out from the main index, and place it to separeted folder (menu/index.html), after that just add the element to the body.

7) Finally just to add some more functionality, create GlobalController just to set the page title using the $scope.

Download the project