AngualarJs Development

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>

Model
View Controller
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

AngualarJs Development

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

AngualarJs Development

Загружено:

Авторское право:

Доступные форматы

Manmohan Singh

Internet Marketing Engg.

Вам также может понравиться