Post on 22-Nov-2014
description
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"} );
Core types of AngularJs objects and components
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); });
Core types of AngularJs objects and components
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);
Core types of AngularJs objects and components
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
Thank you For Visiting Us