Introduction to


AngularJS


for web programmers




Hugo Josefson / Jayway 2014

Overview


  • What is AngularJS?

  • What problems are we solving?
  • What AngularJS offers us
  • The Angular Way (AngularJS components)

  • How it relates to other web frameworks / libs
  • When NOT to use AngularJS

  • References, Useful tools, Questions!

What is AngularJS?


Client-side framework for web apps
by Google, Open Source

Embraces and extends:
HTML, CSS, JS

"What HTML would have been
had it been designed for applications"

Used for Doubleclick.net

( where Google makes money )

and for youtube.com/tv



builtwith.angularjs.org


What problems are we solving?

What problems are we solving?


User input

  • Reading
  • Validating
  • Structuring input data

What problems are we solving?


Rendering views
from data

  • Composing views from sub views
  • Injecting data
  • Re-rendering when data changes

What problems are we solving?


Code structure

  • Separation of concerns
  • Testability

What problems are we solving?


Deep linking URL's

  • Send URL to other people
  • Reload any page in browser

What problems are we solving?


Server communication

  • AJAX

What AngularJS offers


Template rendering
Two-way data binding

What AngularJS offers


User input validation
  • Built in
  • Extendable

What AngularJS offers


Component structure
and
Dependency Injection (DI)


  • Controllers
  • Services
  • Directives
  • Filters

What AngularJS offers


Routing

  • Send URL to other people
  • Reload any page in browser

  • Declare which route path
    triggers which view
    • /books → books.html → BooksController
    • /books/:bookId → book.html → BookController

What AngularJS offers


Utilities

  • AJAX
  • Filters for formatting etc
  • Animations triggered by css classes
  • ...more...

The Angular Way


  • Data models are POJO  ← this is what you update
    • the data of your app / single source of truth
  • Declarative View
    • DOM-based (HTML)
    • two-way data-bound to Model
  • Service
    • business-logic
    • works with data
!

The Angular Way


  • Controller
    • supplies Data models, Services to View
  • Filters (helper functions for Views)
    • filter lists
    • translate values → relevant strings
  • Directive
    • custom UI Behavior
    • custom HTML tags ("extends HTML")
    • manipulates the DOM 

How AngularJS relates to...


  • jQuery
  • Backbone.js
  • Ember.js
  • Knockout
  • Durandal

jQuery


  • Smooths over browser API / behavior diffs

  • DOM
    • enumeration
    • mutation
    • eventing

  • AJAX

Backbone.js

  • Lightweight MVC conventions

  • Models
  • Router
  • Views conventions
    • No template lib built-in, use any impl
    • Re-rendering triggered by Model events
    • Re-renders large DOM structures

Ember.js


  • Full-scale like AngularJS

  • MVC
  • Router
  • Data binding via explicit API

Knockout


  • Data binding via explicit API

Durandal


  • Full-scale like AngularJS

  • Uses Knockout for data binding
  • Uses Require.js for
    dependency management

When NOT to use AngularJS


References


www.sitepoint.com/10-reasons-use-angularjs
net.tutsplus.com/tutorials/javascript-ajax/5-awesome-angularjs-features
blog.artlogic.com/2013/03/06/angularjs-for-jquery-developers

www.exratione.com/2013/12/considering-speed-and-slowness-in-angularjs
blog.angularjs.org/2014/03/angular-20.html

www.angularjs.org
docs.angularjs.org
← short wonderful tutorial videos egghead.io ← short wonderful tutorial videos

Useful tools

AngularJS Batarang Chrome extension
plnkr.co, jsfiddle.net Sketch some code
bower.io Dependency management
gulpjs.com, gruntjs.com Build systems
yeoman.io Project scaffolding
ng-boilerplate, angular-app, generator-gulp-ng Per-feature directory structure examples
ng-annotate Don't worry about coding minifier-safely
ngmodules.org Some Angular community modules

Thank you!





Questions!?





hugo.josefson@jayway.com

Introduction to AngularJS for web programmers

By Hugo Josefson

Made with Slides.com

Introduction to AngularJS for web programmers

An overview of what AngularJS is, where it fits compared to other frameworks, what it's like to work with. For programmers who have already developed MVC style apps.

  • 3,213

More from Hugo Josefson