Essentially Angular

@kevin_noonan

Python Ireland

8th Jan 2014, Dublin

Hit 'M' for overview of slides. Press 'M' again to exit.

Simple Angular app

<!doctype html>
<html lang="en" ng-app>
<head>
 <meta charset="utf-8">
   <title>My HTML File</title>
     <link rel="stylesheet" href="css/app.css">
     <link rel="stylesheet" href="css/bootstrap.css">
     <script src="lib/angular/angular.js"></script>
</head>
  <body>
    <p>Hello {{ "Python Ireland" }} !</p>
</body>
</html>

ng-app bootstraps your Angular app

ng-app defines the part of the page Angular controls.
Without ng-app, you don't have an Angular app.

Origins of AngularJS

Created by Miško Hevery and Adam Abrons.
Initial release in 2009.
Abrons left the project.
Core developers in Google:
Miško Hevery, Igor Minár and Vojta Jína.

High-Level Overview of AngularJS

JavaScript library, for building a rich web client.
A framework not unlike Django, but in the browser.
A level of abstraction above jQuery
...and other DOM-manipulation and events libraries.

Angular is an MVC Framework

MVC, all in the browser.
Model: JavaScript data-structures.
View: a section of a web-page.
Controller: JavaScript code to handle that view.

Jargon: data-binding

Input from the user may change the model.
Your JavaScript code may change the model.
Data-binding means: as the model changes, the view changes automatically.

A Potted History of Native Web Development

Brief (and woefully incomplete).

Web Development approach 1

HTML templates with tags.

Server inserts data (often from a database).

Example: Django templates.

Document Object Model ("DOM")

The DOM is a data structure representing the web-page.
An abstract view of the web-page as a tree of objects.

Web Development approach 2

DOM tree events and Manipulation.

Web Development approach 3

Rich client in the browser

...built with Ember or Angular
...consuming a REST API on the server.

Single Greatest Tool for AngularJS Development

AngularJS Batarang

Add-on for Chrome Developer Tools.

With Batarang, you can examine the model of the app.

Google Trends

Angular versus Backbone, Ember, etc.
http://t.co/klpK4s80lW

Angular versus jQuery

http://bit.ly/1cAvBOJ

Angular Learning Curve

http://nathanleclaire.com/blog/2014/01/04/5-smooth-angularjs-application-tips/

Angular Phonecat

https://github.com/angular/angular-phonecat
The official Angular tutorial app.
http://docs.angularjs.org/tutorial/

A view from Angular Phonecat

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">

  <ul>
    <li ng-repeat="phone in phones">
      {{phone.name}}
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

</body>
</html>

Source: github.com/angular/angular-phonecat/blob/step-2/app/index.html

Scope is crucial to Angular

Scope is structured like the roots of a tree.
ng-app defines RootScope.
Your view defines a new scope on the page.
Even ng-repeat creates its own nested scope.

A controller from Angular Phonecat

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

phonecatApp.controller('PhoneListCtrl',
  function($scope) {

$scope.phones = [
  {'name': 'Nexus S',
   'snippet': 'Fast just got faster with Nexus S.'},
  {'name': 'Motorola XOOM™ with Wi-Fi',
   'snippet': 'The Next, Next Generation tablet.'},
  {'name': 'MOTOROLA XOOM™',
   'snippet': 'The Next, Next Generation tablet.'}
  ];
});

Source: github.com/angular/angular-phonecat/blob/step-2/app/js/controllers.js

Angular loves JSON

JSON: JavaScript Object Notation
Angular consumes JSON most easily as an array of objects.

Filters

Handy, declarative feature.
Several filters built-in.
You can also write your own filters.

Phonecat View with a Filter

<body ng-controller="PhoneListCtrl">
 <div class="container-fluid">
  <div class="row-fluid">
   <div class="span2"> <!--Sidebar content-->
      Search: <input ng-model="query">
   </div>
   <div class="span10"> <!--Body content-->
    <ul class="phones">
      <li ng-repeat="phone in phones | filter:query">
        {{phone.name}}
      <p>{{phone.snippet}}</p>
      </li>
    </ul>
   </div>
  </div>
 </div>
