Angular JS

&

RAILS

What is Angular JS



  • Framework
  • Makes HTML dynamic
  • example - http://codepen.io/anon/pen/twenG

HOW it works



Angular Compiler


Compiler is an Angular service which traverses the DOM looking for attributes. The compilation process happens in two phases.

Compile: traverse the DOM and collect all of the directives. The result is a linking function.

Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source of truth.

Dependency Injector


  • Each Angular app has an injector
  • Injector is responsible for locating services and injecting them
  • https://docs.angularjs.org/guide/di

Two way data binding



SCOPE


Scope is the glue between application controller and the view. 

During the 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.

http://codepen.io/rockyj/pen/xCeds

ROUTING + Controller



Demo

Services



  • Lazily instantiated
  • Singletons
  • Can be used to share data between controllers

Directives

Animations

Advantages


  • Super fast development
  • Makes developing SPA easy
  • Awesome performance
  • Make apps scalable
  • Solid, stable and backed by Google

Disadvantages


  • Opinionated
  • Good for IO driven apps only (not games)
  • Hockey stick learning curve
  • Hard to argue with
  • jQuery and Bootstrap lovers need to unlearn
  • SEO?




Thanks

deck

By rockyj

deck

  • 659