An intro to AngularJS and some experiences of using it to build https://starthq.com

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