Toolkits provide libraries that require assembly, while frameworks call the developer. AngularJS was designed to remove DOM manipulation code, using declarative templates and two-way binding instead of imperative code. It features scopes, modules, dependency injection, routing, directives, services, events, filters and promises to build web apps. Testing is important with AngularJS's inversion of control and removal of global state.

2. communityjs.org

3. StartHQ

4. Toolkits vs. Frameworks

7. 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

8. A Bit of History

12. AngularJS

14. 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

15. Key Features

17. 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

18. Scopes

20. Scopes
• creating a scope & controller
$rootScope
• prototypal inheritance
• scope attributes & methods
• importance of the dot

21. Templates

23. Templates
• Interpolation
ng-directive alternative
• ng-show, ng-hide
ng-cloak
• ng-repeat
<li ng-repeat=”item in items”>{{item.name}}</li>
• logic can be templates

24. Modules

26. Modules
var app = angular.module('app', [/* deps */])
.config([..., function() {}])
.run([..., function() {}]);
• convenience methods
controller, directive, filter, value, factory, provider
ngmodules.org

27. Dependency Injection

29. Dependency Injection
• inversion of control, removal of global state
– Important for testing
• function TodoCtrl($scope) {}
• app.controller('TodoCtrl',
['$scope', function() {}]);

30. Views

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

33. Routing

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

36. Directives

38. Directives
app.directive('ngLoad', function() {
return function($scope, element) {
});
• wrapping jQuery plugins
$scope.watch, $scope.apply
• web components

39. Other Tools

41. Other Tools
• Services
$http, $location
• Events
• Filters
• Promises
$q

42. Testing

44. Testing
• Unit tests
• End to end tests
• angular-seed project
• Karma test runner

45. Study Material

47. Study Material
docs.angular.org/tutorial
www.egghead.io
www.youtube.com/user/angularjs
github.com/olegp/nexus

49. Conclusion

51. Thank you!
@olegpodsechin
github.com/olegp
starthq.com