AngularJSSuperheroic JavaScript Framework
Friday, February 22, 13
Maksym Klymyshyn
CTO at GVMachines Inc.(Zakaz.ua)
@maxmaxmaxmax
Friday, February 22, 13
Background
• Lead both-end developer @oDesk Inc.
• Front-end consultant @Helios
• OpenSource contributor
• Conferences organizer
Friday, February 22, 13
Now
• Doesn’t work with front-end 6+ month
• Never used AngularJS on production
• Understand VALUE of AngularJS for business
Friday, February 22, 13
Friday, February 22, 13
Toc
• What is AngularJS
• Technical details
• Numbers and value for business owners
Friday, February 22, 13
AngularJS?
Friday, February 22, 13
What is it?
MVC framework by Googlebuilt around belief that
declarative programming for building UIs,
while imperative programming is excellent for expressing business logic
Friday, February 22, 13
Author
• Originally written by Misko Hevery
• Created at Google as internal project
Friday, February 22, 13
Key points• 2-way data binding
• dependency injection
• directives (custom tags and attrs)
• Form validation
• RESTful
• Binders, watches, events etc.
Friday, February 22, 13
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
It fits well
• CRUD applications
• CRMs, Admin-panels
• Single-page apps
• Push-notification-based apps
• Mobile apps
Friday, February 22, 13
That won’t fly
On Jun 8, 4:34 am, ganaraj p r <[email protected]> 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
Definitely not the first toolto develop a game
Friday, February 22, 13
Technical details
Friday, February 22, 13
Bootstrap
$ yeoman init angular $ lsGruntfile.js! ! test apptestacular.conf.js package.json
Friday, February 22, 13
Bootstrap
app/viewsapp/scripts/vendorapp/scripts/controllers/app/scripts/app.js
app/index.html
Structure
Server$ yeoman server
Friday, February 22, 13
Friday, February 22, 13
Architecture
Friday, February 22, 13
Architecture
Friday, February 22, 13
Typical app
Friday, February 22, 13
Major parts
• Scope
• Model
• View
• Controller
• Directive
• Filters
• Module
• Injector
• Services
Friday, February 22, 13
Scope
• Provide context for expressions
• Scopes are hierarchical nested
• Isolated scopes (for widgets)
• Watches
The scope detecting changes to the model section and provides the execution context
for expressions.
Friday, February 22, 13
Scope
Friday, February 22, 13
Model
Model is view’s data.No requirements. No restrictions
Friday, February 22, 13
Model
$scope.data = { title: “Test title”, id: 1, content: “Some content”};
<div id=”{{ data.id }}”> <h1>{{ data.title }}</h1> <p>{{ data.content }}</p></div>
Controller:
View:
Friday, February 22, 13
A W E S O M E
Friday, February 22, 13
View
• View looks like template
• It’s declarative
• Very close to HTML markup
• It handle directives
• Update DOM partially
Friday, February 22, 13
View
<div ng-repeat=”p in content”> <p>{{ p }}</p></div>
$scope.content = [ “paragraph 1”, “paragraph 2”, “paragraph 3”];
Friday, February 22, 13
View
Friday, February 22, 13
Controller
• Manage application behavior
• Support of many views, for example desktop and mobile versions with different views but same controller
JavaScript code behind the view
Friday, February 22, 13
Controller
MyModule.controller('MainCtrl', [ "$scope", function($scope) {
$scope.name = "Max"; $scope.content = [ "paragraph 1", "paragraph 2", "paragraph 3" ];}]);
Friday, February 22, 13
Directive
• Provide ability to extend HTML
• Custom tags, attributes or classes
• Bi-directional binding of nested scopes
• Async directives processing
Directive is a behavior orDOM transformation
Friday, February 22, 13
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
Filters
• Very useful with locales
• Number formatters, text highlighting and so on
Perform data transformation
Friday, February 22, 13
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
ModuleServices, 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
InjectorService locator,
Dependency Injection pattern
Friday, February 22, 13
Why? Minification$ yeoman build...# Error: Unknown provider: aProvider <- a
... 'MainCtrl', ["$scope", function($scope) { ...
... 'MainCtrl', function($scope) { ...
Wrong
Correct
Friday, February 22, 13
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
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
Third-party apps
• Angular-UI
• Anglebars.js
• jQuery mobile + Angular.js
• ngGrid
Friday, February 22, 13
Show me the money
Friday, February 22, 13
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
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
Community
• 7001 followers on github
• 1158 forks!
• 1619 closed issues
• 391 open issues
• 9371 followers on twitter
• 316 videos on YouTube
• 127 presentations on SlideShare
Friday, February 22, 13
Text
AWESOME
Friday, February 22, 13
Thanks. Questions?
Friday, February 22, 13