"Regular" HTML+JS

Built for documents, not for web apps
Most JavaScript code relates to DOM manipulation
Lots of code required to keep DOM in sync with JavaScript objects

AngularJS

A full end-to-end framework for building web applications
- You can build a whole site without requiring any other libraries
An extension to HTML and browsers
Built by Google
It's magical

AngularJS

Can be used alongside other libraries or frameworks (has no global state)
An alternative to Backbone.js / Ember.js
- Similar goals but different approach
An alternative to jQuery (and Prototype to a lesser extent)
- jQuery mainly focuses on DOM; it's not a full end-to-end solution
- Large jQuery codebases get messy very quickly. Generally not maintainable for large apps.
An alternative to Knockout.js
- Knockout is great but only handles data binding

Components

HTML is your templating language
Two-way data binding updates the DOM
Controllers don't touch the DOM directly
Directives define reusable components of behaviour
Services help structure your app
Dependency injection wires it all together
- No global state, easier to unit test

Basic Angular

Data binding via {{ and }}
No JavaScript needed (other than the angular.js include)

<!DOCTYPE html>
<html ng-app>
<body>
	<h1>1 + 2 = {{ 1 + 2 }}</h1>
	<script src="angular.js"></script>
</body>
</html>

1 + 2 = {{ 1 + 2 }}

Two-way binding

Still no JavaScript required!

<!DOCTYPE html>
<html ng-app>
<body>
	<label for="name">What is your name?</label>
	<input id="name" ng-model="name" />
	<p>Hi there, {{name}}!</p>
	<script src="angular.js"></script>
</body>
</html>

What is your name?

Hi there, {{name}}!

Controllers

Regular JavaScript functions (no enforced hierarchy)
Attached to certain sections of the DOM
Contain business logic for rendering and doing stuff
Should NEVER touch the DOM themselves
- Instead, it sets values/methods on $scope
- Results in strict separation of concerns between application logic and DOM manipulation

$scope

The way that you communicate between your controller and your view (HTML)
- So basically it's a view model
A plain old JavaScript object
When you change it, the DOM updates automagically
All scopes inherit from $rootScope
- So $rootScope can be used to share information between scopes
  Not recommended, use a service instead!

Controllers

<body ng-controller="HelloController">
	<input ng-model="name" size="20" />
	<p>Hi there, {{name}}</p>
	<button ng-click="resetName()">Reset</button>

	<script>
	var HelloController = function($scope) {
		$scope.resetName = function() {
			$scope.name = "Daniel L"; 
		};
		$scope.resetName(); // Set initial state
	};
	</script>
	<script src="angular.js"></script>
</body>

Hi there, {{name}}

ng-repeat

One of the most useful directives in AngularJS

<body ng-controller="BlogController">
	<ul>
		<li ng-repeat="post in posts">
			{{post.title}} at {{post.date | date}}
		</li>
	</ul>
	<button ng-click="addNewPost()">Add another</button>
	<script>
	var BlogController = function($scope) {
		$scope.posts = [
			{ title: 'First Post', date: new Date(2012, 11, 12) },
			{ title: 'Second Post', date: new Date(2013, 0, 10) }
		];
		$scope.addNewPost = function() {
			$scope.posts.push({ title: 'Test ' + $scope.posts.length, date: new Date() });
		};
	};
	</script>
</body>

{{post.title}} at {{post.date | date}}

Services and DI

A "service" is basically a JavaScript object containing reusable functionality
Several come with Angular (eg. AJAX)
- All built-in services are prefixed with $ (eg. $http)
Dependency injection makes unit testing easier

To use:

var services = angular.module('myApp.services', []);
services.factory('helloWorldService', function() { ... });

Add dependencies to controller constructor:

var BlahController = function($scope, $http, helloWorldService) {

Custom Directives

Let you extend HTML with your own stuff. Teach HTML new tricks.

New tags and new attributes
Lets you easily reuse functionality
Can help keep your HTML simple
Helpful for controls

Click to Edit

Without directives

<div ng-hide="editorEnabled">
	<p ng-click="editorEnabled = true">
		{{title}}
	</p>
</div>

<div ng-show="editorEnabled">
	<form ng-submit="editorEnabled = false">
		<input type="text" ng-model="title" />
		<input type="submit" value="Save" />
	</form>
</div>

Click to Edit

With directives

var module = angular
	.module('myApp', [])
	.directive('clickToEdit', function () {
		return {
			restrict: 'E', // This directive applies to Elements
			scope: {
				text: '@'    // Pass text attribute into scope
			},
			link: function (scope, element, attrs) {
				scope.editorEnabled = false;
			},
			template: 
'<div ng-hide="editorEnabled"><p ng-click="editorEnabled = true">{{text}}</p></div>'+
'<div ng-show="editorEnabled">'+
'<form ng-submit="editorEnabled = false">'+
	'<input type="text" ng-model="text" size="100">'+
	'<input type="submit" value="Save">'+
'</form>'+
'</div>'
		}
	});

<click-to-edit text="Hello World" />

AngularJS

HTML enhanced for modern web apps

"Regular" HTML+JS

AngularJS

AngularJS

Components

Basic Angular

1 + 2 = {{ 1 + 2 }}

Two-way binding

Controllers

$scope

Controllers

ng-repeat

Services and DI

Custom Directives

Click to Edit

Click to Edit

And more...

Demo