More Related Content
What's hot (20)
Viewers also liked (8)
Similar to Angular basicschat (20)
Recently uploaded (20)
Angular basicschat
- 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
- 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