Escolar Documentos
Profissional Documentos
Cultura Documentos
Keith Bloomfield
Lead Developer
dev9
Crash Course
Keith Bloomfield
Lead Developer
dev9
Show of Hands
Front-end developers?
Back-end developers?
Other?
Using AngularJs at work/home?
New to AngularJs?
Crash Course
Agenda
Overview
Data Binding, Expressions, Scopes,
Ng Directives
Modules, Dependency Injection
Controllers, Services, Factories, Directives
Unit Testing
End-to-End (e2e) Testing
Continuous Integration
Real World Experiences
Tool Support
Resources for Learning
Q&A
Overview
Manicure/Pedicure
Body/Facial Treatment
Massage
Overview
Overview
Don't
know about
each other.
Overview
Overview
Implications:
Routing
History
Caching
Packaging
Deployment
Automation
Data Binding
Object Modeling
Timing/Dispatch
Templating
Testing
Storage
...
AngularJs
Overview
What becomes
of this?
Overview
Model-View-Whatever (Mvw)
The View
foo.html
Templates/Partials
Html content swapped into/out of the single page
d.html
my-app.html
my-header.html
my-cart.html
a2.html
a2.html
a1.html a3.html
b1.html b2.html
b3.html
c2.html
bn.html
c1.html
my-news.html
my-tools.html
my-mail.html
<!DOCTYPE html>
<html ng-app>
<head>
<title>echo</title>
</head>
<body>
<div class="container">
auto-bootstraps the
AngularJs application/
The compilation is a process
designates the root
Angular (ng)
of walking the DOM tree and
element.
binds
input, select, textarea
to a DOM elements to
Directives
matching
property on the scope using
ng-model
directives.
(NgModelController), and more. (links scope to template)
Data Binding
Evaluated
against
Expression
the scope.
$scope
$scope
$scope
Dependency Injection
Module
Dependency Injection
Module
Dependency Injection
Module
Dependency Injection
$provide
- Object in module auto
auto
- Implicit module which gets automatically added to each $injector
$injector
- used to retrieve object instances as defined by provider, instantiate types,
invoke methods, and load modules.
Dependency Injection
$provide
- Helper methods (also exposed on module):
Dependency Injection
$provide
- Helper methods (also exposed on module):
Dependency Injection
Minified:
a.controller(AController, function(b, c){
b.userName = 'Walt';
b.foo = c.get('http://foo.com');
});
OH NO!
Dependency Injection
Minified:
Order matters
Dependency Injection
into this
angular.module('whatever').controller('MyCtrl', ['$scope', '$http', function ($scope, $http) { ... }]);
Controllers
app.controller('HomeController', function($scope){
$scope.pizzas = [
{
name: "Meat Lover's",
ingredients: ['Sausage','Pepperoni','Bacon','Olives'],
price: 6
},
{
name: 'Hawaiian',
ingredients: ['Canadian bacon','Pineapple'],
price: 5
},
];
});
<html ng-app="pizza-shop">
<head></head>
<body ng-controller="HomeController">
<div class="container">
<header ng-include="'templates/header.html'">
</header>
<h2>Our Pizzas:</h2>
<div ng-repeat="pizza in pizzas">
<h3>{{ pizza.name }}</h3>
...
!Controllers
Format input
- Use angular form controls instead: https://docs.angularjs.org/guide/forms
Filter output
- Use angular filters instead: https://docs.angularjs.org/guide/filter
Services
service(class) - registers a constructor function, class that will be
wrapped in a service provider object, whose $get property will
instantiate a new object using the given constructor function.
Factories
factory(fn) - registers a service factory function, fn, that will be wrapped in
a service provider object, whose $get property will contain the given
factory function.
service
module.service('MyService', function() {
this.method1 = function() {
//..
}
factory
module.factory('MyService', function() {
var factory = {};
factory.method1 = function() {
//..
}
this.method2 = function() {
//..
}
});
factory.method2 = function() {
//..
}
return factory;
});
Factory(give it a function)
Service(give it a constructor)
Directives
Isolate Scope: Directive-specific scope
Directives
Directive Definition Options: Instructions to the ng compiler
app
.controller("myController", function($scope){
$scope.doSomething = function(something){...};
})
.directive('myDirective', function () {
return {
restrict: "E",
priority:sort order before compilation,
terminal: if true, process this directive last,
scope: true, false, or {} (isolate)
controller: instantiate before pre-linking phase...,
require:..another directive and inject its controller...
controllerAs:controller alias at the directive scope...
type: doctype ('html','svg','math'),
template:replace current element with....
templateUrl: same as above, but async from url...
replace: where to insert template...,
transclude: precompile element.....,
compile: transform template Dom...,
link: update Dom, register listeners...,
}
restrict:
matching restriction
options:
'A' - only matches attribute name
'E' - only matches element name
'C' - only matches class name
'M' - only matches comment
or any combination.
(eg: 'AE')
default: 'A'
Directives
Directive Definition Options: Instructions to the
compiler
app
.controller("myController", function($scope){
$scope.doSomething = function(something){...};
})
.directive('myDirective', function () {
Deferring to api:
restrict: "E",
https://docs.angularjs.org/api/ng/service/
priority:sort order before compilation,
terminal: if true, process this directive last,
$compile#description_comprehensive-directivescope: true, false, or {} (isolate)
controller: instantiate
before pre-linking phase...,
api_directive-definition-object
return {
Unit Testing
Karma
Remote control
Open Source
Protractor
Protractor
(Optional) Tap into webdriver.js:
var flow = browser.driver.controlFlow();
// pseudocode
login = function(username){...}
navigateToReviews = function(){...}
addNewReview = function(){...}
flow.execute(login('Walt'));
flow.execute(navigateToReviews);
flow.execute(addNewReview);
Continuous Integration
Front-end veterans
New conventions, structures, design patterns (not just jquery, js, css any more)
More responsibility for application architecture
Back-end veterans
Javascript as the primary language (callbacks, promises, debugging, refactoring..)
UX, responsive
Coordination with rest apis and content delivery service
Library/dependency bloat
Vim, SublimeText
Netbeans
Visual Studio
Behold the
Plug-Ins!
JsHint: http://www.jshint.com/
grunt-contrib-jshint:
https://github.com/gruntjs/grunt-contrib-jshint
Customizable
reporter output,
Protractor
(none, lots of unit tests, REST apis covered on their end)
stackoverflow
angularjs.org
Q&A