Angular.js - JS Camp UKraine 2013

AngularJS
Superheroic JavaScript Framework

Friday, February 22, 13

Maksym
Klymyshyn
CTO at GVMachines Inc.
(Zakaz.ua)

@maxmaxmaxmax


Background

• Lead both-end developer @oDesk Inc.
• Front-end consultant @Helios
• OpenSource contributor
• Conferences organizer


Now

• Doesn’t work with front-end 6+ month
• Never used AngularJS on production
• Understand VALUE of AngularJS for
business


Toc

• What is AngularJS
• Technical details
• Numbers and value for business
owners


AngularJS?


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


Author

• Originally written
by Misko Hevery

• Created at Google
as internal project


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


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


It ﬁts well

• CRUD applications
• CRMs, Admin-panels
• Single-page apps
• Push-notiﬁcation-based apps
• Mobile apps


That won’t ﬂy
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


Deﬁnitely not the ﬁrst tool
to develop a game

Technical details


Bootstrap

$ yeoman init angular
$ ls
Gruntfile.js! ! test app
testacular.conf.js package.json


Bootstrap
Structure
app/views
app/scripts/vendor
app/scripts/controllers/
app/scripts/app.js

app/index.html

Server
$ yeoman server


Architecture


Typical app


Major parts

• Scope • Filters

• Model • Module

• View • Injector

• Controller • Services

• Directive


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


Scope


Model

Model is view’s data.
No requirements. No restrictions


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>


AWESOME


View

• View looks like template
• It’s declarative
• Very close to HTML markup
• It handle directives
• Update DOM partially


View

$scope.content = [
“paragraph 1”, “paragraph 2”,
“paragraph 3”
];

<div ng-repeat=”p in content”>
<p>{{ p }}</p>
</div>


View


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


Controller

MyModule.controller('MainCtrl', [
"$scope", function($scope) {

$scope.name = "Max";
$scope.content = [
"paragraph 1", "paragraph 2",
"paragraph 3"
];
}]);


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


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'
};
});


Filters

Perform data transformation

• Very useful with locales
• Number formatters, text highlighting
and so on


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;
};
});


Module
Services, directives, ﬁlters,
and conﬁguration

var MyApp = angular.module('MyApp', [])
.config([
'$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
}).otherwise({
redirectTo: '/'
});
}]);

Injector
Service locator,
Dependency Injection pattern


Why? Miniﬁcation
$ yeoman build
...
# Error: Unknown provider:
aProvider <- a

Wrong
... 'MainCtrl', function($scope) { ...

Correct
... 'MainCtrl', ["$scope", function($scope) { ...


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


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


Third-party apps

• Angular-UI

• Anglebars.js

• jQuery mobile +
Angular.js

• ngGrid


Show me the money


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, notiﬁcations etc.


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


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


AWESOME

Text


Thanks. Questions?


Angular.js - JS Camp UKraine 2013

Recommended

More Related Content

What's hot (20)

Similar to Angular.js - JS Camp UKraine 2013 (20)

More from Max Klymyshyn (20)

Angular.js - JS Camp UKraine 2013