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
$('#myButton').click(function(){
var firstName = $('#firstName').val();
var lastName = $('#lastName').val();
var fullNameTag= $('#fullName');
var fullName = firstName + ' ' + lastName;
fullNameTag.val(fullName);
};
A(ng)ular JS
(not showing HTML to save space)
- Set model on input element
- Set model on output element
A(ng)ular JS
How it can be (e.g. Angular)
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
$scope
"Scope is the glue between application controller and the view."
Two ways to bind to $scope
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? (Uppsala.js)
By John-Philip Johansson
Y NG? (Uppsala.js)
Presentation on Angular. Given at Uppsala.js on 5/3 2015.
- 1,410
