FII Practic AngularJS - Lesson two

50 %
50 %
Information about FII Practic AngularJS - Lesson two

Published on March 10, 2014

Author: vladzelinschi

Source: slideshare.net

ANGULAR JS the super heroic JS MVW framework

BOOTSTRAPPING ANGULAR the ng-app directive - what, why, how?

SIMPLE DATA-BINDING EXAMPLE

DATA BINDING IN ANGULAR • One of the most powerful features of this framework ! • It’s a two-way data binding, which consolidates the relation between the view and the model with our requiring programatic intervention ! • Angular creates live templates, they get parsed and interpolated with model values ! • Angular has the power to retain the model’s value and thus be later user in any point of our application

KEEPINGVALUES IN SYNC • Introducing “dirty-checking” - the way Angular makes sure values on models are updated as soon as any interaction happens ! • Angular check to see if the value is “dirty” ! • This is done by running a “$digest()” on the value inside the event loop ! • This is done automatically without any event binding or user interference ! • There are a lot of possible things that can trigger a “digest” function call - events, relations between models, etc. ! • Calling “digest” is way more efficient than event binding (attaching listeners on “change” event etc) ! • This also removes complexity and dependency from multiple events firing and callback hell

DATA-BINDING BEST PRACTICES • Due to the nature of JS itself, and how it passes value vs. reference, it’s considered a good practice to construct a “view model” and work with it ! • After the view model is created, binding should be done on properties of that model, instead of directly on $scope properties ! • http://www.youtube.com/watch? v=ZhfUv0spHCY&feature=youtu.be&t=30m

INTRODUCING MODULES • Modules are a way of grouping your application logic into separate chinks ! • Similar to the concept of namespaces in other programming languages ! • Enforces best practices and prevent polluting the global namespace ! • Also helps with testing, being easier to target specific, isolated functionality ! • Breaking your app into modules means they cane be loaded in any order (also make use of dependency injection if needed)

MODULES IN SHORT • How we define a module - angular.module(‘testModule’); ! • Dependencies - array of strings that tells Angular to load some modules before others (RequireJS functionality) ! • angular.module(‘testModule’, [’testDepOne’, ’testDepTwo’]); ! • Always have a main module that loads conditionally - beware of circular dependencies

INTRODUCING SCOPE • Scope is just another JS object ! • It is created automatically when defining a new Controller or calling some directives that have this ability - ng-repeat, ng-switch, ng-if, etc. ! • It’s the execution context of expressions, and in a certain way, similar to “this” keyword in OOP ! • Scopes are the glue between the View and the Model behind it ! • The place where we define our view models and make operations on them ! • Scopes must control the application logic

THE GLOBAL SCOPE • The closest thing to the global namespace in JS ! • Angular creates it automatically when it first bootstraps the application ! • It’s a bad idea to abuse declaring variables on the $rootScope as it has the same effect as polluting the global namespace in JS

GLOBAL SCOPE BINDING EXAMPLE

WHAT CAN SCOPES DO? • Provide observers to watch for model changes ! • Provide the ability to propagate model changes through the application as well to other components ! • They can be nested and follow the JS inheritance principles ! • They provide an execution context in which we evaluate expressions

SCOPETYPES • Normal prototypal scope inheritance - ng-include, ng-switch, ng- controller, directive with scope: true ! • Normal prototypal scope inheritance with a copy/assignment - ng- repeat. Each iteration of ng-repeat creates a new child scope, and that new child scope always gets a new property ! • Isolate scope - directive with scope: {…}. This one is not prototypal, but '=', '@', and '&' provide a mechanism to access parent scope properties, via attributes ! • Transcluded scope - directive with transcluded: true. This one is also normal prototypal scope inheritance, but it is also a sibling of any isolate scope.

WATCH FUNCTIONALITY ONTHE GLOBAL SCOPE

FURTHER RESOURCES ON SCOPES ! • https://github.com/angular/angular.js/wiki/Understanding-Scopes

Add a comment

Related presentations

Related pages

FII Practic AngularJS - Lesson one - Documents

2. TODAY’S WEB ENVIRONMENT • We are surrounded by a lot of different devices, emphasis on the mobile landscape! • We are being pushed to create ...
Read more

Fii Practic Frontend - BeeNear - laborator 4 - Education

Share Fii Practic Frontend ... ('The two email addresses must match.'); } ... FII Practic AngularJS - Lesson one. laborator 4.
Read more

FII Pakistan Wave One - Survey QuickSights Report

THE FII SURVEY RESEARCH PROGRAM PAKISTAN ... All those who satisfy at least two of the following three conditions ... FII Practic AngularJS - Lesson one.
Read more

Ajax_Creating Web Pages With A Synchronous Javascript and XML

Ajax_Creating Web Pages With A Synchronous Javascript and XML - Ebook download as PDF File (.pdf), Text File (.txt) or read book online.
Read more