2. Agenda
O Introduction to AngularJS
O Some concepts used in AngularJS
O Testing application built with Angular
O Productivity and debugging tools
O Code organization for large projects
O Code demo as we go on
3. Why AngularJS
O HTML was created to transmit markup
data on web. E.g. <b> tags for making text
bold etc.
O JavaScript added for interactivity.
O And then comes AJAX and rich web
apps.
O And things get messed up by adding
listeners after getting ids, callbacks and
series of callbacks.
4. What can AngularJS do
O Less boilerplate code, faster development
with less code and thus less tests and
bugs.
O Clean separation of DOM
manipulation, business logic and views
make things easier to test.
O Declarative UI design means designers
can focus on their work without even
knowing JavaScript.
O Support for cool stuff like promises.
7. Module
O Angular apps have nothing like a main
method
O Directive ng-app used to bootstrap the
module
O E.g. <html ng-app=“someModule”>
O A module can contain several other
components
O var module =
angular.module(„someModule‟, [])
O Second argument is an array of other
modules which are requisites for the current
module.
8. Models
O In Angular, model is any data that is
reachable as property of $scope object
O Can also create models inside templates
using the ng-model directive e.g. <input
type=“email” ng-model=“user.email”>
O Can watch models for changes using
$watch(watchFn, watchAction, deepWatch)
O deepWatch is a boolean which allows to
watch attributes of the object returned by
watchFn
9. Controllers
O Set up the $scope
O Add behavior to $scope
O All business logic to be written in here.
O Can use the one controller per template
to create really traditional websites.
10. Templates
O Specify how things should show up and
what happens on particular user actions.
O Angular templates are not the view in
MVC. Compiled angular templates are the
views.
O Declaratively create the UI using
directives.
11. Directives
O One of the most important part of Angular
O Allows you to extend HTML to define
custom tags, attributes and classes for UI
components.
Jquery UI Angular Directives
<div id=“tabs”>
<ul>
<li><a href=“#tabs-1”> Tab1</a></li>
<li><a href=“#tabs-2”> Tab2</a></li>
</ul>
<div id=“#tabs-1>Content</div>
<div id=“#tabs-2>Content2</div>
</div>
<script>
$(function() {
$(„#tabs”).tabs();
});
</script>
<tab-set>
<tab title=“Tab1”>Content</tab>
<tab title=“Tab2”>Content2</tab>
</tab-set>
Now what if you need tabs on
10 pages in your whole
application ?
12. Services
O Stuff required at various places e.g. by
various controllers.
O E.g. a http request to get list of blog posts
in a blogging application would be
required while showing all blog posts, in
the admin edit/publish view etc.
O Three different ways to create services
i.e. services, factory and provider.
13. Filters
O Filters are transformations applies to
objects
O Not important to logic used to process
models e.g. currency sign (like $)
O E.g. lowerCase, sort etc.
O Built-in filters like json
O Custom filters can be defined with
app.filter(„filterName‟, function (obj)
{})
14. Routes
O Used to map templates and associated
controller to URLs.
O Supports HTML5 mode where you get
history support.
O That‟s it !
15. Form Validation
O Provides special support for two
properties $valid, $invalid.
O Can use them like <button ng-
disabled=“!formName.$valid”> to disable a
form until its all elements are correct.
O polyfills for things like „required‟ on non-
HTML browsers
16. Server-side communication
O $http wraps the XHR to provide
asynchronous requests.
O $resource for interacting with RESTful
resources. (provided as a separate
module in angular-resource.js)
O $http requests support promises (talk
about this later)
18. What actually happens
O Template loads with all the angular directives
O Angular script loads and after template
loading finishes, it looks for ng-app to find
application boundaries.
O Compile phase – Angular walks the DOM to
identify registered directive and transforms
them.
O Link Phase – This runs a link function for
each directive which typically creates listeners
on DOM or model and keeps view and model
in sync .
19. $scope
O $scope allows binding and
communication between controller and
templates.
O All the model objects are stored on it.
O Makes sense not to store everything on it
as it would degrade performance.
20. Data binding
O Binding two sources together and keep
then updated of changes.
O Angular supports two-way data binding.
O Change in models get reflected
everywhere in view.
O Changes in view gets reflected in the
model.
21. Dependency Injection
O Follows Law of Demeter or principle of
least knowledge.
O Instead of creating things, just ask for
what is required.
O E.g. to create a Car you need an engine
so instead of calling an engine Factory in
the constructor, pass an engine as
parameter.
O Makes things easier to test (e.g. mock
$http), less code and easier to change
later.
22. Promises
O A promise is an interface that deals with
objects that are returned or get filled in at
a future point in time.
O Current approach with callbacks has
problems of indentation while chaining
multiple calls, losing errors reported
between callbacks unless manually
handled and doing real stuff in innermost
callback.
23. Promises
O In angular a promise gives with a then
function which takes two functions as a
parameter for promises getting resolved
(success) or rejected (failure)
O A promise can be –
O chained so you do not get code with callbacks
inside callbacks that flows out of the screen.
O errors propagate and can be handled at the
end.
O Assurance that previous call finishes before
next call.
25. Why Test ?
O Things do what they are expected to do.
O Future addition of code does not affect
previous features.
O Reduces effort in the long run but maybe
pain to write initially.
26. Unit tests in Angular
O Test stuffs like controllers, filters, services
and directives.
O Separation of DOM code makes testing
easier and possible.
O Using Jasmine like syntax and Jasmine
Spy instead of real browser.
27. Karma
O Karma is a test runner in JavaScript
O Test on real devices
O Control the whole workflow from
command line.
O Lightening fast !!
28. Scenario tests
O End to end tests involving complete
feature.
O E.g. first page of a blog should display N
blog posts.
O Done using Karma in Angular
30. Yeoman m/
O Lightning-fast scaffolding
O Built-in preview server
O Integrated package management
O An awesome build process
O Unit testing using PhantomJS
31. Batarang
O Chrome extension for angular
O Provides performance metrics, see
scopes and values of properties in them.
O Can change the values and see the
change in realtime.
41. Learn more about it
O Angular Channel on Youtube
O http://www.yearofmoo.com
O egghead.io
O Stack Overflow
O Quora
Editor's Notes
Angular comes with several filters, like currency, which we’ve seen:{{12.9 | currency}}This bit of code will display the following:$12.90We put this declaration in the view (rather than in the controller or model) because thedollar sign in front of the number is only important to humans, and not to the logic weuse to process the number.varhomeModule = angular.module('HomeModule', []);homeModule.filter('titleCase', function() {vartitleCaseFilter = function(input) {varwords = input.split(' ');for (vari = 0; i < words.length; i++) {words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);}return words.join(' ');};return titleCaseFilter;});
Script loadsAngular loads and looks for the ng-app directive to find the application boundaries.Compile phaseIn this phase, Angular walks the DOM to identify all the registered directives in thetemplate. For each directive, it then transforms the DOM based on the directive’srules (template, replace, transclude, and so on), and calls the compile functionif it exists. The result is a compiled template function, which will invoke the linkfunctions collected from all of the directives.Link phaseTo make the view dynamic, Angular then runs a link function for each directive.The link functions typically creates listeners on the DOM or the model. Theselisteners keep the view and the model in sync at all times. …. functions deal with transforming the template itself, and link functions deal with makinga dynamic connection between model and view. It is in this second phase that scopesare attached to the compiled link functions, and the directive becomes live throughdata binding. These two phases are separate for performance reasons. Compile functions execute onlyonce in the compile phase, whereas link functions are executed many times, once foreach instance of the directive. For example, let’s say you use ng-repeat over your directive.You don’t want to call compile, which causes a DOM-walk on each ngrepeatiteration. Instead, you want to compile once, then link.