title: Angular Intro
author:
name: sudodoki
twitter: sudodoki
url: http://sudodoki.name
output: index.html
theme: sudodoki/reveal-cleaver-theme
--
#[![Angular](http://angularjs.org/img/AngularJS-large.png)](http://angularjs.org/)
## The superheroic Javascript framework.
## HTML enhanced for web apps!
--
# [Origin](https://www.youtube.com/watch?v=X0VsStcCCM8)
+ Started in 2009 by Miško Hevery
+ Googlefeedback: from 6 months x 3 devs (17kLoc - GWT) -> 3 weeks (1,5kLoc)
+ 36k⋆ on github, 6.6k commits, ~1.2k contributors
+ 14(?) core members
--
# Key Feautures
+ 2way binding
+ Templates
+ MVC
+ DI
+ Directives
--
# 2way binding
JS Bin
--
# Templates
JS Bin
--
# MVC
+ Model – POJO/resource disclosed via $scope.
+ View – HTML that exists after ng compiled & binded stuff.
+ Controllers – setting of initial state of $scope & methods to control behaviour.
--
# MVW
## [![MVW](images/mvw.png)](https://plus.google.com/+AngularJS/posts/aZNVhj355G2)
--
# DI
## JS Bin
--
# Directives
## ng-app, ng-controller, ng-model, input, a, ng-hide
##JS Bin
--
## ng-app
Your entry point
JS Bin
--
#
--
# [Module](http://docs.angularjs.org/guide/module)
```
angular.module('myModule', []).
config(function(injectables) { // provider-injector
// This is an example of config block.
// You can have as many of these as you want.
// You can only inject Providers (not instances)
// into the config blocks.
}).
run(function(injectables) { // instance-injector
// This is an example of a run block.
// You can have as many of these as you want.
// You can only inject instances (not Providers)
// into the run blocks
});
angular.module('otherModule', ['myModule', 'ngRoute'])
angular.module('myModule')
.controller('extraStuff')
```
--
## Startup
# ![Concepts](http://docs.angularjs.org/img/guide/concepts-startup.png)
--
## Controllers
Define $scope for View. Or attach stuff to controllers & use them as ViewModel.
JS Bin
--
## They can be nested & inherit stuff but there's a [trick](http://stackoverflow.com/a/14049482/1976857).
JS Bin
--
## Filters
Formatting the value of an expression for display to user
Built-in: currency, date, filter, json, limitTo, lowercase, number, orderBy, uppercase
JS Bin
--
## [Providers](http://docs.angularjs.org/api/auto/service/$provide)
+ value
+ constant
+ factory
+ service
+ provider
JS Bin
--
## [Factory vs Service vs Providers](http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory)
JS Bin
--
# [Providers conclusion](https://code.angularjs.org/1.3.14/docs/guide/providers#conclusion)
--
## [Custom Directives](http://docs.angularjs.org/guide/directive)
## [Event-loop](http://code.angularjs.org/1.0.8/docs/guide/concepts#runtime)
--
Style guides:
+ [John Papa's](https://github.com/johnpapa/angular-styleguide)
+ [Todd Motto's](https://github.com/toddmotto/angularjs-styleguide)
--
Future:
+ [Angular 2.0 blogpost](http://angularjs.blogspot.com/2014/03/angular-20.html)
+ [Design docs](https://drive.google.com/?pli=1#folders/0B7Ovm8bUYiUDR29iSkEyMk5pVUk)
--
Meta-sources:
+ [guide w/ links](https://code.angularjs.org/1.3.14/docs/guide)
+ [AngularJS-Learning](https://github.com/jmcunningham/AngularJS-Learning)
--
Books:
+ http://ng-cookbook.s3.amazonaws.com/ng-cookbook.pdf
+ http://www.amazon.com/Mastering-Web-Application-Development-AngularJS/dp/1782161821
+ http://shop.oreilly.com/product/0636920028055.do
Tutorial:
+ https://egghead.io/tags/AngularJS
+ http://docs.angularjs.org/tutorial
+ http://www.thinkster.io/pick/GUIDJbpIie/angularjs-tutorial-learn-to-build-modern-web-apps
+ http://youtu.be/tnXO-i7944M 20ish minutes version of 60ish minutes Dan Wahlin talk
--
Understading event-loop:[Make Your Own AngularJS](http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html)