Angular.js - JS Camp UKraine 2013

AngularJSSuperheroic 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 Googlebuilt 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 fits well

• CRUD applications

• CRMs, Admin-panels

• Single-page apps

• Push-notification-based apps

• Mobile apps


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


Definitely not the first toolto develop a game


Technical details


Bootstrap

$ yeoman init angular $ lsGruntfile.js! ! test apptestacular.conf.js package.json


Bootstrap

app/viewsapp/scripts/vendorapp/scripts/controllers/app/scripts/app.js

app/index.html

Structure

Server$ yeoman server


Architecture


Typical app


Major parts

• Scope

• Model

• View

• Controller

• Directive

• Filters

• Module

• Injector

• Services


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.


Scope


Model

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


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:


A W E S O M E


View

• View looks like template

• It’s declarative

• Very close to HTML markup

• It handle directives

• Update DOM partially


View

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

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


View


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


Controller

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

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


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


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

• Very useful with locales

• Number formatters, text highlighting and so on

Perform data transformation


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


ModuleServices, directives, filters,

and configuration

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


InjectorService locator,

Dependency Injection pattern


Why? Minification$ yeoman build...# Error: Unknown provider: aProvider <- a

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

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

Wrong

Correct


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, notifications 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 github

• 1158 forks!

• 1619 closed issues

• 391 open issues

• 9371 followers on twitter

• 316 videos on YouTube

• 127 presentations on SlideShare


Text

AWESOME


Thanks. Questions?


Angular.js - JS Camp UKraine 2013

Documents

Transcript of Angular.js - JS Camp UKraine 2013