</body>

Source: github.com/angular/angular-phonecat/blob/step-3/app/index.html

Angular-grunt-coffeescript

https://github.com/roytruelove/angular-grunt-coffeescript
Excellent starting point for an Angular app.
Well-structured: directory per feature.
Demonstrates uses of directives, filters, services.
Uses CoffeeScript!

Polyglot Angular

I highly recommend you learn CoffeeScript.
Well-suited to Angular.
Only 4 years old.
Language #13 on Github, for new repository creation.*
JavaScript is Assembly Language for the Web.

(* Source: Adam Bard, 30th Aug 2013.)

What you need to know about CoffeeScript

Like Python, whitespace is significant.
Whitespace defines blocks (for functions and objects).
The arrow -> is used to define a function.
Coffee is close to JavaScript. It's easy to pick up.
coffeescript.org
Coffee compiles instantly to readable JavaScript.

Sample Coffee object

math =
  root:   Math.sqrt
  cube:   (x) -> x * x * x

Equivalent JavaScript

math = {
  root: Math.sqrt,
  cube: function(x) {
    return x * x * x;
  }
};

Node is needed for its toolchain

Goal: install npm, the package manager for Node.
npm installs Coffee and Karma, plus other tools.
Start by installing nvm (Node Version Manager):

curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Then install Node and npm:

nvm install 0.10.24

More detailed instructions.

Convert CoffeeScript snippets to JavaScript

Install CoffeeScript:

npm install -g coffee-script

Install js2coffee:

npm install -g js2coffee

Then convert JavaScript:

js2coffee input.js > output.coffee

Let's talk about DI

DI: Dependency Injection.
Familiar to the Java world: e.g. Spring, Guice.
DI is also used in .NET.
DI is essential in Angular apps.
e.g. DI provides the modules needed by each controller.

angular.module

The name of the app ('app').
And the modules it depends on:

m = angular.module('app', mods)

The app's modules

mods = [
  'common.directives.glowGreenOnMouseoverDirective'
  'common.directives.uiTooltipDirective'
  'common.filters.toLowerFilter'
  'common.services.dataSvc'
  'common.services.envProvider'
  'common.services.toastrWrapperSvc'

  'detailsView.detailsViewCtrl'
  'detailsView.personDetailsDirective'

  'index.indexCtrl'

  'searchView.mattizerFilter'
  'searchView.searchViewCtrl'
]

Source: github.com/roytruelove/angular-grunt-coffeescript/blob/develop/src/main/app/app.coffee

Routes to the app's pages

routesConfigFn = ($routeProvider) ->
  $routeProvider.when('/search',
    {templateUrl: 'searchView/searchView.html'})
  $routeProvider.when('/details/:id',
    {templateUrl: 'detailsView/detailsView.html'})
  $routeProvider.otherwise({redirectTo: '/search'})

Source: github.com/roytruelove/angular-grunt-coffeescript/blob/develop/src/main/app/app.coffee

Configuring the routes

How Angular works

When Angular bootstraps (after angular.js loads)
...Angular 'compiles' the directives on the page
...into HTML and JavaScript.
Angular responds to routes (URLs in the browser)
...by loading the appropriate view (HTML file)
...and passing control to its controller.

The run method

The run method is like the main() in C or Python.
Executed first, once the Angular app has bootstrapped.
Good place to make an initial request to the server, say; or detect the user's login status (wth ngCookies).

The run block

m.run (['common.services.env', (env) ->
# Allows the environment service to run
# whatever app run block it wants.
  if env.appRun?
    env.appRun()
])

Source: github.com/roytruelove/angular-grunt-coffeescript/blob/develop/src/main/app/app.coffee

The Power of Directives

