Angular.js - JS Camp UKraine 2013
-
Upload
max-klymyshyn -
Category
Documents
-
view
1.999 -
download
2
description
Transcript of Angular.js - JS Camp UKraine 2013
![Page 1: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/1.jpg)
AngularJSSuperheroic JavaScript Framework
Friday, February 22, 13
![Page 2: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/2.jpg)
Maksym Klymyshyn
CTO at GVMachines Inc.(Zakaz.ua)
@maxmaxmaxmax
Friday, February 22, 13
![Page 3: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/3.jpg)
Background
• Lead both-end developer @oDesk Inc.
• Front-end consultant @Helios
• OpenSource contributor
• Conferences organizer
Friday, February 22, 13
![Page 4: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/4.jpg)
Now
• Doesn’t work with front-end 6+ month
• Never used AngularJS on production
• Understand VALUE of AngularJS for business
Friday, February 22, 13
![Page 5: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/5.jpg)
Friday, February 22, 13
![Page 6: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/6.jpg)
Toc
• What is AngularJS
• Technical details
• Numbers and value for business owners
Friday, February 22, 13
![Page 7: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/7.jpg)
AngularJS?
Friday, February 22, 13
![Page 8: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/8.jpg)
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
![Page 9: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/9.jpg)
Author
• Originally written by Misko Hevery
• Created at Google as internal project
Friday, February 22, 13
![Page 10: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/10.jpg)
Key points• 2-way data binding
• dependency injection
• directives (custom tags and attrs)
• Form validation
• RESTful
• Binders, watches, events etc.
Friday, February 22, 13
![Page 11: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/11.jpg)
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
![Page 12: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/12.jpg)
It fits well
• CRUD applications
• CRMs, Admin-panels
• Single-page apps
• Push-notification-based apps
• Mobile apps
Friday, February 22, 13
![Page 13: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/13.jpg)
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
![Page 14: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/14.jpg)
Definitely not the first toolto develop a game
Friday, February 22, 13
![Page 15: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/15.jpg)
Technical details
Friday, February 22, 13
![Page 16: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/16.jpg)
Bootstrap
$ yeoman init angular $ lsGruntfile.js! ! test apptestacular.conf.js package.json
Friday, February 22, 13
![Page 17: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/17.jpg)
Bootstrap
app/viewsapp/scripts/vendorapp/scripts/controllers/app/scripts/app.js
app/index.html
Structure
Server$ yeoman server
Friday, February 22, 13
![Page 18: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/18.jpg)
Friday, February 22, 13
![Page 19: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/19.jpg)
Architecture
Friday, February 22, 13
![Page 20: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/20.jpg)
Architecture
Friday, February 22, 13
![Page 21: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/21.jpg)
Typical app
Friday, February 22, 13
![Page 22: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/22.jpg)
Major parts
• Scope
• Model
• View
• Controller
• Directive
• Filters
• Module
• Injector
• Services
Friday, February 22, 13
![Page 23: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/23.jpg)
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
![Page 24: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/24.jpg)
Scope
Friday, February 22, 13
![Page 25: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/25.jpg)
Model
Model is view’s data.No requirements. No restrictions
Friday, February 22, 13
![Page 26: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/26.jpg)
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
![Page 27: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/27.jpg)
A W E S O M E
Friday, February 22, 13
![Page 28: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/28.jpg)
View
• View looks like template
• It’s declarative
• Very close to HTML markup
• It handle directives
• Update DOM partially
Friday, February 22, 13
![Page 29: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/29.jpg)
View
<div ng-repeat=”p in content”> <p>{{ p }}</p></div>
$scope.content = [ “paragraph 1”, “paragraph 2”, “paragraph 3”];
Friday, February 22, 13
![Page 30: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/30.jpg)
View
Friday, February 22, 13
![Page 31: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/31.jpg)
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
![Page 32: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/32.jpg)
Controller
MyModule.controller('MainCtrl', [ "$scope", function($scope) {
$scope.name = "Max"; $scope.content = [ "paragraph 1", "paragraph 2", "paragraph 3" ];}]);
Friday, February 22, 13
![Page 33: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/33.jpg)
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
![Page 34: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/34.jpg)
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
![Page 35: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/35.jpg)
Filters
• Very useful with locales
• Number formatters, text highlighting and so on
Perform data transformation
Friday, February 22, 13
![Page 36: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/36.jpg)
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
![Page 37: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/37.jpg)
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
![Page 38: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/38.jpg)
InjectorService locator,
Dependency Injection pattern
Friday, February 22, 13
![Page 39: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/39.jpg)
Why? Minification$ yeoman build...# Error: Unknown provider: aProvider <- a
... 'MainCtrl', ["$scope", function($scope) { ...
... 'MainCtrl', function($scope) { ...
Wrong
Correct
Friday, February 22, 13
![Page 40: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/40.jpg)
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
![Page 41: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/41.jpg)
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
![Page 42: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/42.jpg)
Third-party apps
• Angular-UI
• Anglebars.js
• jQuery mobile + Angular.js
• ngGrid
Friday, February 22, 13
![Page 43: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/43.jpg)
Show me the money
Friday, February 22, 13
![Page 44: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/44.jpg)
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
![Page 45: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/45.jpg)
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
![Page 46: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/46.jpg)
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
![Page 47: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/47.jpg)
Text
AWESOME
Friday, February 22, 13
![Page 48: Angular.js - JS Camp UKraine 2013](https://reader035.fdocuments.us/reader035/viewer/2022081403/554f6dc4b4c9058a148b508c/html5/thumbnails/48.jpg)
Thanks. Questions?
Friday, February 22, 13