Download as PDF, PPTX
Uploaded bycraftworkz
CraftCamp for Students - Introduction to AngularJS
AngularJS is a client-side JavaScript MVC framework that extends HTML with new attributes and custom tags. It allows developers to create reusable components with modularity, dependency injection, two-way data binding, and testing. Key concepts include expressions, filters, directives, models, modules, controllers, services, and templates. Modules allow building reusable components like controllers, services, filters and directives. Controllers set up initial scope state and behavior while services extract reusable code and enable communication between controllers. Two-way data binding synchronizes models and views.
CraftCamp for Students - Introduction to AngularJS
- 1.
- 2.
- 3. Agenda ● What isAngularJS? ● Why use AngularJS? ● Concepts + demos ● Tips
- 4. What is angular? ● AngularJS IS NOT - a Library - a replacement for HTML, CSS or JS ● AngularJS IS - a clientside JavaScript MVC Framework - Extention to HTML with new attributes, custom tags, ..
- 6. Why use angular? ● Re-usable components ● Modularity ● Dependency Injection ● Two-way Databinding ● Testing
- 7. Concepts ● Expressions ● Filters ● Directives ● Models ● Modules ● Controllers ● 2-Way Databinding ● Services
- 8. Getting started 1. IncludeAngular 2. Bootstrap Angular
- 9. Directives • Extend HTMLto define custom tags, attributes and classes • ng-prefix • Normalization ngModel Recommended HTML5 compliant
- 10. Directives • As anattribute (A) • As a class (C) • As an element (E) • As a comment (M)
- 11. Scopes • Exactly ONEroot Scope via ng-app • Child scopes (controllers, directives) • Scope inheritance à Mimic DOM structure • Determine access to models
- 12. Models • Encapsulate applicationdata • Variable on Scope • ngModel directive
- 13. Expressions • JavaScript-like codesnippets that are usually placed in bindings - {{ expression }} • Valid expressions - {{ 1 + 1 }} - {{ a + b }} - {{ name }}
- 14. Filters ● Formatting values ● Separated by | (pipe) ● {{ expression | filter }} ● Built-in filters: uppercase, lowercase, limitTo, …
- 15. Templates HTML + Directives+ Filters View Compile
- 16. Modules ● AngularJS hasnothing like a main method ● Container for custom components ● Allows us to build re-usable components - Controllers - Services - Filters - Directives
- 17. Controllers • Set upthe inital state of $scope object • Add behavior to the $scope object • Inheritance
- 18. Controllers • Creates anew child scope • Scope of view injected in Controllers constructor function
- 19.
- 20.
- 21. Services ● Extract re-usablecode ● Communicate between controllers ● Lazily instantiated (Dependency Injection) ● Singletons
- 22. Services ● $rootScope ● $scope ● $http ● $q ● $log • $interval • $resource • $timeout • $window • $document
- 23.
- 24.
- 25.
- 26. Modules • An applicationlevel module • A module for each Feature • A module for each reusable component - Controllers - Services - Filters - Directives
- 27. Controllers • Do notuse controllers to: - Manipulate DOM ( à use directives) - Format input (à use forms) - Share code or state across Controllers (à use services)
- 28. Dependencies • What happenswith Minification? - Renames function parameters - How do does compiler know which is which?
- 29. ngSrc • The easyway • How it should be written
- 30. Not covered • Promises • Localization • Form Validation • Views & Routes • Server communication • Testing • …
- 31. Resources • https://docs.angularjs.org/ • https://egghead.io/ • https://thinkster.io/ • http://www.slideshare.net/craftworkz/ • https://github.com/craftworkz/ucll-workshop-angularjs
- 32.