Embed Size (px)
DESCRIPTION
Material I prepared for a beginner's workshop on AngularJS. Feel free to change it for your own use. I would appreciate it if you attributed the original to me.
Citation preview
Sathish VJ
Beginner’s Workshop
History
• Origins within Google, invented by Misko Hevery
• Open-sourced 2009• 17,000 lines in 6 months => 1,500 in 3 weeks
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
Main site, Download
• angularjs.org
Ex 1: ng-app, expression binding
• Download https://github.com/sathishvj/AngularJSTutorials/archive/master.zip
• Extract locally• Go to 01-ngApp-binding• Open html in browser• Examine source code
Ex 1: ng-app, expression binding
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)
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.
Ex 2: ngModel, binding variables
• 02-ngModel• ng-model binds variable data. It can be
declared on input, select, textarea, etc.
Two-way data binding
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
Ex 3: jquery comparison
• 03-jquerycomparison
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
Ex 04: More expressions
Expressions
• Expressions can be embedded anywhere• … even for class values• There are special filters that you can use
(currency)• Values are automatically bound
MVC
Ex 05: Scope and Controller
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
Scope, Controller, View
How AngularJS does MVC
Dependency Injection
Dependency Injection
Ex 07: Method on Scope
Ex 08: ngClick
Ex 09: ngRepeat
Ex 09: ngRepeat
Ex 10: Filters
Other inbuilt filters
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
Ex 11: ngView and Routing
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
Ex 12: $http
$http
• Make AJAX calls with $http• It returns deferred promises– More in later workshops
• You can handle ‘success’ and ‘error’
Working with angular-seed
• https://github.com/angular/angular-seed• You need to have node.js installed to test
Ex 13: Custom Filter
Ex 14: Custom Directive
• -customdirective
What we didn’t cover
• Unit testing, E2E testing• Custom directives beyond basics• $apply and digest cycles• $q and promises• Service, Factory, Provider
Resources
• angularjs.org• Google Groups: AngularJS• Google+: AngularJS• ngmodules.org• Github: angular-ui.github.io• Google+: AngularJS India
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
thank you
questions?
sathishvj
