AngularJS Beginners Workshop
Download as PPTX, PDFâą7 likesâą4,379 views
The document outlines a beginner's workshop on AngularJS, detailing its history, features, and fundamental concepts such as two-way data binding and MVC architecture. It includes practical examples and instructions on using AngularJS directives, expressions, and modules, as well as comparisons with jQuery. Additionally, it references resources for further learning and sample projects for application development.
AngularJS Beginners Workshop
- 2. History âą Origins within Google, invented by Misko Hevery âą Open-sourced 2009 âą 17,000 lines in 6 months => 1,500 in 3 weeks
- 3. Killer Features âą âą âą âą Two-way binding Declarative coding for UI Teaching HTML new tricks Separation of model & view, No DOM/View manipulation, less code âą Great for CRUD based single page apps âą Awesome adoption and great community âą Unit testable, E2E testable
- 4. Main site, Download âą angularjs.org
- 5. Ex 1: ng-app, expression binding âą Download https://github.com/sathishvj/AngularJSTutoria ls/archive/master.zip âą Extract locally âą Go to 01-ngApp-binding âą Open html in browser âą Examine source code
- 6. Ex 1: ng-app, expression binding
- 7. Ex 1: ng-app, expression binding âą Include angular.js or angular.min.js âą Add ng-app declarative where you want Angular to manage app (typically <html> or <body>) âą Expression binding with {{ }} âą ng-app can also be written as ngApp âą Use camel case in JavaScript code (ngApp) and use snake case in html (ng-app)
- 8. How does it work âą Compile: traverse the DOM and collect all of the directives. The result is a linking function. âą Link: combine the directives with a scope and produce a live view.
- 9. Ex 2: ngModel, binding variables âą 02-ngModel âą ng-model binds variable data. It can be declared on input, select, textarea, etc.
- 11. Other in-built declarations in Angular ngApp ngBind ngBindHtml ngBindTemplate ngBlur ngChange ngChecked ngClass ngClassEven ngClassOdd ngClick ngCloak ngController ngCopy ngCsp ngCut ngDblclick ngDisabled ngFocus ngForm ngHide ngHref ngIf ngInclude ngInit ngKeydown ngKeypress ngKeyup ngList ngModel ngMousedown ngMouseenter ngMouseleave ngMousemove ngMouseover ngMouseup ngNonBindable ngOpen ngPaste ngPluralize ngReadonly ngRepeat ngSelected ngShow ngSrc ngSrcset ngStyle ngSubmit ngSwitch ngTransclude ngValue
- 12. Ex 3: jquery comparison âą 03-jquerycomparison
- 13. Differences from jQuery âą Declarative code, not imperative (explicitly stating, say with functions, what action needs to be performed) âą Automatic data binding âą No direct DOM manipulation
- 14. Ex 04: More expressions
- 15. Expressions ⹠Expressions can be embedded anywhere ⹠⊠even for class values ⹠There are special filters that you can use (currency) ⹠Values are automatically bound
- 16. MVC
- 17. Ex 05: Scope and Controller
- 18. Learnings âą Controller objects can separate data and functionality â There can be many controllers âą â$scopeâ is injected by AngularJS âą $scope.data in the controller is referred to as simply data in html âą Dot notation for object members works (person.age) â In fact, this is suggested practice
- 20. How AngularJS does MVC
- 23. Ex 07: Method on Scope
- 24. Ex 08: ngClick
- 25. Ex 09: ngRepeat
- 26. Ex 09: ngRepeat
- 27. Ex 10: Filters
- 29. Modules in AngularJS âą Third party code can be packaged as reusable modules. âą The modules can be loaded in any/parallel order (due to delayed nature of module execution). âą Some Angular modules are in separate files: Eg. ngRoute is in angularjs-route.min.js
- 30. Ex 11: ngView and Routing
- 31. ngView and Routing âą This part requires a web server â Iâve created a simple one at https://github.com/sathishvj/gowebserver â Run suitable executable in index.html directory âą You can load different views contained in partial html files based on address bar location and apply specific controllers to it
- 32. Ex 12: $http
- 33. $http âą Make AJAX calls with $http âą It returns deferred promises â More in later workshops âą You can handle âsuccessâ and âerrorâ
- 34. Working with angular-seed âą https://github.com/angular/angular-seed âą You need to have node.js installed to test
- 35. Ex 13: Custom Filter
- 36. Ex 14: Custom Directive âą -customdirective
- 37. What we didnât cover âą âą âą âą âą Unit testing, E2E testing Custom directives beyond basics $apply and digest cycles $q and promises Service, Factory, Provider
- 38. Resources âą âą âą âą âą âą angularjs.org Google Groups: AngularJS Google+: AngularJS ngmodules.org Github: angular-ui.github.io Google+: AngularJS India
- 39. Project âą Build an app to list tweets given a search string (might require sign-up to Twitter API) âą Two pages required â main and an about page
Editor's Notes
- #3: they start with an anecdote, discussing how they were working on a web application at Google. They have already written 17000 lines of code in about 6 months and it was almost finished, albeit with great frustration related to development speed and testability. This guy, MiĆĄkoHevery, tells everyone that by using a framework that he wrote in his spare time (you gotta love devs!) they could rewrite the whole application in two weeks. He was wrong, they did it in three weeks and at the end the whole thing has only 1500 lines of code and was fully testable. 90% less code, in 90% less time. And it was very testable.
- #9: CompilerCompiler is an angular service which traverses the DOM looking for attributes. The compilation process happens into two phases.Compile: traverse the DOM and collect all of the directives. The result is a linking function.Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. Making the scope model a single source of truth.Some directives such ng-repeat clone DOM elements once for each item in collection. Having a compile and link phase improves performance since the cloned template only needs to be compiled once, and then linked once for each clone instance.
- #22: http://slid.es/neenhouse/dependency-injection-in-angularjs
- #23: http://slid.es/neenhouse/dependency-injection-in-angularjs