AngularJS Fundamentals

History: The AngularJS framework started as a project inside of Google, but it’s now an open source project. Parent site

AngularJS is a client side technology use to create single page application. i.e. no postback or page navigation  like in from Abc.aspx to Xyz.aspx, rather than we create a single shell/master page to load other web pages.
AngularJS is a JavaScript framework which simplifies binding JavaScript objects with HTML UI elements.

# Directives are AngularJS command which change the behavior of our html page. All directive start with the word “ng”. As name suggest it directs Angular what to do.
Example: ng-app/ ng-model/ ng-repeat/ng-controller are some common directives.
  ng-show, ng- hide : For showing and hiding markup based on flag value.
  ng-include  : To get markup from different place. like ng-include = “detail.html”
We can also write our own custom Directive as open sourced(3rd party). like directive for google maps. ng is the global angular namespace.

# In AngularJS can have many modules but recommended to have only one main module. $rootScope parent object.

var Myapp= angular.module(“Myapp”,[]);
Empty JavaScript array: If later we need to pass some dependency/module we will pass it through like..
var Myapp= angular.module(“Myapp”,[‘serviceModule’]);

# Controller are simple JavaScript function which keeps the data and business logic. As name suggested they control how data flows from the server to HTML UI.
Can have many controllers.
Controller name should be start with capital letter and appended with controller at end.
Controller can be created by two ways one by passing scope object and other by controller by syntax.
Controller is java script constructor function. Should not have reference of the view.
Controller are attached to the HTML UI by using the “ng-controller” directive tag and the properties of the controller are attached by using “ng-model” directive.

# $scope : Common java script object. “$scope”  is an object instance of  a controller.
To create a data we need to create a property of scope object.
Server as a glue to view and controller. At the time of controller creation we pass $scope as input parameter.

# All $scope object inherit like prototype and can access root object(“$rootScope“) created in a web page. Angular parser first encounters the “ng-app” directive and creates the $rootScope object in memory.

# AngularJS create object/instance of controller constructor every time we use in a div/view.

# “$http” is service API  for making HTTP calls(GET/ POST) to the service of Angular.

# Angular Services(REST/Web API to interact with DB) are kind of singleton function/global instances created once per application.We can create services using Service(), factory(), Provider(),value() and constant() method.

# Filters: In angular we have inbuilt filters which allow us to format the data for presentation. Pipe the model value to filter. Basic format: expression | filterName:parameter
Some of common filters are..
date:  {{startDate | date:’short’}}
currency:  {{amount | currency:’USD$’}}

On array object
filter :         repo in repos | filter:searchterm
limitTo :     repo in repos | limitTo:10
orderBy:     repo in repos | filter:searchterm | orderBy:’name’

json:   {{repo | json}}  // for debugging Dumping the Json data.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s