AngularJS framework is used for making dynamics views in web applications.It makes the front end of web applications more expressive & readable.For more information you can visit AngularJS website.
You can also learn some basics from this site AngularJS Tutorial
In this post i m going to guide you about creating basic applications using AngularJS , which will help in understanding small details more clearly. Then we will create a little big application which involves server side code too.
First some basics
AngularJS is MVC framework for front end of web applications.
Data = Models
Web page = Views
Navigation = Controllers
Application 1 : Make an application that will show data on div as you type in input textbox.
It was that simple , but here are certain things that you need to note down.
ng : it stands for Angular , all the built in directives that are shipped with Angular starts with this prefix.
Example : ng-app , ng-model , ng-controller , ng-repeat , ng-source etc....
{{ }} : curle brackets are used in angular to display vaiable values , try using {{ 1 + 3 }}.
Application 2: Make an application that will show javascript object on html page using
Angular.JS
Pretty simple again , when you will run it , it will show all object details when page is loaded.
here ng-controller : directive , ProductController : controller , pdt : alias name of controller.
Module : where our application components live.
Application 3 : Show list of items that are in stock , along with purchase button.
ng-show / ng-hide : to show data according to boolean conditions
ng-repeat : loop through items
These are all in built directives that we are using , & you might be observing that they are quite useful , more you will get to know as the tutorial progress.
Application 4 : Make a full text search for items shown in web page.
In this code , we have made input box with model query , which is intantly available for filtering results in pdts.products. You can also have multiple filter criteria on this , like what if you want to sort results according to some fields.
Application 5: Use services in your AngularJS app.
You can also learn some basics from this site AngularJS Tutorial
In this post i m going to guide you about creating basic applications using AngularJS , which will help in understanding small details more clearly. Then we will create a little big application which involves server side code too.
First some basics
AngularJS is MVC framework for front end of web applications.
Data = Models
Web page = Views
Navigation = Controllers
Application 1 : Make an application that will show data on div as you type in input textbox.
It was that simple , but here are certain things that you need to note down.
ng : it stands for Angular , all the built in directives that are shipped with Angular starts with this prefix.
Example : ng-app , ng-model , ng-controller , ng-repeat , ng-source etc....
{{ }} : curle brackets are used in angular to display vaiable values , try using {{ 1 + 3 }}.
Application 2: Make an application that will show javascript object on html page using
Angular.JS
Pretty simple again , when you will run it , it will show all object details when page is loaded.
here ng-controller : directive , ProductController : controller , pdt : alias name of controller.
Module : where our application components live.
Notice that there are two parameters passed into the module method : The name of your module i.e 'store' and an empty array. In this example we’re not passing anything into the array, but we could pass in a list of strings that refer to other module names. Passing in other module names in that array allows your new module to inherit the controllers, services, etc. from those modules.
Application 3 : Show list of items that are in stock , along with purchase button.
ng-show / ng-hide : to show data according to boolean conditions
ng-repeat : loop through items
These are all in built directives that we are using , & you might be observing that they are quite useful , more you will get to know as the tutorial progress.
Application 4 : Make a full text search for items shown in web page.
In this code , we have made input box with model query , which is intantly available for filtering results in pdts.products. You can also have multiple filter criteria on this , like what if you want to sort results according to some fields.
Application 5: Use services in your AngularJS app.
