angularjs for kolkata drupal meetup
TRANSCRIPT
Twitter @dgoutam
Javascript for Designers
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
http://angularjs.org
ng-app, expression binding
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.
ngModel, binding variables
• 02-ngModel• ng-model binds variable data. It can be
declared on input, select, textarea, etc.
Two-way data binding
Jquery vs Angular
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
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
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
Method on Scope
ngClick
ngRepeat
ngRepeat
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
ngView and Routing
$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
Custom Filter
Custom Directive
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• https://www.facebook.com/groups/
255769184523171/
