AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios

Manmohan Singh
Internet Marketing Engg.
Miracle Studios

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>

<!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>

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

At a high level, directives are markers on a DOM element such as
 Attribute
 Element name
 Comment
 CSS Class
That tell AngularJS's HTML compiler to attach a specified
behavior to that DOM element or even transform the DOM
element and its sub elements.

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 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.

Many general purpose services provided by AngularJS
$http
Used for XMLHttpRequest handling
$location
Provide information about the current URL
$q
A promise/deferred module for asynchronous requests
$routeProvider
Configure routes in an SPA
$log
Logging service
Many more

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.

Below are the core objects and component of AngularJS
1. 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:
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"); } }
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:
myModule.provider("mySecondService", function() { var
provider = {}; provider.$get = function() { var service = {};
service.doService = function() { console.log("mySecondService:
Service Done!"); }
return service; }
return provider; });

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 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.

<!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 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 }}

<!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>

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

AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios

AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios

More Related Content

What's hot

Similar to AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios

More from Learnimtactics

Recently uploaded

AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios