About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders...
Transcript of About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders...
![Page 1: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/1.jpg)
About AngularJSLet’s talk about what it is
![Page 2: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/2.jpg)
But first…Who am I?
![Page 3: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/3.jpg)
Anders SkarbyIndepedant Software Developer / Consultant
My own co-owned company - Innotech Solutions ApS Tweet at @askarby - E-mail me at [email protected]
![Page 4: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/4.jpg)
Tonights Plan
• 17:00’ish - Presentation and Live Coding
• 18:00’ish - Sandwishes and stretching your legs
• 18:15’ish - Finishing the presentation, and questions
• 19:00’ish - Goodbye (and thanks for all the fish)
![Page 5: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/5.jpg)
What is AngularJSDoes anyone have any ideas?
![Page 6: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/6.jpg)
ModularBut not at runtime
![Page 7: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/7.jpg)
MVCModel View Controller
![Page 8: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/8.jpg)
Dependency InjectionAsk for dependencies, don’t create them
![Page 9: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/9.jpg)
TestabilityWe don’t get payed to test, we get payed for quality
![Page 10: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/10.jpg)
ProductivityIt’s what it’s all about!
![Page 11: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/11.jpg)
Controllers and Binding
In AngularJS
![Page 12: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/12.jpg)
Three TermsThat all you need know to comprehend AngularJS
![Page 13: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/13.jpg)
Model
![Page 14: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/14.jpg)
ViewIn AngularJS it’s called provided via a Template
![Page 15: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/15.jpg)
Controller
![Page 16: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/16.jpg)
ScopeThe glue between the Model / Controller and the View
![Page 17: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/17.jpg)
Template, View and ModelHow they work together to provide Data binding
![Page 18: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/18.jpg)
Data Binding ExampleIt’s easier than you think
![Page 19: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/19.jpg)
function MyController($scope) { $scope.name = 'Anders'; }
<div>{{name}}</div>
Controller Template
![Page 20: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/20.jpg)
Services‘cause Controllers won’t suffice for everything
![Page 21: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/21.jpg)
Various kindsAll singletons, but their constructs are different
![Page 22: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/22.jpg)
FactoryYou instantiate what you want - yourself.
module.factory('user', function(){ var svc = {}; svc.create = function () { … }; svc.remove = function () { … }; return svc; });
![Page 23: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/23.jpg)
ServiceYou provide behavior for the construct
module.service('user', function(){ this.create = function () { … }; this.remove = function () { … }; });
![Page 24: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/24.jpg)
ProviderA configurable factory
module.provider('user', function() { var replicateToBackend = false;
this.setReplicateToBackend = function () { ... };
this.$get = function () { ... same as factory }; });
![Page 25: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/25.jpg)
Honerable mentionswe won’t forget about values and constants
![Page 26: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/26.jpg)
SingletonsThey all create a single instance that is shared across all
injections to eg. Controllers
![Page 27: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/27.jpg)
FiltersA badly named construct
![Page 28: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/28.jpg)
Able to modify content
![Page 29: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/29.jpg)
Build in filters• filter
• currency
• number
• date
• json
• lowercase
• uppercase
• limitTo
• orderBy
![Page 30: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/30.jpg)
Easy to use
<div>{{name | uppercase}}</div>
![Page 31: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/31.jpg)
They also take arguments
<ul> <li ng-repeat="name in names | filter: 'a'"></li> </ul>
![Page 32: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/32.jpg)
Custom Filtersmodule.filter('reverseArray', function () { return function (input, limit) { input = angular.copy(input); if (angular.isArray(input)) { input.reverse(); if (limit) { input = input.slice(0, limit); } } return input; }; });
![Page 33: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/33.jpg)
DirectivesAdding functionality to markup
![Page 34: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/34.jpg)
Everything is a directiveWe’ve seen a few already
![Page 35: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/35.jpg)
Examples we’ve seen
• ngApp
• ngBind - seen as {{ … }}
• ngModel
• ngRepeat
![Page 36: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/36.jpg)
Create your ownLeads to reusable components
![Page 37: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/37.jpg)
Naming conventionHTML is case-insensitive, JavaScript is not
![Page 38: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/38.jpg)
Example
module.directive('gnHello', function () { return { restrict: 'E', scope: { name: '=', }, template: '<div>Hello {{name}}</div>' }; });
<div> <input ng-model="firstname"> <gn-hello name="firstname"></gn-hello> </div>
Directive Usage
![Page 39: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/39.jpg)
TestingA way to improve the quality of your delivery
![Page 40: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/40.jpg)
Two kinds of testsWell, that we’re going to talk about
![Page 41: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/41.jpg)
Unit tests
• They test a single unit of code
• Are fast (nano - milliseconds to execute)
• Easy to write
• Mocks are used to separate from dependencies
![Page 42: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/42.jpg)
Unit tests• They are executed (in the AngularJS world) through
Karma (a test runner)
• Jasmine is the default test / mocking framework (spec based)
• It can be replaced with other frameworks, such as CucumberJS, Mocha, etc.
• Should be run repeatedly (through grunt / gulp) on every code change
![Page 43: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/43.jpg)
Unit test exampledescribe('PasswordController', function() { beforeEach(module('app'));
var $controller;
beforeEach(inject(function(_$controller_){ // The injector unwraps the underscores (_) from around the parameter names when matching $controller = _$controller_; }));
describe('$scope.grade', function() { it('sets the strength to "strong" if the password length is >8 chars', function() { var $scope = {}; var controller = $controller('PasswordController', { $scope: $scope }); $scope.password = 'longerthaneightchars'; $scope.grade(); expect($scope.strength).toEqual('strong'); }); }); });
![Page 44: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/44.jpg)
End-to-end tests• Test the entire application
• From the browser, to the backend
• Slower (seconds - minutes to execute)
• Behaviour is tested
• Must have a full setup, cannot mock
• Need a predictable data set / setup
![Page 45: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/45.jpg)
End-to-end tests
• They are executed (in the AngularJS world) through the Protractor test framework.
• Executed in real browsers
• Using web driver
• Has extended selectors to select based on AngularJS constructs
![Page 46: About AngularJS - GOTO Conferencegotocon.com/dl/2015/GOTO Night 03-03-15.pdf2003/03/15 · Anders Skarby Indepedant Software Developer / Consultant My own co-owned company - Innotech](https://reader034.fdocuments.in/reader034/viewer/2022042314/5ee117fead6a402d666c197a/html5/thumbnails/46.jpg)
End-to-end test example
describe('angularjs homepage todo list', function() { it('should add a todo', function() { browser.get('http://www.angularjs.org');
element(by.model('todoText')).sendKeys('write a protractor test'); element(by.css('[value="add"]')).click();
var todoList = element.all(by.repeater('todo in todos')); expect(todoList.count()).toEqual(3); expect(todoList.get(2).getText()).toEqual('write a protractor test'); }); });