2. Angular.js Basics
●
Modules
●
Routes
●
Controllers
●
Services
●
Templates
●
Directives
●
Events
●
Promises
●
Animation

3. Modules
●
Your app
●
Adding dependencies
–
–
●
Script tag
Inject
Why modules
–
Reusability
–
Easily include external work

4. Routes
●
URLs to views
●
Parameters
●
.when
●
.otherwise
●
Options
–
Template/templateUrl
–
Controller
–
resolve
–
Other parameters (anything you want)
Check out Routing1

5. Services
●
Angular services are singletons objects or functions that carry out
specific tasks common to web apps
–
–
Lazily executed
–
●
Singleton
Available app-wide via dependency injection
Types of services
–
Value
–
Service / Factory | create the service object
–
Provider | configurable and creates the service object
Check out Services

6. Services
●
Built-in service
–
–
●
Start with $
$http, $resource, $q, $swipe etc....
Build service whenever you
–
Want to execute the same tasks from several places in the app
–
Want to keep app states
–
Need app-wide accessible data (states, constants, etc)
–
Need to communicate with an external API
–
Need to handle caching
Check out Provider

7. Services
Levels of abstraction
Module
Service
btford.socket-io
socket
ChatFrontendApp
Chatsocket
Chatservice
Abstraction
●

8. Controllers
●
Presentation logic
●
Two way data binding
●
$scope is the glue
●
$scope inheritance and $rootScope
●
Controller as syntax

9. Controllers – Scope structure

10. Controllers
●
Event listening
–
$emit
–
$broadcast
–
$on
●
●
stopPropagation
$watch
–
Without true as second parameter
–
With true as second parameter
Check out Presentation

11. Controllers – Advices
●
What should be there
–
Presentation logic
–
Arguably some logic such as filtering / ordering
–
Calls to services
–
Event listening and variable watches

12. Controllers – Advices
●
What you should remember
–
Controllers are created
●
every time a user reaches a URL (ng-view directive)
●
every time a DOM element with ng-controller is created
–
They do not allow persistence of state or data (use services for that)
–
They have an inheritance pattern that follows the DOM structure
–
$rootScope is always available but should not be overcrowded with “global” functions or vars
–
“Controller as” can be used for good readability but not atm replace $scope for certain features

13. Controllers – Advices
●
Suggested code flow
–
–
Define private functions and public functions
–
Set up listeners
–
●
Define variables
Call services and functions last
What you should (almost) never see in a controller
–
$http, $resource, $cacheFactory => all belong in services
–
$rootScope.$on (event listeners would be added many times to the root scope)
–
String literals for event names => Probably belong in a service
–
DOM manipulation

14. Templates
●
Presentation layer
●
HTML
●
Bound to model via
–
$scope
–
Controller as
Check out Presentation

15. Directives
●
Directives are a way to teach HTML new tricks
●
Angular directives
–
–
Styling: ngShow, ngHide, ngClass, ngStyle
–
●
DOM control: ngIf, ngSwitch, ngRepeat
Events: ngClick, ngFocus, ngKeypress, ngCopy
Other directives (e.g. from UI Bootstrap)
–
Accordion
–
Datepicker
–
Tabs

16. Directives
●
Using directives
–
Attribute
–
Tag
–
Comment
–
Class
●
Declarative
●
Watch out:
–
No error if fail to include directive (ignored)
Check out Directives

17. Directives
●
Naming: in HTML / in Javascript
●
Building directives
–
Restriction (AECM)
–
Template
–
Link function
Check out Directives2
●
Scope
●
Element
●
Attributes
–
Scope
–
Transclusion
Check out Directives3

18. Directives
●
Compile
–
Only called once for each instance
–
No scope
–
Performance
–
Return a link function or a pre/post link functions
●
Replace
●
Warning: this is equal to window inside a directive

19. Animation
●
Changes in 1.2
–
By class – no more ngAnimate
–
Check out Animation
$animate service
●
http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
●
http://dl.dropboxusercontent.com/u/24421764/Website/Projects/ngAnimate/index.html
●
●
●
Https://github.com/matiboy/AngularBasicsChat.git