Your SlideShare is downloading. ×
What is angular.js
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What is angular.js


Published on

What is Angular.js? …

What is Angular.js?

Angular.js is a JavaScript Framework created and maintained by Google. It is mostly used to build single page apps (SPAs). Angular follows the model-view-controller (MVC) design pattern

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. What is Angular.js?
  • 2. Angular.js is a JavaScript Framework created and maintained by Google. It is mostly used to build single page apps (SPAs). Angular follows the modelview-controller (MVC) design pattern
  • 3.  Extends the HTML vocabulary adding dynamic elements to web pages  Relatively easy to learn  Very human readable  Fast applications  Extendable and easy to scale  Two way data binding  Works well with Node, Backbone and MongoDB (MEAN Stack)  Server communication
  • 4. The synchronization of the model data and the view components. This lets you treat the model as the single-source-of-truth in your application. The view is always a projection of the model. When the model changes, the view reflects the change, and vice versa. Most data binding systems only run in one direction
  • 5.   A Controller is a JavaScript constructor function that is used to augment the scope When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object function GreetingController($scope) { $scope.greeting = 'Hello World'; }
  • 6. <html ng-app=“greetApp"> <head> <script src="lib/angular/angular.js"></script> <script src="js/controllers.js"></script> </head> <body> <div ng-controller="GreetingController"> {{ greeting }} </div> </body> </html>
  • 7. Expressions are JavaScript-like code snippets that are usually placed in bindings such as{{ expression }}. <body> 1+2={{1+2}} </body> <head> {{title}} </head>
  • 8.   Modules declaratively specify how an application should be bootstrapped One good practice is to split up your app into multiple modules. You can have a module for Controllers  Services  Directives  Filters 
  • 9. //Module Declaration var myAppModule = angular.module('myApp', []); //Configuration myAppModule.filter('greet', function() { return function(name) { return 'Hello, ' + name + '!'; }; }); //In the html template <html ng-app="myApp">
  • 10. Markers on a DOM element which tells Angular’s HTML compiler to attach a specified behavior to that DOM element or even transform the DOM element and its children. <!doctype html> <ng-app=“myApp"> <head> <script src=""></script> <script src="script.js"></script> </head> <body> <div ng-controller=“CustomerController"> <div my-customer></div> </div> </body> </html>
  • 11.  A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter. <div ng-controller="Ctrl"> <input ng-model="greeting" type="greeting"><br> No filter: {{greeting}}<br> Reverse: {{greeting|reverse}}<br> Reverse + uppercase: {{greeting|reverse:true}}<br> </div>
  • 12. angular.module('MyReverseModule', []). filter('reverse', function() { return function(input, uppercase) { var out = ""; for (var i = 0; i < input.length; i++) { out = input.charAt(i) + out; } // conditional based on optional argument if (uppercase) { out = out.toUpperCase(); } return out; } }); function Ctrl($scope) { $scope.greeting = 'hello'; }
  • 13. Angular services are singletons objects or functions that carry out specific tasks common to web apps. Angular has a number of built in services, such as the $http service, which provides access to the browser's XMLHttpRequestobject for making requests to a server To use an Angular service, you identify it as a dependency for the that depends on the service var MyController = function($location) { ... }; MyController.$inject = ['$location']; myModule.controller('MyController', MyController);
  • 14. //Declare the module var myModule = angular.module('myModule', []); myModule.factory('serviceId', function() { var myServiceInstance; return myServiceInstance; });
  • 15. Concept Description Template HTML with additional markup Directives extend HTML with custom attributes and elements Model the data that is shown to the user and with which the user interacts Scope context where the model is stored so that controllers, directives and expressions can access it Expressions access variables and functions from the scope Compiler parses the template and instantiates directives and expressions Filter formats the value of an expression for display to the user View what the user sees (the DOM) Data Binding sync data between the model and the view Controller the business logic behind views Dependency Injection Creates and wires objects / functions Injector dependency injection container Module configures the Injector Service reusable business logic independent of views
  • 16. THAT’S IT!