0
Angular.js Basics
●

Modules

●

Routes

●

Controllers

●

Services

●

Templates

●

Directives

●

Events

●

Promises
...
Modules
●

Your app

●

Adding dependencies
–
–

●

Script tag
Inject

Why modules
–

Reusability

–

Easily include exter...
Routes
●

URLs to views

●

Parameters

●

.when

●

.otherwise

●

Options
–

Template/templateUrl

–

Controller

–

res...
Services
●

Angular services are singletons objects or functions that carry out
specific tasks common to web apps
–
–

Laz...
Services
●

Built-in service
–
–

●

Start with $
$http, $resource, $q, $swipe etc....

Build service whenever you
–

Want...
Services
Levels of abstraction
Module

Service

btford.socket-io

socket

ChatFrontendApp

Chatsocket

Chatservice

Abstra...
Controllers
●

Presentation logic

●

Two way data binding

●

$scope is the glue

●

$scope inheritance and $rootScope

●...
Controllers – Scope structure
Controllers
●

Event listening
–

$emit

–

$broadcast

–

$on
●

●

stopPropagation

$watch
–

Without true as second par...
Controllers – Advices
●

What should be there
–

Presentation logic

–

Arguably some logic such as filtering / ordering

...
Controllers – Advices
●

What you should remember
–

Controllers are created
●

every time a user reaches a URL (ng-view d...
Controllers – Advices
●

Suggested code flow
–
–

Define private functions and public functions

–

Set up listeners

–
●
...
Templates
●

Presentation layer

●

HTML

●

Bound to model via
–

$scope

–

Controller as

Check out Presentation
Directives
●

Directives are a way to teach HTML new tricks

●

Angular directives
–
–

Styling: ngShow, ngHide, ngClass, ...
Directives
●

Using directives
–

Attribute

–

Tag

–

Comment

–

Class

●

Declarative

●

Watch out:
–

No error if fa...
Directives
●

Naming: in HTML / in Javascript

●

Building directives
–

Restriction (AECM)

–

Template

–

Link function...
Directives
●

Compile
–

Only called once for each instance

–

No scope

–

Performance

–

Return a link function or a p...
Animation
●

Changes in 1.2
–

By class – no more ngAnimate

–

Check out Animation

$animate service

●

http://www.yearo...
Angular basicschat
Upcoming SlideShare
Loading in...5
×

Angular basicschat

280

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
280
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Angular basicschat"

  1. 1. Angular.js Basics ● Modules ● Routes ● Controllers ● Services ● Templates ● Directives ● Events ● Promises ● Animation
  2. 2. Modules ● Your app ● Adding dependencies – – ● Script tag Inject Why modules – Reusability – Easily include external work
  3. 3. Routes ● URLs to views ● Parameters ● .when ● .otherwise ● Options – Template/templateUrl – Controller – resolve – Other parameters (anything you want) Check out Routing1
  4. 4. 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
  5. 5. 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
  6. 6. Services Levels of abstraction Module Service btford.socket-io socket ChatFrontendApp Chatsocket Chatservice Abstraction ●
  7. 7. Controllers ● Presentation logic ● Two way data binding ● $scope is the glue ● $scope inheritance and $rootScope ● Controller as syntax
  8. 8. Controllers – Scope structure
  9. 9. Controllers ● Event listening – $emit – $broadcast – $on ● ● stopPropagation $watch – Without true as second parameter – With true as second parameter Check out Presentation
  10. 10. Controllers – Advices ● What should be there – Presentation logic – Arguably some logic such as filtering / ordering – Calls to services – Event listening and variable watches
  11. 11. 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
  12. 12. 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
  13. 13. Templates ● Presentation layer ● HTML ● Bound to model via – $scope – Controller as Check out Presentation
  14. 14. 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
  15. 15. Directives ● Using directives – Attribute – Tag – Comment – Class ● Declarative ● Watch out: – No error if fail to include directive (ignored) Check out Directives
  16. 16. Directives ● Naming: in HTML / in Javascript ● Building directives – Restriction (AECM) – Template – Link function Check out Directives2 ● Scope ● Element ● Attributes – Scope – Transclusion Check out Directives3
  17. 17. 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
  18. 18. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×