AngularJS Introduction (Talk given on Aug 5 2013)

AngularJS
A better way to create web apps

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

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.

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.

Angular components
This is the real stuff

Angular App
Modules
Models
Controllers
Templates (and Views)
Directives
Services
Filters
Routes

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.

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

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.

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.

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 ?

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.

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)
{})

Routes
O Used to map templates and associated
controller to URLs.
O Supports HTML5 mode where you get
history support.
O That‟s it !

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

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)

Secrets of all the magic in
Angular

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 .

$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.

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.

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.

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.

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.

Testing apps built with
Angular

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.

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.

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 !!

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

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

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.

IDE plugins
O Webstorm plugin is awesome.
O Sublime text angular plugin.

Angular Future
O Animations
O Breaking down into components
O alternative syntax work without the
$scope thing but not really useful.
O Much More…

Best practices
Because you can still write yucky code in Angular

No DOM manipulation in
controller

Things which are to be used
in multiple controllers ?
Use services

To wrap third party plugins
like JQuery date-picker, use
directives

Write tests.
This one is for me 

Use promises, they are
awesome.

Code organization
O Angular seed style
O Yeoman Style
O Any style you prefer

Learn more about it
O Angular Channel on Youtube
O http://www.yearofmoo.com
O egghead.io
O Stack Overflow
O Quora 

AngularJS Introduction (Talk given on Aug 5 2013)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

Similaire à AngularJS Introduction (Talk given on Aug 5 2013)

Similaire à AngularJS Introduction (Talk given on Aug 5 2013) (20)

Dernier

Dernier (20)

AngularJS Introduction (Talk given on Aug 5 2013)

Notes de l'éditeur