This document provides an overview of the AngularJS JavaScript framework. It discusses what AngularJS is, how it works, and its benefits. AngularJS is an MVC framework built by Google for building user interfaces with declarative programming and two-way data binding. It allows creating reusable components with directives and provides services for common tasks like data binding, dependency injection and RESTful APIs. The document highlights how AngularJS enables rapid prototyping, has a large community and structured codebase which can help startups build fast prototypes and robust solutions.

1. AngularJS
Superheroic JavaScript Framework
Friday, February 22, 13

2. Maksym
Klymyshyn
CTO at GVMachines Inc.
(Zakaz.ua)
@maxmaxmaxmax
Friday, February 22, 13

3. Background
• Lead both-end developer @oDesk Inc.
• Front-end consultant @Helios
• OpenSource contributor
• Conferences organizer
Friday, February 22, 13

4. Now
• Doesn’t work with front-end 6+ month
• Never used AngularJS on production
• Understand VALUE of AngularJS for
business
Friday, February 22, 13

5. Friday, February 22, 13

6. Toc
• What is AngularJS
• Technical details
• Numbers and value for business
owners
Friday, February 22, 13

7. AngularJS?
Friday, February 22, 13

8. What is it?
MVC framework by Google
built around belief that
declarative programming for building UIs,
while imperative programming is excellent
for expressing business logic
Friday, February 22, 13

9. Author
• Originally written
by Misko Hevery
• Created at Google
as internal project
Friday, February 22, 13

10. Key points
• 2-way data binding
• dependency injection
• directives (custom tags and attrs)
• Form validation
• RESTful
• Binders, watches, events etc.
Friday, February 22, 13

11. Difference
• Lack of boilerplate code
• Easy-to-create reusable components
• Dead simple templates, no way to put
business logic
• Simple support of UI consistency
• All-in-one solution
Friday, February 22, 13

12. It fits well
• CRUD applications
• CRMs, Admin-panels
• Single-page apps
• Push-notification-based apps
• Mobile apps
Friday, February 22, 13

13. That won’t fly
On Jun 8, 4:34 am, ganaraj p r <ganara...@gmail.com>
wrote:
> There should be some generic set of apps
> for which angular would be
> considered the wrong choice?
>
> Anyone figured out what set this would be?
Good: Gmail
Bad: Wikipedia
Friday, February 22, 13

14. Definitely not the first tool
to develop a game
Friday, February 22, 13

15. Technical details
Friday, February 22, 13

16. Bootstrap
$ yeoman init angular
$ ls
Gruntfile.js! ! test app
testacular.conf.js package.json
Friday, February 22, 13

17. Bootstrap
Structure
app/views
app/scripts/vendor
app/scripts/controllers/
app/scripts/app.js
app/index.html
Server
$ yeoman server
Friday, February 22, 13

18. Friday, February 22, 13

19. Architecture
Friday, February 22, 13

20. Architecture
Friday, February 22, 13

21. Typical app
Friday, February 22, 13

22. Major parts
• Scope • Filters
• Model • Module
• View • Injector
• Controller • Services
• Directive
Friday, February 22, 13

23. Scope
The scope detecting changes to the model
section and provides the execution context
for expressions.
• Provide context for • Isolated scopes (for
expressions widgets)
• Scopes are hierarchical • Watches
nested
Friday, February 22, 13

24. Scope
Friday, February 22, 13

25. Model
Model is view’s data.
No requirements. No restrictions
Friday, February 22, 13

26. Model
Controller:
$scope.data = {
title: “Test title”,
id: 1,
content: “Some content”
};
View:
<div id=”{{ data.id }}”>
<h1>{{ data.title }}</h1>
<p>{{ data.content }}</p>
</div>
Friday, February 22, 13

27. AWESOME
Friday, February 22, 13

28. View
• View looks like template
• It’s declarative
• Very close to HTML markup
• It handle directives
• Update DOM partially
Friday, February 22, 13

29. View
$scope.content = [
“paragraph 1”, “paragraph 2”,
“paragraph 3”
];
<div ng-repeat=”p in content”>
<p>{{ p }}</p>
</div>
Friday, February 22, 13

30. View
Friday, February 22, 13

31. Controller
JavaScript code behind the view
• Manage application behavior
• Support of many views, for example
desktop and mobile versions with
different views but same controller
Friday, February 22, 13

32. Controller
MyModule.controller('MainCtrl', [
"$scope", function($scope) {
$scope.name = "Max";
$scope.content = [
"paragraph 1", "paragraph 2",
"paragraph 3"
];
}]);
Friday, February 22, 13

33. Directive
Directive is a behavior or
DOM transformation
• Provide ability to extend HTML
• Custom tags, attributes or classes
• Bi-directional binding of nested scopes
• Async directives processing
Friday, February 22, 13

34. Directive
MyApp.directive('message',
function factory() {
return {
template: '<div class="msg" ng-transclude>’ +
‘</div>',
replace: true, // replace original tag
transclude: true, // put content to template
// Element, possible Attr, Class, coMment
restrict: 'E'
};
});
Friday, February 22, 13

35. Filters
Perform data transformation
• Very useful with locales
• Number formatters, text highlighting
and so on
Friday, February 22, 13

36. Filters
MyApp.filter('title',
function factory() {
return function (input) {
var ch = input.substring(0, 1);
var rest = input.substring(1, input.length);
return ch.toUpperCase () + rest;
};
});
Friday, February 22, 13

37. Module
Services, directives, filters,
and configuration
var MyApp = angular.module('MyApp', [])
.config([
'$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
}).otherwise({
redirectTo: '/'
});
}]);
Friday, February 22, 13

38. Injector
Service locator,
Dependency Injection pattern
Friday, February 22, 13

39. Why? Minification
$ yeoman build
...
# Error: Unknown provider:
aProvider <- a
Wrong
... 'MainCtrl', function($scope) { ...
Correct
... 'MainCtrl', ["$scope", function($scope) { ...
Friday, February 22, 13

40. Services
• $compile - dynamic views compilation
from string
• $cookies - read/write cookies
• $locatoin - work with browser’s
location
• $resource - factory to work with third-
party services/REST
Friday, February 22, 13

41. Toolchain
• End-to-end - e2e testing, similar to
Jasmine
• Yeoman - dev & build server, projects
skeleton
• Batarang - plugin for Chrome
• Testicular - tests framework
Friday, February 22, 13

42. Third-party apps
• Angular-UI
• Anglebars.js
• jQuery mobile +
Angular.js
• ngGrid
Friday, February 22, 13

43. Show me the money
Friday, February 22, 13

44. Rapid prototyping
• No boilerplate code === less code to
maintain
• Simple tests suite === more motivation
to write more tests
• Two-way data binding === easy to
develop push-based services, like
PBX<->CRM, chats, notifications etc.
Friday, February 22, 13

45. Structured by design
• Well structured codebase by design
• Easy-to-understand templates
• Fast and maintainable prototypes may
become fast hypothesis check and
robust solution. Recommended for
startups
Friday, February 22, 13

46. Community
• 7001 followers on • 9371 followers on
github twitter
• 1158 forks! • 316 videos on YouTube
• 1619 closed issues • 127 presentations on
SlideShare
• 391 open issues
Friday, February 22, 13

47. AWESOME
Text
Friday, February 22, 13

48. Thanks. Questions?
Friday, February 22, 13