Key selling-point of AngularJS.
Angular comes with a great host of directives built-in.
See: http://docs.angularjs.org/api.
Using a directive is declarative programming.
And you can build your own directives (advanced topic).

A simple directive, built with jQuery

Note: headlessCamelCase for directive name.

    
name = 'common.directives.glowGreenOnMouseoverDirective'
angular.module(name,[]).directive('glowGreenOnMouseover', [
 '$log'
 ($log) ->
   (scope, element, attrs) ->
      element.bind 'mouseenter', () ->
        $(element).addClass('greenGlow')

        element.bind 'mouseleave', () ->
          $(element).removeClass('greenGlow')
])

Source: github.com/roytruelove/angular-grunt-coffeescript/blob/develop/src/main/app/common/directives/glowGreenOnMouseoverDirective.coffee

The directive in a view

Note: spinal-case for using a directive.


<div class="span6">
  <input type="text" ng-model="search" placeholder="Filter by name..."></input>
  <ul>
    <li glow-green-on-mouseover ng-click="loadDetails(person.id)" ng-repeat="person in people | filter:search">
     {{person.firstName | mattizer }} {{person.lastName}}
    </li>
  </ul>
</div>

Source: github.com/roytruelove/angular-grunt-coffeescript/blob/develop/src/main/app/searchView/searchView.html

Services for Code Organisation

AngularJS services are local (in the browser).
Modules for your code.
Reduce code duplication.
Without services, you'll repeat code in your controllers!
DRY: Don't Repeat Yourself.

A service to retrieve the data for the app

name = 'common.services.dataSvc'
class DataSvc
  constructor: (@$log, @$http, @env) ->

  _get: (relPath)->
    return @$http.get("#{@env.serverUrl}/#{relPath}")

  getPeople: () ->
    return @_get('people')

  getPerson: (id) ->
    return @_get("person/#{id}")

angular.module(name, []).factory(name,
['$log','$http', 'common.services.env',
($log, $http, env) ->
        new DataSvc($log, $http, env)
])

Source: https://github.com/roytruelove/angular-grunt-coffeescript/blob/develop/src/main/app/common/services/dataSvc.coffee

Using the service in a controller

name = 'searchView.searchViewCtrl'

angular.module(name, []).controller(name, [
  '$scope'
  '$log'
  '$location'
  'common.services.dataSvc'
  'common.services.toastrWrapperSvc'
  ($scope, $log, $location, data, tstr) ->

    data.getPeople().then (resp)->
      $scope.people = resp.data

Source: https://github.com/roytruelove/angular-grunt-coffeescript/blob/develop/src/main/app/searchView/searchViewCtrl.coffee

Online resources

ng-newsletter for articles.
Egghead.io for videos.

Python on the server

Use Python to create RESTful services:

Django REST Framework or

Tastypie.

If you must mix Django templates with Angular

...use Verbatim.

Verbatim is in Django 1.5 by default.

Beyond CoffeeScript

Add-on packages

Lo-Dash for map, filter, reduce etc.

(powerful functions to process data structures).

Restangular for server comms.

(instead of ngResource or $http).

Angular ui-router for multi-view pages.
Angular UI Bootstrap to build a user-interface.

Embrace the JavaScript ecosystem

Build system - Grunt.
Package management - Bower (usually).
Small/unit tests - Jasmine.
System/integration/large tests - Karma.

"God is in the structure"

Use a starter project:
...angular-grunt-coffeescript if you're using Coffee.
...ng-boilerplate for JavaScript.
Subdirectory per feature.
Use services for code modules (intermediate).
Write directives (advanced).

Learn about Chrome Developer Tools

Free, 7-part, interactive tutorial on CodeSchool

Number One Tip for AngularJS development

The Chrome add-on: AngularJS Batarang

Where to go from here

Work through the 13-part, official Angular tutorial:

http://docs.angularjs.org/tutorial/

Learn CoffeeScript e.g. on coffeescript.org.
Read the code of angular-grunt-coffeescript.

Credits

DOM tree image by David Baron

Essentially Angular