Hello, my name is




Angular JS


Before we start


We need:




  • Knowledge of JavaScript (HTML & CSS)
  • Understanding of JSON and APIs

We DON'T need:

  • Assembly
  • Bash
  • COBOL
  • C
  • C++
  • Coldfusion
  • Java
  • MySQL
  • PHP
  • Ruby
  • Shell
  • Et Cetera
  • Et Cetera

Why AngularJs


  • Relatively low learning curve *
  • POJOs throughout
  • Built on solid, modular opinions
  • Created and used by Google
    • YouTube (PS3)
    • DoubleClick
  • Community 
    • #angular on freenode
    • StackOverflow
    • egghead.io

ChevronJs?




<     ==      'angle bracket'    ∴     AngularJs

But what about...


  • Knockout.js
  • Ember.js
  • Backbone.js
  • YUI3
  • Dojo
  • ExtJs
  • jQuery
  • MooTools
  • Prototype
  • PhoneJs
  • ? ? ?

Where can I find it?



http://angularjs.org


https://docs.angularjs.org/api


http://plnkr.co

While there is IE 8




Stay within 1.2.x



And follow the notes on:                                                 
https://docs.angularjs.org/guide/ie

What is AngularJs?


MVC

MVVM

MV?




No, really, what is it?


SDC


S - Service - Similar to a Model

D - Directive - Similar to a View *

C - Controller - Similar to a Controller? 

*

AngularJs uses HTML as your template language through the use of directives and custom (data-) attributes. 


This is smart, quick, and useful.



õ.Ô


Let's give it a shot

Getting it on the page


Include it in the <head>

<!doctype html>
<html>
  <head>
    ...
    <script src="//cdn.manheim.com/assets/js/angular.js"></script>
  </head>
  ...
</html>

Add a little Magic


Add `ng-app` upstream

<!doctype html>
<html>
  <head>
    ...
    <script src="//cdn.manheim.com/assets/js/angular.js"></script>
  </head>
  <body ng-app>
      {{1 + 2}}
  </body>
</html>

... anywhere upstream

What's actually going on


`ng-app` sought out by `angular.bootstrap`

this "magic"
 <body ng-app="clarityApp">...</body>

is actually doing this 
angular.element(document).ready(function () {
    angular.bootstrap(document, ['clarityApp']);
});

not so magical, right?

But what about validation??



Use `data-` prefixes if you want.


<body ng-app>...</body> 


 <body data-ng-app>...</body>


But I don't want logic in my layout!


õ.Ô

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
~ W3C Specification



Creating an app

<!doctype html>
<html>
  <head>
    <title>Clarity App</title>
    <script src="/js/angular.js"></script>
  </head>
  <body>
    <div ng-app="clarityApp">      <!-- contents go here -->
    </div>
    <script src="/js/clairtyApp.js"></script>
  </body>
</html>
// js/clarityApp.js
;(function () {

  'use strict';  
  var app = angular.module('clarityApp', []);

}());

Controllers


define our module's behavior by
defining functions and values

$scope

First controller


app.controller('SearchCtrl', function () {

  var _this = this;

  this.count = 0;

  this.btnPress = function () {
    _this.count++;
  };

});


<div ng-controller="SearchCtrl as search">
  {{search.count}}<br>
  <button ng-click="search.btnPress()">++</button>
</div>

Don't take my word for it

http://plnkr.co/edit/ortbTDNeAvc9wLOvVEIO

Dependency Injection of $scope


app.controller('SearchCtrl', function ($scope) {
  // ... 
});

Doesn't work when minimized 

app.controller('SearchCtrl', ['$scope', function ($scope) {
  // ... 
}]);

$scope API

$watch
$scope.$watch(function () {
    return _this.count;
}, function (newVal, prevVal) {
    if (newVal === prevVal) { return; } // happens during initialization
    // do stuff with the newVal
});

$apply 
$scope.$apply(); // runs $digest

