Angular JS
John-Philip Johansson
Presented at Uppsala.js on 5/3-2015
John-Philp "JP" Johansson
UX Developer @ Avanade
Worked with video games, online videos, ecommerce, apps, websites, etc.
<3 code
Website: johansson.jp
A(ng)ular JS
Disclaimers:
A(ng)ular JS
I'm not dissing jQuery.
I'm just comparing to it.
React, Ember, etc are all fine options too.
The code is simplified for readability,
don't take it as best practice.
What Angular is
Demos
A(ng)ular JS
Thinking Angular
Getting started
Learn more
A(ng)ular JS
What is Angular?
A(ng)ular JS
<>
I hereby declare AngularJS to be MVW framework - Model-View-Whatever
/ Igor Minar, Angular-team
A(ng)ular JS
Big framework - lot's to learn
Not jQuery - different way of thinking
Testable - SOC, IOC, TDD, ETC.
A(ng)ular JS
A(ng)ular JS
How to think in Angular?
- Fetch input-element
- Attach event-listener
- Update JS-variable on event
- Fetch output-element
- Set contents to variable
A(ng)ular JS
How it used to be (e.g. jQuery)
jQuery
$('#firstName, #lastName').on('change', function(){
var firstName = $('#firstName').val();
var lastName = $('#lastName').val();
var fullNameTag= $('#fullName');
var fullName = firstName + ' ' + lastName;
fullNameTag.val(fullName);
};A(ng)ular JS
<input type="text" id="firstName">
<input type="text" id="lastName">
<input type="text" id="fullName">- Set model on input element
- Set model on output element
A(ng)ular JS
How it can be (e.g. Angular)
A(ng)ular JS
<input type="text" ng-model="firstName">
<input type="text" ng-model="lastName">
<input type="text" ng-model="firstName + ' ' + lastName">AngularJS
simplified
(no JS needed)
A(ng)ular JS
<div ng-controller="sampleController">
<input type="text" ng-model="firstName">
<input type="text" ng-model="lastName">
<input type="text" ng-model="fullName()">
</div>
angular.module('sampleModule', [])
.controller('sampleController', function($scope) {
$scope.firstName = $scope.lastName = '';
$scope.fullName = function() {
return $scope.firstName + ' ' + $scope.lastName;
};
});AngularJS
normal
jQuery example
"unobtrusive javascript"
A(ng)ular JS
<input type="date" class="date-input" />
<p class="date-validation"></p>
$(function () {
$('.date-input').on('change', function () {
var date = $(this).val();
var isValid = // Do validation
$('.date-validation').text(isValid ? 'Yeah!' : 'Nope...');
});
}); <input type="text" ng-model="date">
<p ng-show="dateValid">Yeah!</p>
<p ng-hide="dateValid">Nope...</p>A(ng)ular JS
Angular example
declarative view
$scope.date = '';
$scope.dateValid = function () {
return // Do validation
};A(ng)ular JS
Angular example
testability
// Controller
$scope.date = '';
$scope.dateValid = DateUtils.validate($scope.date);
// Service
validate = function (date) {
return // Do validation
}
// Unit-test
var validDate = '1981-09-22';
var validation = DateUtils.validate(validDate);
expect(validation).toBe(true);
// End-to-end tests
expect(element(by... you get the pointjQuery + Angular ?
Smart move by the ng-team
But don't do it
(Especially because of 2.0)
A(ng)ular JS
How to get started?
A(ng)ular JS
<!-- reference AngularJS -->
<script src="js/vendor/Angular.js"></script><!-- ng-app attribute -->
<body ng-app="myAngularApp">A(ng)ular JS
Easy check to see if it works
<h1> Hello {{ 1 + 1 }} you</h1>A(ng)ular JS
Controller
angular.module('myAngularApp', [])
.controller('myController', function ($scope) {
$scope.message = 'This is a message from myController';
});
<div ng-controller="myController">
<!-- This is the domain of myController -->
<p> {{ message }} </p>
</div>A(ng)ular JS
Controller as
angular.module('myAngularApp', [])
.controller('myController', function () {
var vm = this;
vm.message = 'This is a message from myController';
});
<div ng-controller="myController as my">
<!-- This is the domain of myController -->
<p> {{ my.message }} </p>
</div>A(ng)ular JS
$scope
"Scope is the glue between application controller and the view."
...but prefer "controller as"
A(ng)ular JS
Service
Loose coupling
SOC
angular.module('myAngularApp', [])
.controller('myController', function ($scope, gameService) {
$scope.games = gameService.getGames();
});A(ng)ular JS
"Borde inte någon ha tänkt på detta?"
A(ng)ular JS
("Shouldn't someone already thought of this?")
/ Martin, quoting me
Directive
Think web components
Reusability
<my-shared-table></my-shared-table>(replace Controllers with Directives for 2.0)
A(ng)ular JS
Testing
E2E-test with Protractor
Unit-test with Jasmine/Karma
Mocking with ngMock
A(ng)ular JS
(try my apiMock for fast prototyping)
ng-Animate
ng-Route
ng-Touch
Angular is getting more modular for every version
A(ng)ular JS
DEMO(s)
A(ng)ular JS
Learn more
A(ng)ular JS
A(ng)ular JS
Questions?
Thanks!
http://johansson.jp
A(ng)ular JS
Y NG? (updated)
By John-Philip Johansson
Y NG? (updated)
Presentation on Angular. Given sporadically after 5/3-2015.
- 1,432
