AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios

Miracle Studios – Web Design & Development Company

Manmohan SinghInternet Marketing Engg.Miracle Studios

AngularJs – JavaScript MVW Framework

AngularJS is a superheroic JavaScript MVW framework. It can be added to an HTML page with a <script> tag. It extends HTML attributes with Directives, and binds data to HTML with Expressions.

<script

src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

AngularJs Example <!DOCTYPE html> <html> <body>

<div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body> </html>

The MVC of AngularJS

Model

ViewController

Key Features of AngularJs Extends HTML with directives Model View Controller architecture Dependency injections Declarative two way data binding Build with testing in mind Dynamic templates

Directives of AngularJS At a high level, directives are markers on a DOM element such as Attribute Element name Comment CSS ClassThat tell AngularJS's HTML compiler to attach a specified

behavior to that DOM element or even transform the DOM element and its sub elements.

Example of Directives AngularJS

myapp = angular.module("myapp", []); myapp.directive('div', function() { var directive = {}; directive.restrict = 'E'; /* restrict this directive to elements */ directive.template = "My first directive: {{textToInsert}}"; return directive; });

AngularJS Controllers AngularJS applications are controlled by controllers. The ng-controller directive defines the

application controller. A controller is a JavaScript Object, created by a standard JavaScript object.

<div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="person.firstName"><br>Last Name: <input type="text" ng-model="person.lastName"><br><br>Full Name: {{person.firstName + " " + person.lastName}}

</div>

<script>function personController($scope) { $scope.person = { firstName: "John", lastName: "Doe" };}</script> ct constructor.

Standard ServicesMany general purpose services provided by AngularJS

$httpUsed for XMLHttpRequest handling$locationProvide information about the current URL$qA promise/deferred module for asynchronous requests$routeProviderConfigure routes in an SPA$logLogging serviceMany more

AngularJS Modularization & Dependency Injection

AngularJS is built-in dependency injection mechanism. You can divide your application into multiple different types of components which AngularJS can inject into each other.

Modularizing your application makes it easier to reuse, configure and test the components in your application.

Core types of AngularJs objects and components

Below are the core objects and component of AngularJS1. Value : A value in AngularJS is a simple object. It can be a number,

string or JavaScript object. Example:var myModule = angular.module("myModule", []); myModule.value("numberValue", 999); myModule.value("stringValue", "abc"); myModule.value("objectValue", { val1 : 123, val2 : "abc"} );


2. Factory: Factory is a function that creates values. When a service, controller etc. needs a value injected from a factory, the factory creates the value on demand. Once created, the value is reused for all services, controllers etc. which need it injected. Example: var myModule = angular.module("myModule", []); myModule.factory("myFactory", function() { return "a value"; }); myModule.controller("MyController", function($scope, myFactory)

{ console.log(myFactory); });


3. Service:A service in AngularJS is a singleton JavaScript object which

contains a set of functions. The functions contain whatever logic is necessary for the service to carry out its work.

Example:function MyService() { this.doIt = function() { console.log("done"); } } var myModule = angular.module("myModule", []);

myModule.service("myService", MyService);


4. Providers Providers in AngularJS is the most flexible form of factory you

can create. You register a provider with a module just like you do with a service or factory, except you use the provider() function instead.

Example: var myModule = angular.module("myModule", []);

myModule.provider("mySecondService", function() { var provider = {}; provider.$get = function() { var service = {}; service.doService = function() { console.log("mySecondService: Service Done!"); }

return service; } return provider; });

Configuring a Providervar myModule = angular.module("myModule", []); myModule.provider("mySecondService", function() { var provider = {}; var config = { configParam : "default" }; provider.doConfig = function(configParam) { config.configParam = configParam; } provider.$get = function() { var service = {}; service.doService = function()

{ console.log("mySecondService: " + config.configParam); } return service; } return provider; }); myModule.config( function( mySecondServiceProvider )

{ mySecondServiceProvider.doConfig("new config param");

}); myModule.controller("MyController", function($scope, mySecondService) { $scope.whenButtonClicked = function() { mySecondService.doIt();

} });

AngularJS Routes

AngularJS routes enable you to create different URLs for different content in your application.

Having different sets of URLs for different content enables the user to bookmark URLs to specific content, and send those URLs to friends etc. So such bookmarkable URL in AngularJS is called a route.

AngularJS Routes Example<!DOCTYPE html> <html lang="en"> <head> <title>AngularJS Routes example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script> </head> <body ng-app="sampleApp"> <a href="#/route1">Route 1</a><br/> <a href="#/route2">Route 2</a><br/> <div ng-view></div> <script> var module = angular.module("sampleApp", ['ngRoute']); module.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/route1', { templateUrl: 'angular-route-template-1.jsp', controller: 'RouteController' }). when('/route2', { templateUrl: 'angular-route-template-2.jsp', controller: 'RouteController' }). otherwise({ redirectTo: '/' }); }]); module.controller("RouteController", function($scope) { }) </script>

AngularJS Internationalization AngularJS has built-in support for internationalization of

numbers and dates. In this text I will take a look at how they work.

Internationalization in Filters {{ theDate | date: 'fullDate' }} {{ theValue | currency }} {{ theValue | number }}

AngularJS Internationalization Example<!DOCTYPE html> <html lang="en"> <head> <title>AngularJS Routes example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> <script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script> </head> <body ng-app="myapp"> AngularJS I18n <div ng-controller="mycontroller"> {{theDate | date : "fullDate"}} <br/> {{theValue | currency }} </div> <script> var module = angular.module("myapp", []); module.controller("mycontroller", function($scope) { $scope.theDate = new Date(); $scope.theValue = 123.45; }); </script> </body> </html>

Hire AngularJs Developers

Miracle Studios Pvt. Ltd.Tower D, Third Floor,DLF Building, IT Park,Chandigarh, India, 160101.

Toll Free : +91-172-5022070-99 Fax: +91-172-4665392 Website:

www.miraclestudios.in/angular-js-development-india.htm

http://www.miraclestudios.in/angular-js-development-india.htm

Thank you For Visiting Us

AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios

Services

Transcript of AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios