angular js introduction by tania gonzales
DESCRIPTION
AngularJS Introduction Presentation. It covers some basic concepts around AngularJS like controllers, services, etc and some best practices learned along the way. Code is available in github: https://github.com/taniadgv/contactworksTRANSCRIPT
A n g u l a r J S S e s s i o n s
INTRODUCTION
GOALS FOR TODAY
2
What is AngularJS ? Conceptual overview
Why and when should I use it ?
Testing aspects
http://angularjs.org
CONCEPTUAL OVERVIEW
3
AngularJS is a structural framework for dynamic web applications.
CONCEPTUAL OVERVIEW
4
Like any abstraction, it comes at a cost of flexibility. Not every app is a good fit for Angular
CONCEPTUAL OVERVIEW
5
MVC done right
CONCEPTUAL OVERVIEW
6
A declarative user interface
CONCEPTUAL OVERVIEW
7
Data models are JavaScript objectsSCOPES
CONCEPTUAL OVERVIEW
8
Behavior with directives.
DOM manipulation where they belong!
http://www.thoughtworks.com/radar/#/techniques/698
This involves aggressively restricting all DOM access (which usually translates to all jQuery usage) to a thin 'segregation layer'. One pleasant side-effect of this approach is that everything outside of that segregated DOM layer can be tested rapidly in isolation
from the browser using a lean JavaScript engine such as node.js.
CONCEPTUAL OVERVIEW
9
Flexibility with Filters
CONCEPTUAL OVERVIEW
10
Context aware communication
CONCEPTUAL OVERVIEW
11
You will write less code.
Yes you will
Registering callbacks Manipulating HTML DOM programmatically
Marshaling data to and from the UI
Writing tons of initialization code just to get started
CONCEPTUAL OVERVIEW
12
Designers tend to love it. HTML stays declarative
CONCEPTUAL OVERVIEW
INVERSION OF CONTROL through
DEPENDENCY INJECTION
PLUS GOOD TESTING/MOCKING TOOLS
TESTABILITY!13
CONCEPTUAL OVERVIEW
14
MODULEMODULE
CONFIG FILTER DIRECTIVE FACTORY CONTROLLER
ROUTES SERVICE
PROVIDER
VALUE
CONCEPTUAL OVERVIEW
15
SHOW TIME!
CONCEPTUAL OVERVIEW
16
DIRECTIVE
DIRECTIVE
"{{ name }}" is a binding expression!
CONCEPTUAL OVERVIEW
TWO WAY DATA BINDING
TEMPLATE
VIEW
COMPILE
MODEL
LINK
17
CONCEPTUAL OVERVIEW
18
This example contains bad practices. It was created for educational purposes only!
FILTER
CONCEPTUAL OVERVIEW
19
MODULEMODULE
CONFIG
FILTER
DIRECTIVE FACTORY
CONTROLLERROUTES
SERVICE
PROVIDERS
CONCEPTUAL OVERVIEW
20
CONCEPTUAL OVERVIEW
21
Services Providers
Directives
Filters
Config
Controllers
Factories
CONTROLLERS
22
CONCEPTUAL OVERVIEW
23
Services Providers
Directives
Filters
Controllers
Factories Config
CONCEPTUAL OVERVIEW
24
Services Providers
Directives
Filters
Controllers
Factories Config
SERVICES/FACTORIES
25
CONCEPTUAL OVERVIEW
If you want your function to be called like a normal function, use factory. If you want your
function to be instantiated with the new operator, use service.
26
CONCEPTUAL OVERVIEW
27
Services ProvidersDirectives
Filters
Controllers
Factories Config
CONCEPTUAL OVERVIEW
28
Features Factory Service Value Constant Provider
Can have dependencies yes yes no no yes
Object available in config phase no no no yes yes
Can create functions / primitives yes no yes yes yes
CONCEPTUAL OVERVIEW
29
Services Providers
DirectivesFilters
Controllers
Factories Config
DIRECTIVES
30
CONCEPTUAL OVERVIEW
31
Services Providers
DirectivesFilters
Controllers
Factories Config
32
CONCEPTUAL OVERVIEW
33
Services Providers
Directives
Filters
Controllers
Factories Config
CONFIG FILE
34
SOME BEST PRACTICES
GOOD PRACTICES
35
SOME BEST PRACTICES
Controllers and Services should not reference the DOM
36
SOME BEST PRACTICES
Controllers should have view behavior
37
SOME BEST PRACTICES
Services should have reusable logic, independent of the view
38
SOME BEST PRACTICES
Scope should be read-only in the templates
39
SOME BEST PRACTICES
Be careful with simple examples.
!
Your architectures should reflect the system, not the frameworks you used in your system
Uncle Bob - Screaming Architecture
40
41
ECOSYSTEM
NG (core) ngAnimate
ngRoute ngResource
ngCookies
ngTouch
ngSanitize
ngMock
http://ngmodules.org/
REFERENCES
42
▫︎ http://docs.angularjs.org/guide : Angular official documentation, it used to be very poor with very simples examples but is getting better in content although still using the same basics examples. !
!▫︎https://github.com/angular/angular.js/wiki : Very good “articles" to understand better what angular is doing under the hood, like managing scopes and directives.
!!▫︎ http://www.thinkster.io/pick/GtaQ0oMGIl: "A Better Way to Learn AngularJS”
: Very nice website that puts together a lot of good resources to learn AngularJs from scratch.
!!▫︎http://www.youtube.com/angularjs: AngularJs official youtube channel where
they share and live-stream their presentations. !
REFERENCES
43
▫︎https://egghead.io/ : Videos with very simple explanation of the angular world such as directives, scope, controllers, very simple to start to understand what angular can do for you but no how it does it.
!!▫︎http://joelhooks.com/ : Blog where you can find some very interesting articles
about AngularJs such as "Modeling Data and State in Your AngularJs Application” !!▫︎AngularJs (O'Reilly, Brad Green & Shyam Seshadri): Nice book to go deeper into the AngularJs concepts and what it has to offer.
!!▫︎Javascript: the good parts (O'Reilly, Douglas Crockford)
