The document discusses various aspects of single-page applications built with AngularJS including data binding, modules, controllers, directives, services, dependency injection, routing, and events. It provides code examples for defining a module, controller, directive, filter, and service as well as injecting services into controllers and emitting and broadcasting events. The document encourages joining the AngularJS community by testing apps, following style guides, reading publications, and subscribing to newsletters to learn more about building single-page apps with AngularJS.
5. https://single-page.app/#/list What do we expect from a
Search...
+
single-page app?
Reacting fast to user input
Providing comprehensive interactions
Using only one page?
6. https://single-page.app/#/card/one Mission accomplished - NOT!
Card - One...
Templating multiple views
Routing between views
Interacting with server side APIs
Organizing app architecture that scales
Binding & Presenting data
Save
Who cares about...
Caching data
18. Why iife?
script.js
var greet = 'Hi!';
conflict.js
var greet = 'Bye!';
Last man standing
19. Why iife?
script.js
(function () {
'use strict';
var greet = 'Hi!';
})();
conflict.js
(function () {
'use strict';
var greet = 'Bye!';
})();
SAVE
20. Defining a module
angular
.module('app', [
'module',
'feature'
]);
// Name your module...
// … Extend it with
// other modules
21. Defining a controller
angular
.module('app')
.controller('Persons', Persons);
function Persons() {
}
22. Our first directive
angular
.module('app')
.directive('semanticHtml', semanticHtml);
function semanticHtml () {
return {
restrict : 'E | A | C',
template : '<html-template>'
};
}
// Nearly the same like our
// controller, right?
// Watch out!
// Directives return a new
// object literal
23. Even more about directives
function semanticHtml () {
return {
restrict : 'E | A | C',
template : '<html-template>'
templateUrl:
scope:
controller:
link:
};
}
24. Starting with filters
angular
.module('app')
.filter('manipulate', manipulate);
function manipulate() {
return function(input, /* parameters */ ) {
}
}
// Watch out!
// Filters return a function.
25. There are many filters already
implemented
https://github.com/a8m/angular-filter
26. Defining a factory, service,
whatever...
angular
.module('app')
.factory('dataAccess', dataAccess);
function dataAccess() {
return {
};
}
// LEGO bricks the angular
// way
// Declaring the api of our
// service
27. $injecting a service into a
controller
// angular magic
angular
.module('app')
.controller('Persons', Persons);
Persons.$inject = ['dataAccess'];
function Persons(dataAccess) {
}
28. $injecting a service into a
controller
angular
.module('app')
.controller('Persons', Persons);
// still works without $inject
function Persons(dataAccess) {
}
29. $injecting a service into a
controller
angular
.module('app')
.controller('Persons', p);
function p(a) {
}
// But a minifier will break
// your app
a cannot be
resolved as
dataAccess
30. events
child
controller
parent
controller
$broadcast
$emit
$scope . $ e m i t ('eventName');
.$broadcast
32. Join the AngularJS-World
Make your first steps testing your apps
Code cleaner with John Papa’s Style Guide
Cheat Sheets help you to keep the overview
Read Dan Wahlin’s AngularJS Magazin
Use snippets provided by AngularJS Hub
Subscribe to channels of AngularJS and NgEurope
Stay up to date with the NG-Newsletter
“click it”