+Tips & Tricks

List PersistencE

1+ yr old 

Angularian

What is Angular?

Two-way Data-Binding

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

Hello {{yourName}}!

$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

$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);
  }
}

Directives

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-* >

<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

 // $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

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

LIST PERSISTENCE

working with Lists

something about

LIsts

It's pretty much

List Implementation

(Polluted Controller)

List Implementation

(Factory Provider)

Results