Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
One Weekend With AngularJS
One Weekend With AngularJS
Wird geladen in …3
×

Hier ansehen

1 von 26 Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Anzeige

Aktuellste (20)

Angular js

  1. 1. “What is AngularJS?” As defined on Wikipedia:AngularJS is an open-source JavaScript framework, maintained by Google, which assists with running single-page applications. Its goal is to augment browser- based applications with Model–View–Controller (MVC) capability, in an effort to make both development and testing easier. “Why is it Called AngularJS?” Angular means having angles or sharp corners. HTML uses angle brackets. Hence, the name!
  2. 2. “Why AngularJS?” There are other Javascript frameworks like JQuery, Mootools, Dojo and Backbone. However to choose AngularJS based on our complex web application like adding new rows into table dynamically with copy and cut functionality with AJAX features and also the below mentioned factors were deciding in the choice of the framework.
  3. 3. When NotTo Use AngularJS AngularJS was designed with data-driven apps in mind. AngularJS an excellent choice if your app interacts with a lot of RESTful web services. But if your app needs heavy DOM manipulations where model data is not the focus, instead you might choose library like jQuery, DOJO. If you want to develop a web application, basically a game or involves heavy graphics manipulation, AngularJS is not a good choice. In short, AngularJS is best if your UI is datadriven.
  4. 4. Two Way Data Binding Classical Template Angular Templates What is One-Way Data Binding? In Common every HTML attribute specific to AngularJS is called directive and has a specific role in an AngularJS application. Here HTML page is a template and since it is not a final version and perhaps it rendered by web browser. The ng-app directive marks the DOM element that contains the AngularJS application. In the below code we have initialized 2 variables through ng-init directive. A data binding can be specified in two different ways: with curly braces: {{expression}} with the ng-bind directive: ng-bind= “varName”
  5. 5. What isTwo-Way Data Binding? In the below example , the we have a 2-Way Data Binding, when a model variable is bound to a HTML element that can both change and display the value of the variable. Here ng-model directive to bind a model variable to the HTML element that can not only display its value, but also change it.
  6. 6. AngularJS Expression Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as {{expression}} Angular Expressions vs. JavaScript Expressions Angular expressions are like JavaScript expressions with the following differences: Context: JavaScript expressions are evaluated against the global window. In Angular, expressions are evaluated against a scope Forgiving: In JavaScript, trying to evaluate undefined properties generates ReferenceError or TypeError. In Angular, expression evaluation is forgiving to undefined and null. No Control Flow Statements: you cannot use the following in an Angular expression: conditionals, loops, or exceptions. Filters: You can use filters within expressions to format data before displaying it.
  7. 7. Directives & Filters What are Directives & Filters? Directives At a high level directives are markers on DOM element which tells HTML compiler to attach a specified behavior to that DOM element or even transform the DOM element and its children. Angular comes with a set of these directives built-in, like ngBind, ngModel, ngRepeat and ngView. Filters A filter formats the value of an expression for display to the user.They can be used in view templates, controllers or services. AngularJS provides some in-built filters like for search, lowercase, uppercase, orderby and groupby. Below given an example: – Simple table with ng-repeat directive and search filter.
  8. 8. MVM AngularJs is MVW MVW ModelView Whatever? AngularJS is an MVW framework (Model-View-Whatever) where Whatever means Whatever Works for You. The reason is that AngularJS can be used both as Model-View- Controller (MVC) and Model-View-View-Model (MVVM) framework. But what’s important to us is that we can build solid web apps with great structure and design with minimum effort. To Understand more on it here the blog : http://addyosmani.com/blog/understanding- mvvm-a-guide-for-javascript-developers/
  9. 9. MVC – ModelView Controller MVC application structure was introduced in the 1970s as part of Smalltalk and now it became one of the popular Design Pattern. The core idea behind MVC is that we have clear separation in our code between managing its data (model), the application logic (controller), and presenting the data to the user (view). Let we see that how this design pattern plays an important role in AngularJs. In Angular applications,
  10. 10. Controller A controller is a JavaScript function • contains data • specifies the behavior • should contain only the business logic needed for a single view.
  11. 11. Scope Scopes are a core fundamental of any Angular app. Scopes serve as the glue between the controller and the view. •Scope is an object that refers to the application model. •Scopes are arranged in hierarchical structure which mimic the DOM structure of the application •Scopes are the source of truth for the application state
  12. 12. Model: attrs of Scope
  13. 13. Dependency Injection & AJAX Support Dependency Injection AngularJS comes with a built-in dependency injection mechanism. Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. We can divide our application into multiple different types of components which AngularJS can inject into each other. Modularizing our application makes it easier to reuse and configure the components in our application. Let us see how we can inject the custom directive into the controller Directive for IE 8 Select Option Issue
  14. 14. Dependency Injection & AJAX Support Note: Below I have given how to inject and to use in our presentation layer Include in your Controller and Presentation Layer
  15. 15. Dependency Injection & AJAX Support Note: Below I have given how to inject and to use in our presentation layer Include in your Controller and Presentation Layer
  16. 16. Scope As we saw a Scope is glue between Model andView. Essentially, a scope is nothing but a plain old JavaScript object, and that is just a container for key/value pairs, as follows: var myObject={name:'AngularJS', creator:'Misko'} A scope—like other objects—can have properties and functions attached to it. The only difference is that we don't usually construct a scope object manually. Rather, AngularJS automatically creates and injects one for us. In our example, we attached properties to the scope inside the controller:
  17. 17. Every AngularJS application has at least one scope called $rootScope. $rootScope is the parent of all scopes All the properties attached to $rootScope are implicitly available to scope 1. Similarly, scope 2 has access to all the properties attached to scope 1. Every JavaScript constructor function has a property called prototype which points to an object. When you access a property on an object (someObject.someProperty) JavaScript searches for the property in that object. If it's found, it is returned. If not, then JavaScript starts searching for the property in the object's prototype. The prototype property is nothing but another object. <div ng-app> <!-- creates a $rootScope --> <div ng-controller="OuterController"> <!--creates a scope (call it scope 1) that inherits from $rootScope--> <div ng-controller="InnerController"> <!-- Creates a child scope (call it scope 2) that inherits from scope 1 --> </div> </div> </div>
  18. 18. function Bike(color,company){ this.color=color; this.company=company; } Bike.prototype.year=2012; // Bike is a functional object, so it has the `prototype` property var bike=new Bike ('red',‘Bajaj'); console.log(bike.color); // prints color from bike console.log(bike.year); // prints year from Bike.prototype console.log(bike.hasOwnProperty('year')); //returns false
  19. 19. Writing a Primitive to an Object Our object bike does not have a property year, but Bike.prototype does. When you try to read bike.year you get the value from bike.prototype. But you can also attach the property year to bike, like this: bike.year=2000 //sets property 'year' on bike console.log(bike.year); // returns 'year' property from bike and NOT from bike.prototype console.log(bike.hasOwnProperty('year')); //returns true as Bike has 'year' property Now,When you attach a new property to an object the property is attached to it and not the prototype. Subsequently when you access the property, JavaScript no longer consults the prototype because the property is found right there in the object itself.
  20. 20. Writing a ReferenceType to an Object Let's attach an object called data to Bike.prototype: Bike.prototype.data={}; //set it to empty object Now have a look at the following code: bike.data.engine='rear'; //This does not create a new property called 'data' on bike object console.log(bike.data.engine); //returns 'rear' and it comes from Bike.prototype console.log(bike.hasOwnProperty('data')); // false, as bike doesn't have own property 'data‘ Bike.prototype.hasOwnProperty('data'); // 'data' property is created in prototype.
  21. 21. Objects Can Extend Objects Objects can extend other objects in JavaScript, and this is the key to understanding AngularJS scope inheritance. Have a look at the following snippet: var honda=Object.create(bike); console.log(Object.getPrototypeOf(honda)); //Bike {} Object.create() creates a new object whose internal prototype property points to the object specified as the first argument to the function. As a result the honda object's prototype now points to bike object.Therefore, honda has all the properties defined in the bike instance. This a quick overview of prototypal inheritance
  22. 22. Prototypal Inheritance in AngularJS Scopes The $rootScope object has a function called $new() that's used to create child scopes. Let's consider the previous example where we nested two controllers and had one $rootScope.The code is repeated below: <div ng-app> <!-- creates a $rootScope --> <div ng-controller="OuterController"> <!--creates a scope (call it scope 1) that inherits from $rootScope--> <div ng-controller="InnerController"> <!-- Creates a child scope (call it scope 2) that inherits from scope 1 --> </div> </div> </div>
  23. 23. The below diagram, taken from the AngularJS GitHub page, depicts how scopes inherit each other.

×