Tutorial on Angular js

            AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write.And it all happens within the browser, making it an ideal partner with any server technology.

 Angular js follows both Library and framework approaches.

The impedance mismatch between dynamic applications and static documents is often solved with:

library - a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit.

 E.g., jQuery.

frameworks - a particular implementation of a web application, where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific.

 E.g., durandal, ember, etc.

Angular takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs. Angular teaches the browser new syntax through a construct we call directives.

Advantages of AngularJS

• AngularJS provides capability to create Single Page Application in a very clean and maintainable way.
• AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience
• AngularJS code is unit testable.
• AngularJS uses dependency injection and make use of separation of concerns.
• AngularJS provides reusable components.
• With AngularJS, developer write less code and get more functionality.
• In AngularJS, views are pure html pages, and controllers written in javascript do the business processing.
• On top of everything, AngularJS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.

Disadvantages of AngulaJS

Though AngularJS comes with lots of plus points but same time we should consider the following points:
Not Secure : Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.
Not degradable: If your application user disables Javascript then user will just see the basic page and nothing more.

Three major parts Components in AngularJS framework

1. ng-app : This directive defines and links an AngularJS application to HTML.
2. ng-model : This directive binds the values of AngularJS application data to HTML input controls.
3. ng-bind : This directive binds the AngularJS Application data to HTML tags.

Typically, when you create an application you need to set up the initial state for the Angular $scope. You set up the initial state of a scope by attaching properties to the $scope object. The properties contain the view model (the model that will be presented by the view). All the$scope properties will be available to the template at the point in the DOM where the Controller is registered.

In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope.

When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be available as an injectable parameter to the Controller's constructor function as $scope.

 controllers used to:

• Set up the initial state of the $scope object.
• Add behavior to the $scope object.

we need to set up the initial state of a scope by attaching properties to the $scope object. The properties contain the view model (the model that will be presented by the view). All the$scope properties will be available to the template at the point in the DOM where the Controller is registered.

Controllers in angular:

       Implement controllers for each view as


               

routing in Angular js:

we have to inject 'ngroute' inbuilt service to use routing concept in our application by using dependency injection

then we need to mention routing as shown above for particular path

$routeprovider contains information of current path so when keyword is used to  check with current path if it matches our mentioned path then redirect to view which was mentioned as template url .

Tip:1) to know json format is correct or not go through this link http://pro.jsonlint.com/
2)for modal pop up in angular js http://jsfiddle.net/92z54z04/1/
http://stackoverflow.com/questions/27416044/simple-popup-by-using-angular-js


Related Links:

Date Picker in Angular js