AngularJs is next big thing. Have a read for making strong your skills in AngularJs. We are sharing with you basic model of angularjs, How it is work and what are his basics. Enjoy the information.
2. 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>
5. Extends HTML with directives
Model View Controller architecture
Dependency injections
Declarative two way data binding
Build with testing in mind
Dynamic templates
6. 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.
7. 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;
});
8. 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.
9. 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
10. 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.
11. 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"} );
12. 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); });
13. 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);
14. 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; });
16. 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.
18. 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 }}