Download - AngularJS Introduction (Talk on Aug 5)
![Page 1: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/1.jpg)
AngularJSA better way to create web apps
![Page 2: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/2.jpg)
AgendaO Introduction to AngularJSO Some concepts used in AngularJSO Testing application built with
AngularO Productivity and debugging toolsO Code organization for large projectsO Code demo as we go on
![Page 3: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/3.jpg)
Why AngularJSO 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.
![Page 4: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/4.jpg)
What can AngularJS doO 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.
![Page 5: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/5.jpg)
Angular componentsThis is the real stuff
![Page 6: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/6.jpg)
Angular App
Modules
Models
Controllers
Templates (and Views)
Directives
Services
Filters
Routes
![Page 7: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/7.jpg)
ModuleO Angular apps have nothing like a main methodO Directive ng-app used to bootstrap the moduleO E.g. <html ng-app=“someModule”>O A module can contain several other
componentsO var module = angular.module(‘someModule’,
[])O Second argument is an array of other modules
which are requisites for the current module.
![Page 8: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/8.jpg)
ModelsO In Angular, model is any data that is
reachable as property of $scope objectO 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
![Page 9: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/9.jpg)
ControllersO Set up the $scopeO Add behavior to $scopeO All business logic to be written in
here.O Can use the one controller per
template to create really traditional websites.
![Page 10: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/10.jpg)
TemplatesO 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.
![Page 11: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/11.jpg)
DirectivesO One of the most important part of
AngularO 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 ?
![Page 12: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/12.jpg)
ServicesO 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.
![Page 13: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/13.jpg)
FiltersO Filters are transformations applies to
objectsO Not important to logic used to
process models e.g. currency sign (like $)
O E.g. lowerCase, sort etc.O Built-in filters like jsonO Custom filters can be defined with
app.filter(‘filterName’, function (obj) {})
![Page 14: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/14.jpg)
RoutesO Used to map templates and
associated controller to URLs.O Supports HTML5 mode where you
get history support.O That’s it !
![Page 15: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/15.jpg)
Form ValidationO 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
![Page 16: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/16.jpg)
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)
![Page 17: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/17.jpg)
Secrets of all the magic in Angular
![Page 18: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/18.jpg)
What actually happensO Template loads with all the angular directivesO 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 .
![Page 19: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/19.jpg)
$scopeO $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.
![Page 20: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/20.jpg)
Data bindingO 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.
![Page 21: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/21.jpg)
Dependency InjectionO 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.
![Page 22: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/22.jpg)
PromisesO 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.
![Page 23: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/23.jpg)
PromisesO 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.
![Page 24: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/24.jpg)
Testing apps built with Angular
![Page 25: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/25.jpg)
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.
![Page 26: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/26.jpg)
Unit tests in AngularO 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.
![Page 27: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/27.jpg)
KarmaO Karma is a test runner in JavaScriptO Test on real devicesO Control the whole workflow from
command line.O Lightening fast !!
![Page 28: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/28.jpg)
Scenario testsO 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
![Page 29: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/29.jpg)
Tools for productivity
![Page 30: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/30.jpg)
Yeoman \m/O Lightning-fast scaffoldingO Built-in preview serverO Integrated package managementO An awesome build processO Unit testing using PhantomJS
![Page 31: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/31.jpg)
BatarangO Chrome extension for angularO Provides performance metrics, see
scopes and values of properties in them.
O Can change the values and see the change in realtime.
![Page 32: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/32.jpg)
IDE pluginsO Webstorm plugin is awesome.O Sublime text angular plugin.
![Page 33: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/33.jpg)
Angular FutureO AnimationsO Breaking down into componentsO alternative syntax work without the
$scope thing but not really useful.O Much More…
![Page 34: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/34.jpg)
Best practicesBecause you can still write yucky code in
Angular
![Page 35: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/35.jpg)
No DOM manipulation in controller
![Page 36: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/36.jpg)
Things which are to be used in multiple
controllers ? Use services
![Page 37: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/37.jpg)
To wrap third party plugins like JQuery date-picker, use
directives
![Page 38: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/38.jpg)
Write tests.This one is for me
![Page 39: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/39.jpg)
Use promises, they are awesome.
![Page 40: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/40.jpg)
Code organizationO Angular seed styleO Yeoman StyleO Any style you prefer
![Page 41: AngularJS Introduction (Talk on Aug 5)](https://reader033.vdocuments.site/reader033/viewer/2022061106/5446a24eb1af9fe33a8b464c/html5/thumbnails/41.jpg)
Learn more about itO Angular Channel on YoutubeO http://www.yearofmoo.comO egghead.ioO Stack OverflowO Quora