+Tips & Tricks

List PersistencE





1+ yr old 

Angularian







What is Angular?


  • HTML enhanced for web apps!
  • A structural framework for dynamic web apps
  • What HTML would have been had it been 
    designed for applications
  • Is not for everyone






Core Concepts

Two-way Data-Binding


  <label>Name:</label>
  <input type="text" ng-model="yourName" placeholder="Enter a name">
  <hr>
  <h1>Hello !</h1>

Name:  


Hello {{yourName}}!

$SCOPE

  • $scope is an object that refers to the application
    model.
  • $scope is the glue between application controller
    and the view.
  • $scopes are attached to the DOM as $scope data
    property, and can be retrieved for debugging
    purposes.
     // Get the scope of an inspected elementangular.element($0).scope();

                                           

$scopE

function MyCtrl($scope) {
  $scope.yourName2 = '<Please type a name>';

  $scope.resetName = function () {
    $scope.yourName2 = '<Please type a name>';
  }
}
// Input and Button HTML:
<input ng-model="yourName2" placeholder="Enter a name">
<button ng-click="resetName()">Reset</button>

 
My Name is {{yourName2}}

!important


Always put a Period when using ng-model



_   _'

.

$scope.$Watch

  • The $watch allows the directives to be notified of
    property changes, which allows the directive to
    render the updated value to the DOM.
  •  Care should be taken that the dirty checking
    function does not do any DOM access, as
    DOM access is orders of magnitude slower then
    property access on JavaScript object.

$SCOPE.$watch

function MyCtrl($scope) {
  $scope.$watch('myName', function(newVal) {    $scope.characterLength = newVal.length;  });
}


My Name is {{myName}}
That's {{characterLength}} characters


Scope.$apply


$apply() is used to execute an expression in angular from outside of the angular framework. 

Sample external execution contexts:

  • DOM Events
  • setTimeout
  • XHR
  • 3rd party libraries

$scope.$apply

function MyCtrl() {
  $scope.startTimeout1 = function () {
    setTimeout(function () {
      $scope.message1 = "Timeout 1 called!";
    }, 5000);
  }

  $scope.startTimeout2 = function () {
    setTimeout(function () {
      $scope.$apply(function () {
        $scope.message2 = "Timeout 2 called!";
      });
    }, 5000);
  }
}

    
Message 1: {{message1}}
Message2: {{message2}}

Directives


Directives are a way to teach HTML new tricks

Ways to invoke a directive 

// Attribute<span my-dir="exp"></span>
// Class<span class="my-dir: exp;"></span>// Element
<my-dir></my-dir>// Comment
<!-- directive: my-dir exp -->

Directives


Purpose Naming


<geo-* > <il8n-* >

is better than

<dc-* > <mj-* > <bm-* >

owner-naming

Directives




Are

Awesome

Let's Learn by

Example

Dependency Injection

Dependency Injection (DI) is a software design pattern that deals with how code gets hold of its dependencies.  
angular.module('myModule', []).
  factory('greeter', function($window) {
    return {
      greet: function(text) {
        $window.alert(text);
      }
    };
  });

// Inferring Dependencies
function MyController($scope, greeter) {
  ...
}

Dependency Injection

Other Usage: 
 // $indect Annotationvar MyController = function(renamed$scope, renamedGreeter) {
  ...
}
MyController.$inject = ['$scope', 'greeter'];


 // Inline Annotationangular.module('myModule', []).
  factory('greeter', ['srv1', 'srv2',... function(srv1, s2,...) {    ...
  });





MVC

MVC









  • Set up the initial
     state of a scope
     object.
  • Add behavior to
    the scope     object.
  • SHOULDN'T
    TRY TO DO
    TOO MUCH

  • the view is thethe view is the DOM loaded and rendered in the broswer, 
  • after Angular has transformed the DOM based on info in the templ8, controller and model.
  • a model is any data
         that is reachable
    as a property of
    an angular $scope object
  • data calculations
  • factories, services,
         $resource

Model
View
Controller

MVC



fat


MODELS

skinny

CONTROLLERS

Controllers


The most common way to keep controllers slim is by encapsulating work that doesn't belong to controllers into services and then using these services in controllers via dependency injection.


Controllers


Do not use Controllers for


  • Any kind of DOM
    Manipulation
- encapsulate to        directives
  • Input formatting
- use ng form directives
  • Output filtering
- use angular filters
  • Sharing states
    across controllers
- use angular services





LIST PERSISTENCE

working with Lists

something about

LIsts


It's pretty much

Everywhere

Everywhere

Everywhere

Everywhere

Everywhere

Everywhere

Everywhere

Everywhere

Everywhere


List Implementation

(Polluted Controller)


  • Not Scalable
  • Hard to Test

List Implementation

(Factory Provider)


  • Create a factory for query objects
  • Provide an API for more control

Results

Reusable and Easy to use
Scalable
Testable

Angular List Persistence (MVC)

By ducondez

Made with Slides.com

Angular List Persistence (MVC)

  • 1,552

More from ducondez