Angular.js - JS Camp UKraine 2013

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

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