angularjs - the folly of choice

communityjs.org

StartHQ

Toolkits vs. Frameworks

Toolkits vs. Frameworks

● Toolkit: collection of libraries

some assembly required

● Libraries should “do one thing and do it well”

● Inversion of control

You call a library, but a framework calls you

A Bit of History

AngularJS

AngularJS

● What HTML would have been, had it been designed for building web apps

● 80% of code deals with manipulating the DOM

AngularJS makes this go away

● Definitely a standalone framework

modules, templating, dependency injection, events, services, promises, testing, directives, http, interceptors, history

Key Features

Key Features

● Declarative – not imperative

Two way data binding

● Doesn't abstract away the DOM

Augments it with directives

● More than one way to do the same thing

Scopes

Scopes

• creating a scope & controller$rootScope

• prototypal inheritance

• scope attributes & methods

• importance of the dot

Templates

Templates

• Interpolationng-directive alternative

• ng-show, ng-hideng-cloak

• ng-repeat<li ng-repeat=”item in items”>{{item.name}}</li>

• logic can be templates

Modules

Modules

var app = angular.module('app', [/* deps */]) .config([..., function() {}]) .run([..., function() {}]);

• convenience methodscontroller, directive, filter, value, factory, provider

ngmodules.org

Dependency Injection

Dependency Injection

• inversion of control, removal of global state– Important for testing

• function TodoCtrl($scope) {}

• app.controller('TodoCtrl', ['$scope', function() {}]);

Views

Views

• ng-view

• ng-include src="'/navbar.html'"

Routing

Routing

$locationProvider.html5Mode(true);$routeProvider.when('/config', { templateUrl:'/views/config.html', controller:'Config'});

$routeProvider.otherwise({ redirectTo:'/' });

Directives

Directives

app.directive('ngLoad', function() { return function($scope, element) { });

• wrapping jQuery plugins$scope.watch, $scope.apply

• web components

Other Tools

Other Tools

• Services$http, $location

• Events

• Filters

• Promises

$q

Testing

Testing

• Unit tests

• End to end tests

• angular-seed project

• Karma test runner

Study Material

Study Material

docs.angular.org/tutorial

www.egghead.io

www.youtube.com/user/angularjs

github.com/olegp/nexus

Conclusion

Thank you!

@olegpodsechin

github.com/olegp

starthq.com