Part II
AngularJS
from Intro to Advanced
Overview
AngularJS from Intro to Advanced (II)
AngularJS from Intro to Advanced (II)
Part I
- Style guides
- Naming
- Architecture
- Patterns
- Hello, AngularJS
- Modules
- Routing (I)
Part II
- Routing (II)
- Components
- Directives
- Services (I)
Part III
- Services (II)
- Interceptors
- Filters
- i18n
- Build tools
- Testing
- Continuous Integation
AngularJS from Intro to Advanced (II)
Agenda
10:30 - 10:45 Overview
10:45 - 11:15 Recap
11:15 - 12:00 Routing (II)
12:00 - 13:00 Components (I)
13:00 - 14:00 Lunch break
14:00 - 15:00 Components (II)
15:00 - 15:15 Break
15:15 - 17:30 Directives
17:30 - 17:45 Break
17:45 - 19:00 Services (I)
Recap
AngularJS from Intro to Advanced (II)
AngularJS from Intro to Advanced (II)
style guides
guidelines
john papa's
IIFE
single responsibility principle
AngularJS from Intro to Advanced (II)
naming
patterns
LIFT
<name>.<type>.<ext>
<name><type>
AngularJS from Intro to Advanced (II)
architecture
&&
patterns
group by modules &&
features
split into layers of:
- data
- logic
- presentation
AngularJS from Intro to Advanced (II)
modules
naming
use getters
AngularJS from Intro to Advanced (II)
routing
state vs location
Routing (II)
AngularJS from Intro to Advanced (II)
AngularJS from Intro to Advanced (II)
params
url param
query param
AngularJS from Intro to Advanced (II)
child states
AngularJS from Intro to Advanced (II)
state transition
AngularJS from Intro to Advanced (II)
state && location
hooks
Components
AngularJS from Intro to Advanced (II)
AngularJS from Intro to Advanced (II)
component
replaces old
controller + view
way of building pages
has limited directive functionality
acts like a directive bound to an element name
AngularJS from Intro to Advanced (II)
best practices
- component names should be <name>.component.{js|html|css}
- bind controller local scope (this) to a variable (self)
- always defer business logic to a service
- try to keep components to the smallest reusable unit
- always bind controller to view using "controllerAs" syntax
AngularJS from Intro to Advanced (II)
// login.component.js
(function() {
angular.module('app.core').component('login', {
template: '<h1>core - {{ lVM.pageName }}</h1>',
controller: LoginCtrl,
controllerAs: 'lVM'
});
function LoginCtrl() {
var self = this;
self.pageName = "login";
}
})();
// login.route.js
...
$stateProvider.state('Login', {
url: '/login',
component: 'login'
});
...AngularJS from Intro to Advanced (II)
why use components?
API via inputs / outputs (bindings)
lifecycle hooks
component based architecture
AngularJS from Intro to Advanced (II)
bindings
input
< - one way binding
@ - string binding
= - two way binding
AngularJS from Intro to Advanced (II)
bindings
output
& - callback binding
AngularJS from Intro to Advanced (II)
lifecycle hooks
$onInit
$onChanges
$doCheck
$onDestroy
Directives
AngularJS from Intro to Advanced (II)
AngularJS from Intro to Advanced (II)
directive
addition to components, now they are mostly attribute directives
angular default directives (ng)
AngularJS from Intro to Advanced (II)
best practices
- directive names should be <name>.directive.{js|html|css}
- keep directives required to attribute
AngularJS from Intro to Advanced (II)
angular default directives
structure directives (ng-if, ng-for)
event directives (ng-click, ng-change)
data bind directives (ng-model, ng-bind-html)
AngularJS from Intro to Advanced (II)
custom directives types
manipulate dom
wrap other elements
event listeners
communicates
Services (I)
AngularJS from Intro to Advanced (II)
AngularJS from Intro to Advanced (II)
types of services
data
behaviour logic
business logic
AngularJS from Intro to Advanced (II)
data services
backend api
firebase
3rd party api
http mocks
static json resources
Q&A
AngularJS from Intro to Advanced (II)
Thank you!
AngularJS from Intro to Advanced (II)
By Alex Albu
