ViewModels/Views

• Really simple templating to bind your markup to data
• An easy separation of concerns between logic and display

Markup

<div class="_angularOverview" ng-controller="naiveController as vm">
	<p><span class="label">Controller Text:</span> {{vm.text}}</p>
	<ul>
		<li ng-repeat="int in vm.ints track by $index">{{int}}</li>
	</ul>
</div>

Javascript

angular.module("angularOverview").controller('naiveController', function(){
	var vm = this;
	vm.text = 'Hello, World';
	vm.ints = [42,28,15,9,180,99];
});

Two way data Binding

• Makes user input handling super easy
• Allows you to deal with your application code rather than dealing with DOM manipulation

Markup

<div class="_angularOverview" ng-controller="naiveController as vm">
	<div>
		<label for="twoWayText">Input text:</label>
		<input type="text" id="twoWayText" ng-model="vm.text">
	</div>
	<div>
		<label for="arrayBind">Array[2] Value:</label>
		<input type="number" id="arrayBind" ng-model="vm.ints[2]">
	</div>
	<p><span class="label">Controller Text:</span> {{vm.text}}</p>
	<ul>
		<li ng-repeat="int in vm.ints track by $index">{{int}}</li>
	</ul>
</div>

Directives

• Decouples your controller code from the DOM
• Encapsulates repeated Elements/controls across your application

• Say you've got a few places in your app where you show the same thing, rather than copy and pasting the code you can create a reusable component

<div class="_angularOverview" ng-controller="naiveController as vm">
	<div>
		<label for="twoWayText">Input text:</label>
		<input type="text" id="twoWayText" ng-model="vm.text">
	</div>
	<div>
		<label for="arrayBind">Array[2] Value:</label>
		<input type="number" id="arrayBind" ng-model="vm.ints[2]">
	</div>
	<p><span class="label">Controller Text:</span> {{vm.text}}</p>
	<list-numbers numbers="vm.ints"></list-numbers>
</div>

angular.module("angularOverview").directive('listNumbers', function () {
	return {
		restrict: 'E',
		scope: {
			numbers: '='
		},
		template:'<ul><li ng-repeat="int in numbers">{{int}}</li></ul>'
	};
});

Services/Factories

• Increases encapsulation
• allows your controllers/viewmodels to remain light
• Aids code reuse

Dependency Injection

• Built in to angular
• Increases ease of unit testing
• Makes following the SRP super simple

• Do we need to give a quick overview of DI/IoC here?
• this could be a talk in and of its own

angular.module("angularOverview").controller('diController', function(IntegralService){
	var vm = this;
	vm.text = 'Hello, World';
	vm.ints = IntegralService.getSomeInts();
});

angular.module("angularOverview").factory('IntegralService', function () {
	return {
		getSomeInts: getSomeInts
	};

	function getSomeInts(){
		return [42,28,15,9,180,99];
	}
});

Modules

• Every app in angular is a module
• Modules can be injected into each other
• Allows for common libraries to be built and passed around
• Combined with a model oriented architecture, allows switching on and off of application functionality

Promises

• Helps avoid the pyramid of doom
• Makes async code a little nicer
• Gives explicit error handling for callbacks

Some Included Helpers

• $http
• $resource
• $filter
• $route