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.
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
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
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.
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
15. Expressions
• Expressions can be embedded anywhere
• … even for class values
• There are special filters that you can use
(currency)
• Values are automatically bound
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
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
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
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.
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.