a gently introduction to angularjs
TRANSCRIPT
Gregor Woiwode@GregOnNet
Software must fit user needs, not vice versa! #empathic-business
FAVORITE
1
Web Apps?!I can’t!
Of course,I can!
discoversstunned
Downloads
https://github.com/GregOnNet/angular-starter-demos
https://github.com/GregOnNet/angular-cups
Source Code
Search...
+
https://single-page.app/#/list What do we expect from a single-page app?
Reacting fast to user input
Providing comprehensive interactions
Using only one page?
Card - One...
https://single-page.app/#/card/one Mission accomplished - NOT!
Routing between views
Interacting with server side APIs
Binding & Presenting dataSave
Who cares about...
Caching data
Organizing app architecture that scales
Templating multiple views
My personal pains
A B
DC
Framework confetti
My personal pains
Abetter
D
A
Dependencies & Versioning
A
B DC
Choosing one pluggable ecosystem
My personal salvation
What is in the box?
{{ }}
Data Binding
two way
one way
change tracking
Modules
What is in the box?
controllers
factories, services, providers
directives, filter
Dependency Injection
What is in the box?
Routing
What is in the box?
Testing
What is in the box?
What is in the box?
Community
31.3k Stars
~ 96k Videos
~ 63k Questions
11th of November 2014
angularjs.org
Documentation and Tutorials
<html ng-app="demo">
// our awesome app
</html>
Let’s get into code
Intermediate Function Expression - iife
(function() { 'use strict';
// Isolation
})();
Why iife?
var greet = 'Hi!';
script.js
var greet = 'Bye!';
conflict.js
Last man standing
Why iife?
var greet = 'Hi!';
script.js
(function () { 'use strict';
})();
var greet = 'Bye!';
conflict.js
(function () { 'use strict';
})();SAVE
angular .module('app', [
'module', 'feature']);
Defining a module
// … Extend it with // other modules
// Name your module...
angular .module('app') .controller('Persons', Persons);
function Persons() { }
Defining a controller
angular .module('app') .directive('semanticHtml', semanticHtml);
function semanticHtml () { return { restrict : 'E | A | C', template : '<html-template>' };}
Our first directive
// Nearly the same like our // controller, right?
// Watch out!// Directives return a new // object literal
Even more about directives
function semanticHtml () { return { restrict : 'E | A | C', template : '<html-template>' templateUrl: scope: controller: link: };}
angular .module('app') .filter('manipulate', manipulate);
function manipulate() {
return function(input, /* parameters */ ) {
}}
Starting with filters
// Watch out!// Filters return a function.
There are many filters already implemented
https://github.com/a8m/angular-filter
angular .module('app') .factory('dataAccess', dataAccess);
function dataAccess() {
return {
};}
Defining a factory, service, whatever...
// LEGO bricks the angular// way
// Declaring the api of our// service
$injecting a service into a controller
// angular magic
angular .module('app') .controller('Persons', Persons);
Persons.$inject = ['dataAccess'];
function Persons(dataAccess) { }
angular .module('app') .controller('Persons', Persons);
function Persons(dataAccess) { }
$injecting a service into a controller
// still works without $inject
angular .module('app') .controller('Persons', p);
function p(a) { }
$injecting a service into a controller
// But a minifier will break// your app
a cannot be resolved as dataAccess
events
childcontroller
parent controller
$broadcast
$emit
$scope ('eventName');.$emit.$broadcast
events using $rootScope
controller subscriber
controller publisher
$rootScope .$emit('eventName');
$rootScope .$on('eventName' , callback);
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”
Questions?