angularjs - the folly of choice
DESCRIPTION
An intro to AngularJS and some experiences of using it to build https://starthq.comTRANSCRIPT
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