Angular JS is new JavaScript library. Angular extends HTML with new attributes and makes it more responsive and efficient to user actions. It is mainly used for single page web application.

Angular JS - by Google

Official Website: angularjs.org

In this post and some upcoming post i am going to cover some basic and important topics of Angular JS to help you to create your web application more User Friendly and Fast. Now in this post i explain some basics of Angular and show some example to help you understand.

Some features of Angular JS i like

  • It make your HTML tag Dynamic.
  • Angular provide data binding.
  • It is very easy to use and implement on application
  • It speed up your application and help you to make better interface
  • It is now officially supported by Google
  • If you familiar with Javascript and jQuery then it is very easy to start.
  • And lots more other feature  like: send and receive data from server, it follow MVC etc..

Angular JS is very easy to implement in your project. You need to add angular script in your HTML code like this

Angular JS extends HTML with ng-directives. Here are some common directives which we use in our app

  • ng-app – defines an AngularJS application
  • ng-model –  binds the value of HTML controls (input, select, textarea) to application data.
  • ng-controller –  defines a controller
  • ng-bind – bind data in html
  • ng-init – initialize application variables.

First Example:

In above code i create my first app. ng-app (defines once in whole app), after that i add ng-model in input field to get user inserted data as per definition, ng-bind is used to get data from model and set in html.

{{ expression }} : is also used to bind data in html as shown bellow example. You also perform

Variable in Angular JS

ng-init: is used to declare variable, init automatically initialize variable as shown in below example

If you want to add another variable in you need to add semi colum(;) and continue

Angular JS Object

Angular also support object like javascript

Angular Array

Array are very easy to declare in Angular, it as same as in javascript or jQuery

Example:

Angular JS Repeat

Angular ng-repeat is used to create dynamic data eg. dynamically genarate list, order list etc.

I continue post my new post about Angular JS, stay tune to learn.

🙂