Angular basicschat

429 views

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
429
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×