Angular Basic - gpawade/gpawade.github.io GitHub Wiki

Introduction to angular JS framework.

Angular use MVC(model, view controller) pattern.

• Model - responsible for managing the data.
• View - responsible for displaying the data to user.
• Controller - control the interaction between model & view.

AngularJS directives are used to extend HTML. Below are some inbuild directive -

• ng-app - This directive starts an AngularJS Application.
• ng-init - this for initialize the application data.
• ng-model - define the model to be used. Bind the data to html input controller.
• ng-repeat - repeats html elements for each item in a collection.
• ng-bind - bind data to html tags.

Expressions are used to bind application data to html. Expressions are written inside double braces like {{ expression}}.

AngularJS supports modular approach.

// module declaration
var app = angular.module("myapp",[]);

// we can bootstap the module through javascript (instead of using *ng-app* directive).
angular.bootstrap(document.getElementById('elementid'), ['myapp']);

Control the flow of data in applicaiton.

<div ng-controller = "myController">
    {{msg}}
</div>

Javascript declaration of controller

app.controller("myController", MyController);

//Inject the dependency
MyController.$inject = ['$scope'];
function MyController($scope){
	$scope.msg = "welcome";
}

Filters are used to change modify the data and can be clubbed in expression or directives using pipe character.

Below are some inbuild directive.

• uppercase
• lowercase
• currency
• filter
• orderby

e.g.

<div>
	{{msg | lowercase}}

	<ul>
	  <li ng-repeat = "p in persons | filter: searchperson">
	     {{p.name }}
	  </li>
	</ul>
</div>

We can shared the data accross controller using services. Inbuild services are $http, $route, $location, etc.

We can create the services in two ways

• factory
• service

Using factory method, we first define a factory and then assign method to it. You will be provided with the value that is returned by invoking the function reference passed to module. Factory function return the value.

app.factory('myfactory',function(){
	var factory = {
		//code
	}
	return factory;	
});	

Using service method, we define a service and then assign method to it. We've also injected an already available service to it. You will be provided with an instance of the function.

app.service('myService',function($http){
	this.name = "";
	this.func = function(){

	};
});	

Value is simple javascript object and it is used to pass values to controller.

app.value('defaultSetting', 12);

When declaring the provider name, You will be provided with (new ProviderFunction()).$get().

app.provider('greet', function(){
   var msg;
   this.setMessage = function(message){
 	msg = message;
   };
   function MyClass(){
	this.greet = function(){
		return msg;
	}
   }
   this.$get = function(){
       return MyClass();
   };
});

//Then we can use it
angular.module('app', []).config(function(greetProvider) {
  greetProvider.setMessage('welcome');
});

function Controller(greet) {
  expect(greet.greet()).toEqual('welcome');
}