$on; $emit; $broadcast 
$scope.$on('someEvent', function () { });
$scope.$emit('someEvent'); // crawls scope tree firing the event
$scope.$broadcast('someEvent'); // tells everyone regardless of tree

And more!


https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Services


Able to keep data logic out of the scope of the controller




Can be shared between controllers

Let's build one!


app.service('TwitterService', function () {
  var _this = this;
  this.results = [];

  this.search = function (query) {
  };
});

app.controller('SearchCtrl', function (TwitterService) {
  var _this = this;

  this.query = '';

  this.btnSearch = function () {
    TwitterService.search(_this.query);
  };
});

DI in a Service

app.service('TwitterService', function ($http) {
  var _this = this;
  this.results = [];

  this.search = function (query) {
    return $http({
      url: 'https://api.twitter.com/1.1/search/tweets.json',
      params: { q: query }
    }).then(function (resp) {
      _this.results = resp.statuses; // array of statuses
      return resp.statuses; 
    });
  };
});

app.controller('ResultsCtrl', function ($scope, TwitterService) {
  var _this = this;
  this.results = [];

  $scope.$watch(function () {
    return TwitterService. results;
  }, function (newVal, prevVal) {
    if (newVal === prevVal) { return; }
    _this.results = newVal;
  });
});

Don't take my word for it

http://plnkr.co/edit/3iAJpzY2ITpd4NLX2naF

Directives


marker on an HTML tag that tells Angular to
run or reference some JS code


 <body ng-app></body>
 <body ng-app="clarityApp"></body>
 <body data-ng-app></body>
 <body data-ng-app="clarityApp"></body>

AECM?


A: Attribute

E: Element

C: Class

M: coMment

Real life example

<div ng-controller="ResultsCtrl as results">
  <ul>
    <li class="media" ng-repeat="status in results.results">
      <div class="img">
        <img src="{{status.user.profile_image_url}}" width="60" height="60">
      </div>
      <div class="content">
        <h2>{{status.user.name}} {{"@" + status.user.screen_name}}</h2>
        <p>{{status.text}}</p>
      </div>
    </li>
  </ul>
</div>

There so much more!


Custom directives

 <mui-ymmt mui-year="2014" mui-make="Tesla" mui-model="Model S"/>

Transclusion 

<mui-media mui-image="//placekitten.com/60/60">
  <h2>Marvin the Cat</h2>
  <p>This is a very special kitty!</p>
</mui-media>

Out of scope of this talk :-(

Filters

add filters using pipes

Currency 
 {{ 3.2 | currency }} // $3.20

Date 
 {{ '1388123412323' | date }} // Dec 27, 2013

Strings 
 {{ 'Hello, world!' | uppercase }} // HELLO, WORLD!
 {{ 'Hello, world!' | lowercase }} // hello, world!

but wait, there's more


Combining them

 {{ '1388123412323' | date | uppercase }} // DEC 27, 2013



This is just the beginning!

Custom Filters

app.filter('userLink', function () {    
  return function (str) {
    if (typeof str !== 'string') {
      str = String(str);
    }
      
    return str.replace(/@([a-zA-Z0-9_]+)/gi, 
       '<a href="http://twitter.com/$1" target="_blank" class="tAt">@$1</a>'
    );
  };
});

Gotchas!



Too good to be true?

Minimization + DI


app.controller('SearchCtrl', ['$scope', function ($scope) {
  // ... 
}]);

"AJAX" and SEO


Search engines don't run javascript

<!doctype html>
<html>
  <head>
    <script src="/js/angular.js"></script>
  </head>
  <body>
    <script src="/js/app.js"></script>
  </body>
</html>

Alas, my love,

you do me wrong...



IE8 1.2.x - none of the newness

Another time

  • Angular specific CSS
  • Templates
  • Custom directives
  • $scope inheritance
  • Factory > Provider > Service
  • ng-route
  • angular-ui
  • modules and organization

Thanks!


Me: Anthony Pipkin

http://a.pipk.in
@apipkin
github.com/apipkin
linkedin.com/in/apipkin



Questions? 

Made with Slides.com