AngularJS ()=> hasta la victoria siempre;

Saturday, February 18, 2017

AngularJS is the leading Open Source JavaScript Application Framework backed by Google. The newest version Angular 2 or Just Angular is faster and production, cloud ready now.

Open Source Rules!

My selection of awesome future Open Source technologies (are you ready to party? harder, better, faster, stronger):

attitude, facts and mission ...

we are fearless, ruthless and honest, the goal is progress. we are constantly focused on our goal, produce quality working software as fast as possible. we are open source. we are the angular open source crisis team.


the code defines an angular module with two controllers, observe: function chaining fluent interfaces

just angular 1

simple template expanding directive with binding, restricted to element, note: directive name in camel case, in the template directive in hyphen case

just angular 2

to preserve the contents between directive tags include ng-transclude directive in directive and modify transclude property

just angular 3

components can be registered using the .component() method of an AngularJS module

just angular 4

a basic angularized page: ng-app tells AngularJS to be active in this portion of the page, in the head section the script tag loads AngularJS, ng-model links the control to the model and vice versa, 2 way data-binding, the double curly braces specify data-binding locations in the HTML, ng-if directive if evaluates to a truthy value the contents of the element are displayed

just angular 5

data-binding in a simple todo app, index.html, load the todo.js script in the head, ng-controller directive manages content in the div, ng-click directive registers an event handler and invokes the method defined, ng-repeat directive unrolls a collection, a new copy of li element is created, when object are added/removed to/from collection new li elements are added/removed from DOM, this is one of the most versatile directives in AngularJS, note the css class data-binding for the css selector class to be applied, ng-submit intercepts the form submission and calls the method in the controller

just angular 6

data-binding in a simple todo app, todo.js the controller is attached to the module, note the string definition of the name of our app and the controller, the model is created with 7 initial todo items, you simply assign your model to the scope and AngularJS automatically reflects this in the UI, we assign behavior to the scope with methods

just angular 7

data-binding in a simple todo app, todo.css, strike-through decoration is added when the task is done

just angular 8

wire up a backend: firebase, add script dependencies, initialize the firebase SDK, insert the controller and model directives to setup blazing fast three-way data binding between the HTML, JS and FIREBASE realtime database

just angular 9

wire up a backend: firebase, inject the angularfire services, add three-way object bindings

just angular 10

wire up a backend: firebase: synchronize collections as arrays, $firebaseArray

just angular 11

wire up a backend: firebase: synchronize collections as arrays, basic CRUD operations, real-time synchronization in model and database in the cloud

just angular 12

wire up a backend: firebase: authentication, firebase provides authentication via several OAuth providers: Google, GitHub, Facebook and Twitter

just angular 13

simple data-binding: directives: ng-app, ng-init, ng-model, in double curly braces we have an expression that AngularJS evaluates in the context of the current scope, in the expression we also have a pipe symbol, this is a filter, a filter formats the value of a an expression for display to the user, in this case in currency, the number is formatted into an output that looks like money, note two-way data binding whenever input values change, the value of the expressions are automatically recalculated and DOM is updated with their values

just angular 14

view data-binding, observe the ng-controller directive as syntax by prefixing them with the controller alias all expressions in the page are read/writeable

just angular 15

controller logic allowing to enter and calculate the costs in different currencies and also pay the invoice, this new javascript file contains a controller that is registered with the module , the file specifies a constructor function that will be used to create the actual controller instance, the purpose of controllers is to expose variables and functionality to expressions and directives

just angular 16

services: view independent business logic, move currency conversion into a service in another file

just angular 17

dependency injection of the finance service in the module and controller, everything within AngularJS(directives, filters, controllers, services, ...) is created and wired using dependency injection, the DI container is called the injector, all components that work together are registered in the module

just angular 18

accessing a backend, fetch the exchange rates from the yahoo finance API, we use the $http, a built-in service provided by AngularJS for accessing a server backend, $http is a wrapper around xhr and jsonp transports

just angular 19

controller: in AngularJS a controller is defined by a JavaScript constructor function that is used to augment the AngularJS scope, we use controllers to set up the initial state of the $scope object and add behavior to the $scope object

just angular 20

adding behavior to a scope object, attach methods to the $scope object, these methods can then be called from the template/view, view controller adds a method which triples number to the scope, once controller attached to DOM, triple method can be invoked in an AngularJS expression in the template

just angular 21

the message in our template contains a binding to the spice model, which by default is set to the string "very", depending on which button is clicked, the spice model is set to the new value, the message is updated automatically by data-binding

just angular 22

controller methods can also take arguments, controller defines one method called spicy, which takes in one argument called spice, template refers to controller method and passes in a string constant and a model property, bound to input box

just angular 23

3 nested ng-controller directives, 4 scopes are created: root scope, maincontroller scope, which contains timeofday and name properties, childcontroller scope which inherits the timeofday property but overrides(shadows) the name property from the previous scope and so on ... inheritance works with methods the same way as it does with properties

just angular 24

testing controllers with karma: controller definition

just angular 25

testing controllers with karma: one of the best ways is to inject the $rootscope and $controller

just angular 26

services: AngularJS services are substitutable objects that are wired together using dependency injection, use services to organize and share code across your app, AngularJS services are lazily instantiated - AngularJS only instantiates a service when an application component depends on it, singletons - each component dependent on a service gets a reference to the single instance generated by the service factory, AngularJS offers useful services like $http, like other core AngularJS identifiers, built-in services start with $ prefix, to use a service add it as a dependency for the component(controller, service, filter or directive) that depends on the service, AngularJS's dependency injection subsystem takes care of the rest ...

just angular 27

services: just like injecting dependencies in a controller, declare dependencies in a service by specifying them in the service's factory function signature

just angular 28

unit testing: unit test for the notify service, this unit test sample uses a jasmine(is carmen's baby) spy (mock) instead of a real browser alert

just angular 29

scope is the glue between application controller and view, during template linking phase the directives set up $watch expressions on the scope, the $watch allows the directives to be notified of property changes, which allows the directive to render the updated value to the DOM, this sample demonstrates controller writing data into the DOM and properties on scope update automatically when bound HTML input widgets

just angular 30

scope: each AngularJS application has exactly one root scope but may have any number of child scopes, directives ca create child scopes, when new scopes are created, they are added as children of parent scope, this creates a tree structure which parallels the DOM when they are attached, in JavaScript prototypical inheritance, child scopes prototypically inherit from their parents, this sample demonstrates prototypical inheritance of properties

just angular 31

scope events propagation, scopes can propagate events similar to DOM events, the events can be broadcasted to the scope children or emitted to scope parents

just angular 32

scope inheritance: a scope can inherit from a parent scope as in this sample

just angular 33

Default Success Warning Important Info Inverse
B S W I ? O