AngularJS Basics


Published on

Angularjs is a javascript framework, built on html5,

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

AngularJS Basics

  1. 1. AngularJS What Is AngularJS ? client-side technology, written entirely in JavaScript. It works with the long-established technologies of the web (HTML, CSS, and JavaScript) to make the development of web apps easier and faster than ever before. It is a framework that is primarily used to build single-page web applications (refer this : The AngularJS team describes it as a "structural framework for dynamic web apps." How Is It different? In other JavaScript frameworks, we are forced to extend from custom JavaScript objects and manipulate the DOM from the outside in. For instance, using jQuery, to add a button in the DOM, we’ll have to know where we’re putting the element and insert it in the appropriate place: var btn = $("<button>Hi</button>"); btn.on('click', function(evt) { console.log("Clicked button") }); $("#checkoutHolder").append(btn); Although this process is not complex, it requires the developer to have knowledge of the entire DOM and force our complex logic inside JavaScript code to manipulate a foreign DOM. AngularJS, on the other hand, augments HTML to give it native Model-View-Controller (MVC) capabilities. This choice, as it turns out, makes building impressive and expressive client-side applications quick and enjoyable.
  2. 2. License: The AngularJS source code is made freely available on Github( under the MIT license. Your First AngularJS Web Application : Let's Do "Hello World" :) <!DOCTYPE html> <html ng-app> <head> <title>Simple app</title> <script src=""></script> </head> <body> <input ng-model="name" type="text" placeholder="Your name"> <h1>Hello {{ name }}</h1> </body> </html> Try here: Introducing Data Binding in AngularJS : In classic web frameworks,such as Rails,the controller combines data from models and mashes them together with templates to deliver a view to the user. This combination produces a single-way view. Without building any custom JavaScript components, the view will only reflect the data the model exposes at the time of
  3. 3. the view rendering. At the time of this writing, there are several JavaScript frameworks that promise automatic data binding of the view and the model. AngularJS takes a different approach. Instead of merging data into a template and replacing a DOM element, AngularJS creates live templates as a view. Individual components of the views are dynamically interpolated live. This feature is arguably one of the most important in AngularJS and allows us to write the "hello world" app we just wrote in only 10 lines of code without a single line of JavaScript. This feature works by simply including angular.js in our HTML and explicitly setting the ng-app attribute on an element in the DOM. The ng-app attribute declares that everything inside of it belongs to this Angular app; that’s how we can nest an Angular app inside of a web app. The only components that will be affected by Angular are the DOM elements that we declare inside of the one with the "ng-app" attribute. To declare our above example inside of a controller, we’ll change the HTML to look like: <div ng-controller='MyController'> <input ng-model="name" type="text" placeholder="Your name"> <h1>Hello {{ name }}, <br />Time is : {{clock}}</h1> </div> In this example, we’ll create a clock that will tick every second (as clocks usually do) and change the data on the clock variable: Controller: function MyController($scope) { var updateClock = function() { $scope.clock =new Date(); }; setInterval( function() { $scope.$apply(updateClock);
  4. 4. },1000); updateClock(); }; Live Demo : Modules : In JavaScript, placing functional code in the global namespace is rarely a good idea. It can cause collisions that are tough to debug and cost us precious development time. When looking at data binding in the previous chapter, we wrote our controllers in the global namespace by defining a single function: function MyController($scope) { var updateClock = function() { $scope.clock = new Date(); }; setInterval(function() { $scope.$apply(updateClock); },1000); updateClock(); } Lets talk about how to write efficient, production-ready controllers by encapsulating our functionality in a single core unit called a module. In Angular, a module is the main way to define an AngularJS app. The module of an app is where we’ll contain all of our application code. An app can contain several modules, each one containing
  5. 5. code that pertains to specific functionality. Using modules gives us a lot of advantages, such as: • Keeping our global namespace clean • Making tests easier to write and keeping them clean so as to more easily target isolated functionality • Making it easy to share code between applications • Allowing our app to load different parts of the code in any order. The Angular module API allows us to declare a module using the angular.module(string, [arrayofstrings]) API method. Properties Angular modules have properties that we can use to inspect the module. name(string) The name property on the modules gives us the name of the module as a string. requires(array of strings) The requires property contains a list of modules (as strings) that the injector loads before the module itself is loaded. Scopes ($scope) Scopes are a core fundamental of any Angular app. They are used all over the framework, so it’s important to know them and how they work. The scopes of the application refer to the application model. Scopes are the execution context for expressions. The $scope object is where we define the business functinality of the application, the methods in our controllers, and properties in the views. Scopes serve as the glue between the controller and the view. Just before our app renders the view to the user, the view template links to the scope, and the app sets up the DOM to notify Angular for property changes.
  6. 6. Scopes are the source of truth for the application state. Because of this live binding, we can rely on the $scope to update immediately when the view modifies it, and we can rely on the view to update when the $scope changes. $scopes in AngularJS are arranged in a hierarchical structure that mimics the DOM and thus are nestable: We can reference properties on parent $scopes. What Can Scopes Do? Scopes have the following basic functions: • They provide observers to watch for model changes •They provide the ability to propagate model changes through the application as well as outside the system to other components •They can be nested such that they can isolate functionality and model properties •They provide an execution environment in which expressions are evaluated. The majority of the work we’ll do in developing our Angular app is building out the functionality of a scope. Filters In AngularJS, a filter provides a way to format the data we display to the user. Angular gives us several built-in filters as well as an easy way to create our own. We invoke filters in our HTML with the "|" (pipe) character inside the template binding characters {{}}. For instance, let’s say we want to capitalize our string. We can either change all the characters in a string to be capitalized, or we can use a filter. {{ name | uppercase }} We can also use filters from within JavaScript by using the $filter service. For instance, to use the lowercase JavaScript filter: app.controller('DemoController', ['$scope','$filter',function($scope, $filter) { $ =$filter('lowercase')('Ari');
  7. 7. }]); currency The currency filter formats a number as currency. In other words, 123 as currency looks like: {{ 123 | currency }}. can use like currency :'$' Currency gives us the option of displaying a currency symbol or identifier. date The date filter allows us to format a date based upon a requested format style. The date formatter provides us several built-in options. If no date format is passed, then it defaults to showing mediumDate (as you can see below). {{ today | date:'medium' }} <!--Aug 09, 2013 12:09:02 PM--> {{ today | date:'short' }} <!--8/9/13 12:09 PM--> {{ today | date:'fullDate' }} <!--Thursday, August 09, 2013--> {{ today | date:'longDate' }} <!--August 09, 2013--> {{ today | date:'mediumDate' }} <!--Aug 09, 2013--> {{ today | date:'shortDate' }} <!--8/9/13--> {{ today | date:'mediumTime' }} <!--12:09:02 PM--> {{ today | date:'shortTime' }} <!--12:09 PM--> Year Formatting Four-digit year: {{ today | date:'yyyy' }} <!--2013--> Two-digit padded year: {{ today | date:'yy' }} <!--13--> One-digit year: {{ today | date:'y' }} <!--2013--> And Many More. The filter filter selects a subset of items from an array of items and returns a new array. This filter is generally used as a way to filter out items for display. For instance, when using client-side searching, we can filter out items from an array immediately. The filter method takes a string, object, or function that it will run to select or reject
  8. 8. array elements. If the first parameter passed in is a: Live Demo : Introduction to Directives : Any attribute that starts with "ng-" is a directive. Use it as "ng-" when usinh in views. ex: • ngRepeat (enter, leave and move animations) use it as ng-repeat • ngInclude (enter and leave animations) use it as ng-include • ngView (enter and leave animations) use it as ng-view • ngIf (enter and leave animations) use it as ng-if • ngSwitch (enter and leave animations) use it as ng-switch • ngClass (addClass and removeClass animations) use it as ng-class • ngShow and ngHide (addClass and removeClass animations for .ng-hide).use it as ng-show, ng-hide. Our First Directive We use directives to extend the html5. <my-directive></my-directive> Directive: angular.module('myApp', []) .directive('myDirective',function() { return{
  9. 9. restrict:'E', template:'<a href="">Click me to go to Google</a>' } }); So here is the result: And when you see the source :
  10. 10. Table 6-2. Directive definition options restrict : Declare how directive can be used in a template as an element, attribute, class, comment, or any combination. priority : Set the order of execution in the template relative to other directives on the element. template : Specify an inline template as a string. Not used if you’re specifying your template as a URL. templateUrl : Specify the template to be loaded by URL. This is not used if you’ve specified an inline template as a string. replace : If true, replace the current element. If false or unspecified, append this directive to the current element. transclude : Lets you move the original children of a directive to a location inside the new template. scope : Create a new scope for this directive rather than inheriting the parent scope.
  11. 11. controller : Create a controller which publishes an API for communicating across directives. require : Require that another directive be present for this directive to function correctly. link : Programmatically modify resulting DOM element instances, add event listeners, and set up data binding. compile : Programmatically modify the DOM template for features across copies of a directive, as when used in ng-repeat. Your compile function can also return link functions to modify the resulting element instances. For more on AngularJs, Explore the site and can find many tutorials and blogs. Have a support in stackoverflow: