Download - AngularJS One Day Workshop
![Page 1: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/1.jpg)
AngularJS Workshop
JSFoo 2014
Shyam Seshadri
![Page 2: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/2.jpg)
Most Important
• WIFI Network– HasGeek-Wifi (If you can see this)– HasGeek (Otherwise)
• WIFI password– geeksrus
• Open http://is.gd/ajs1day• Clone the repository locally• open the folder created, and run
– npm install
![Page 3: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/3.jpg)
Introduction
• Ex Googler
• Author
– AngularJS for O’Reilly
– AngularJS Up & Running for O’Reilly
• Entrepreneur
• Coder / Geek
![Page 4: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/4.jpg)
Agenda
• 1 day
• 4 Sessions
• Beginning to App in 16 Steps
• Hands on
• Questions? Try & save them for end of each session
![Page 5: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/5.jpg)
Agenda (contd…)
Session 1
• Introduction & History
• Basic Concepts & Terminologies
• Working with Controllers
• Angular Services
• Working with AngularJSinbuilt services
Session 2
• Creating your own services
• Introduction to $http
• Promises in AngularJS
• Routing
![Page 6: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/6.jpg)
Agenda (contd…)
Session 3
• Introduction to Testing in AngularJS
• Unit Testing in Angular
• End to End testing
Session 4
• Introduction to Directives
• Creating your own directives
• Best Practices
![Page 7: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/7.jpg)
Requirements
1. NodeJS (http://nodejs.org)
2. Karma (npm install –g karma-cli)
3. Protractor (npm install –g protractor)
4. Webstorm(http://www.jetbrains.com/webstorm) -OPTIONAL
![Page 8: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/8.jpg)
Github Repo
http://is.gd/ajs1day
![Page 9: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/9.jpg)
![Page 10: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/10.jpg)
Code Along – Initial Setup
Checkout:
git clone https://github.com/Fundoo-Solutions/angularjs-one-day.git
cd angularjs-one-day
Run:
npm install
![Page 11: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/11.jpg)
Expectations
• You will not be an expert at the end!!
• Live, hands-on
– but as much as time permits
• Questions, as much as possible
• Touch upon each and every part of AngularJS
• Follow along as best
– Jump steps if falling behind
![Page 12: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/12.jpg)
Expectations - continued
• One full app, from start to finish
– Simple, Todolist
– No Complex Directives
– No Login / Auth flows
• We will cover unit testing
– But gloss over end to end tests
• Try out things, break things
– That’s how we learn!
![Page 13: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/13.jpg)
Suggestions
• Use Google Chrome
– Faster
– One of the best Web Development Tools
• If something doesn’t work
– Look at the console (in Development Tools)
– Look for typos
– Check against the next step
![Page 14: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/14.jpg)
SESSION 1 – INTRODUCTION & BASICS
![Page 15: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/15.jpg)
Agenda
• MVC & the Web
• Introducing AngularJS
• Basic Concepts
• Terminologies
• Working with Controllers
![Page 16: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/16.jpg)
The Changing Web Paradigm
Complexity Shift
![Page 17: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/17.jpg)
The need to manage complexity
Data Retrieval Biz. LogicAuthorization & Permissions
RenderingConcurrent
usageAnd so much
more
![Page 18: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/18.jpg)
While hitting faster turnaround times
Feature 1
Deliver in 10 weeksFeature 2
Deliver in 2 weeksFeature 3
Deliver yesterday!!!
So how can we even attempt to do this?
![Page 19: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/19.jpg)
The need for
• Structure
• Modularity
• Tests
• Speed of Development
![Page 20: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/20.jpg)
Before AngularJS
• GWT – Do it all in Java
• jQuery + JS – Each project is different
• How do you test DOM manipulation?
• Dependent on Engineers, not on frameworks
![Page 21: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/21.jpg)
Introducing .
• A MVC framework for the Web
• No need for a new templating language – uses HTML
• Two Way Databinding between View & Code
• Allows Reusable HTML components – Directives
• Separation of concerns
• Routing, Deep Linking, History
• Unit Testing framework built-in
![Page 22: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/22.jpg)
The AngularJS MVC pattern
The Model is fetched and manipulated by the controller
Model gets rendered to the User as the View
User Actions in the view are triggered in the controller
Model
ControllerView
![Page 23: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/23.jpg)
Model-V-C
![Page 24: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/24.jpg)
A Simple Model in AngularJS
Just any JSON object returned by the Server
![Page 25: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/25.jpg)
M-View-C
![Page 26: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/26.jpg)
Projection of the Model
Template + Scope => View
Can be styled independently
Derives behavior from
Controller
![Page 27: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/27.jpg)
M-V-Controller
![Page 28: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/28.jpg)
The Controller is responsible for
Fetching data from the server
Exposing data to view
through Scope
Handling User
interactions like clicks
Any other biz. logic
![Page 29: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/29.jpg)
Data Binding
jQuery only world
• <p id=“nameTxt”></p>
• $(‘#nameTxt’).text(nameVar);
• nameVar.onChange(function(newVal, oldVal) {// Update #nameTxt
});
• If an input field, then additional
• $(‘#nameInp’).change(function() {nameVar = $(‘#nameInp).val();
});
AngularJS world
• {{nameVar}}
• <input ng-model=“nameVar”>
![Page 30: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/30.jpg)
Create your own components
jQuery only world
What if we could just do this?
<tabs>
<tab title=“Home”>content here</tab>
<tab title=“Contact”>content here</tab>
</tabs>
AngularJS world
Plus the content, and the logic ofSwitching between the tabs, and somuch more.
![Page 31: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/31.jpg)
Routing
In JS, for deep linking, we need to:
• Have a state machine
• Have an allotted view which changes
• Manage addition and removal from history
• Attach the right controller and scope with each view
• Potentially load all content before displaying
All of that with a simple API, as part of ngRoute
![Page 32: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/32.jpg)
Server communication
All the standards of $, plus
• Caching
• Configurability
• Resources
Define a Project as
• And then call
• Project.save()
• Project.delete()
• And more
![Page 33: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/33.jpg)
Dependency Injection
•The concept of asking for dependencies, rather than creating them
•A Service / factory is responsible for creating and providing your dependencies (known as the injector)
What
•Testability
•Separation of concerns
•Declarative
•ReusabilityWhy
•Everywhere in AngularJS
•From Controllers to Services, from Directives to FiltersWhere
![Page 34: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/34.jpg)
Dependency Injection
![Page 35: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/35.jpg)
Testing
DO IT!
![Page 36: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/36.jpg)
Testing
Unit Tests
• Test the individual functions
• Expected return values
• Side effects
• Focused, Specific
• Mocks out larger system behavior
Scenario Tests
• End to End
• Starts up a real browser
• Behaves like a user
• Can have a real server backing it
![Page 37: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/37.jpg)
A Sample Unit test
![Page 38: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/38.jpg)
Backend Requirements
• The same requirements that jQuery has– Nothing!
• Easier if it talks JSON– But not required
• Works well with Java, as well as with Ruby on Rails
• Needs a way of communicating to the server
• Concept of transforming requests and responses– No JSON? No problem!
![Page 39: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/39.jpg)
Do I need to develop my entire app in AngularJS?
• Has the concept of ng-app
– Denote a section of the page
• Can integrate as a section in an existing app
• Can run it beside an existing app
– Some URLs handled by AngularJS
• Can expand over time, gradually
![Page 40: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/40.jpg)
Who’s using AngularJS?
• Google (of course!)
– Double Click for Advertisers
– Youtube
– And many more
• Amazon
• Netflix
• ING
• Lots of startups
![Page 41: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/41.jpg)
Future Plans
• Object.observable to replace dirty checking
• Web components / Shadow DOM integration
• Asynchronous Loading
• Http, Socket, Offline, much more
• Mobile first
![Page 42: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/42.jpg)
AngularJS + Mobile
• <30 kb compressed & minified
• Optional ngTouch for Mobile
• Plays really well with Cordova / Phonegap
![Page 43: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/43.jpg)
So how do we start?
• It all begins with the AngularJS library, and an ng-app
<html ng-app><head><script src=“angular.min.js”></script>
</head><body>
<input type=“text” ng-model=“name”><h1>Hello {{name}}</h1>
</body></html>
![Page 44: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/44.jpg)
SESSION 1 CODE-ALONG STARTS NOW
![Page 45: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/45.jpg)
Github Repo
http://is.gd/ajs1day
![Page 46: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/46.jpg)
Code Along – Initial Setup
Checkout:
git clone https://github.com/Fundoo-Solutions/angularjs-one-day.git
cd angularjs-one-day
Run:
npm install
![Page 47: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/47.jpg)
Code Along
Run:
node server.js
Open localhost:8000
Each Step
Step 0 - Open localhost:8000/step0/app
and so on…
![Page 48: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/48.jpg)
At the beginning
• Static HTML
• Hardcoded data
• No functionality
![Page 49: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/49.jpg)
Code Along – Session 1
• Hook up Angularstep1
• Controllers & Data bindingstep2
• More controllers & using Directivesstep3
• Forms and validationstep4
• Using AngularJS servicesstep5
![Page 50: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/50.jpg)
Step 1 - Hooking up AngularJS
• In app.js, add,
– angular.module(‘todoApp’, []);
• In index.html, add
– ng-app=“todoApp”
• Try out AngularJS Expressions
– {{1 + 2}}
• Hiding the {{}} at load – ng-cloak
![Page 51: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/51.jpg)
Pro-tip: Avoiding Flashing {{ }}
• Use the ng-cloak class
– Comes with angular.js
– Add it to your own css
• Use ng-bind
– Skips the find and replace step
![Page 52: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/52.jpg)
Step 2 - Introducing AngularJS Controllers
• In sections/landing/landing-controller.js
• Refer to existing app– angular.module(‘todoApp’)
• Create controller– .controller(‘LandingCtrl’, [])
– Second argument array
– Save variables on this
• Ng-controller– As syntax
![Page 53: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/53.jpg)
Step 2 - Data Binding at play (Display)
• {{ }}– Ng-bind alternative
• Can refer to functions, variables– Try it out
• Create this.firstTodo in LandingCtrl– {author: ‘Me’, title: ‘First todo’,completed: false,
dueOn: ‘17/9/2014’}
• Create var secondTodo in LandingCtrl– {author: ‘Me’, title: ‘Second todo’, completed:
true, dueOn: ‘17/9/2014’}
![Page 54: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/54.jpg)
The Crazy AngularJS Controller / Service code
• angularModule.controller / service / factory / directive / filter
– First argument is the name
– Second argument an array
• Last argument of array is a function
• Every other argument is string with name of the dependency
• Function gets params injected as variables in same order
![Page 55: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/55.jpg)
Step 3 - More controllers & data-binding
• Create an array of todos in LandingCtrl with
– author
– title
– completed
– dueOn
• Reuse data from previous step
![Page 56: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/56.jpg)
Using common AngularJS directives
• Ng-repeat
– Over todos
• Ng-class
– Based on completed – fade out to grey if completed
– Create function getTodoClass in controller
– Takes a todo object as argument
– Returns object with class names as key, and boolean value
![Page 57: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/57.jpg)
Step 4 - Forms and Validation
• In file app/sections/create-update-todo/create-controller.js
• Create a new controller (CreateCtrl)– Add self.todo, with completed false by default– Add function addTodo in it– Set self.message when triggered
• Add a form name• Use ng-submit to trigger a controller function• Use ng-model on input fields• Use ng-disabled on button with
formName.$invalid
![Page 58: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/58.jpg)
Step 5 – Using core AngularJS services
• Add dependency as string in controller / service / factory / directive
• Add dependency in function arguments
• Use it!
– Show message using $window.alert
– Add dependency on $window in CreateCtrl
– Call $window.alert
![Page 59: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/59.jpg)
AND BACK TO THEORY FOR A BIT
![Page 60: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/60.jpg)
Concepts
• Scopes
• Directives
• Services
• Controllers
• Filters
• Partials
![Page 61: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/61.jpg)
Terminology - Scopes
• It’s the context, stupid!
• Exposes model to the View
• Allows event propagation
• Options?
– Parent / Child
– Root
– Isolated
– None
![Page 62: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/62.jpg)
Scope Hierarchy in our Application
$rootScope
LandingCtrl
RepeatItem1
RepeatItem1
CreateCtrl
![Page 63: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/63.jpg)
Terminology - Directives
• Reusable Components
• Covered in Session 4
• Can have a template associated
• Behavior + Rendering
• Tabs
• Datepicker
• Thumbnail Widgets
![Page 64: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/64.jpg)
Terminology - Services
• Behavior without a UI
• Biz. Logic shared across the app
• Application level Store!
• Think
– Server APIs
– Caches / Resources
– Factories
![Page 65: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/65.jpg)
Terminology - Filters
• Formatting HTML content
• Can be chained with normal JSON objects
• Date Filter
• List Filter
![Page 66: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/66.jpg)
Terminology - Controllers
• Business Logic backing the Views
• Usually a one to one association with a view
• Always linked to a view
• Exposes certain elements on the scope
![Page 67: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/67.jpg)
Terminology - Partials
• A View without a context
• Combines with the scope to form the view
• Can be placed inside other views to create a composite view
![Page 68: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/68.jpg)
Useful Inbuilt Services
• $http
• $resource
• $location
• $window
• $routeProvider
![Page 69: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/69.jpg)
END OF SESSION 1
![Page 70: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/70.jpg)
SESSION 2 – SERVICES, SERVERS & ROUTING
![Page 71: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/71.jpg)
Agenda
• Creating our own services
• Intro to $http
• Promises
• Routing using ngRoute
![Page 72: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/72.jpg)
What is an AngularJS Service
• Initialized once
• Returns function / object
• Guaranteed singleton for scope of application
![Page 73: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/73.jpg)
Creating your own AngularJS service
• When should you create a service?
– Repeated Functionality
– State across the app
– Wrapping third party functionality
– Need something that can be intercepted / mocked
• And how?
![Page 74: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/74.jpg)
Code Along – Session 2
•Create TodoService
•Use service across controllers
step6
![Page 75: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/75.jpg)
Creating Services
• angular.factory(‘ServiceName’, [‘dep1’, ‘dep2’, function(dep1, dep2) {}])
• Function returns
– A function
– Or an object
• What is returned is the public API
![Page 76: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/76.jpg)
Step 6 – Creating TodoService
• Create angular.factory TodoService
• Default array of todos (move from Ctrl)
• Functions
– query, returns array
– add: takes a todo, adds it to array
• LandingCtrl uses TodoService.query()
• CreateCtrl uses TodoService.add()
![Page 77: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/77.jpg)
Factory vs Service vs Provider
• Factory– Function called
– Object / Function returned
• Service– new called on function provided
– OO paradigm
• Provider– Initial Config setup
– Most configurable
![Page 78: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/78.jpg)
Using services as a store
• Singleton for the application
• Controllers created and destroyed as needed
• Singletons can be used for
– API
– Store
• Return an object with the API
• Any data in Service is available to another controller
![Page 79: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/79.jpg)
Working with Servers
• $http
• ngResource
• Promises
![Page 80: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/80.jpg)
Terminology - Promises
• JS is Asynchronous in Nature
• Can lead to the nested nightmare
• Instead, a promise is a simple API that allows you to chain asynchronous calls.
• Gives you the ability to wait for multiple asynchronous calls to finish without resorting to timeouts
• Common error handling!
![Page 81: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/81.jpg)
Callback Hell
var currentProfile = null, username = 'something';
fetchServerConfig(function(serverConfig) {
fetchUserProfiles(serverConfig.USER_PROFILES,
username, function(profiles) {
currentProfile = profiles.currentProfile;
});
});
![Page 82: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/82.jpg)
Promise Chaining
var currentProfile = fetchServerConfig().then(function(serverConfig) {
return fetchUserProfiles(serverConfig.USER_PROFILES, username);
}).then(function(profiles) {return profiles.currentProfile;
}, function(error) {// Handle errors in either fetchServerConfig or // fetchUserProfiles here
});
![Page 83: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/83.jpg)
Working with servers - Options
$http
• Low Level
• Working directly with JSON
• Always interact with the service
• More control, more options
• Only way to talk JSONP
ngResource
• High Level
• Object representation of Server calls
• Easier to read and write
• Strict, expects server in a certain form
![Page 84: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/84.jpg)
The core $http service
• GET
• POST
• DELETE
• PUT
• JSONP
![Page 85: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/85.jpg)
Configuring the $http request
• Headers
• Caching
• Params
• Data
• Transformations
![Page 86: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/86.jpg)
More hooks on the $http -Interceptors
• Common post return hook
• Recommended way of handling
– Errors & 404s
– Authorization
![Page 87: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/87.jpg)
CODE-ALONG CONTINUES
![Page 88: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/88.jpg)
Code Along – Session 3
•Fetch list of todosfrom server
•Post form data to server for create
step7
![Page 89: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/89.jpg)
Fetching data from server
• $http service
• $http.get(url).then(function(response) {}, function(err) {});
• Ideally, wrap it in a TodoService for nicer API
• URL - /api/todo
![Page 90: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/90.jpg)
Posting data to server
• $http.post(url, postData)
– Same .then
URL: /api/todo
DATA: todo JSON object
In TodoService
add: create: function(todo) {}
![Page 91: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/91.jpg)
Refreshing the list of todos?
• Check out step7-events
• Scope events
• Can broadcast / listen for events using $scope
![Page 92: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/92.jpg)
BACK TO THEORY FOR A BIT
![Page 93: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/93.jpg)
Bookmarking in a Single Page App
In JS, for deep linking, we need to:
• Have a state machine
• Have an allotted view which changes
• Manage addition and removal from history
• Attach the right controller and scope with each view
• Potentially load all content before displaying
![Page 94: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/94.jpg)
AngularJS routing
• $routeProvider Service
• Each route consists of
– A URL Regex
– A Template
– A Controller
– Other parameters
![Page 95: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/95.jpg)
The ng-view
• The part of the single page app that responds to URL changes
• Associated with a single controller
• One ng-view per app only!
![Page 96: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/96.jpg)
Handling route parameters
• Opening a list of recipes
• Opening a single recipe
• Declaratively declare them
– ‘/todo/:id’
• Now available as
– $routeParams.id
• Dependency Injection!
![Page 97: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/97.jpg)
Avoiding partial loads – resolve
• An Empty UI while the server responds
• Broken styling / formatting due to lack of data
• Avoid it all with “resolve”
• What is Resolve?
– A series of promises
– Guaranteed to be resolved before the view is shown
– Passed in as parameters to the controller
![Page 98: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/98.jpg)
SESSION 2 CODE-ALONG CONTINUES
![Page 99: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/99.jpg)
Code Along – Session 2
•Templates added for routesstep8
•Add routes for create, update, and allstep9
![Page 100: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/100.jpg)
Step 9 - Adding routes
• Include angular-route.js• Include ngRoute as a module dependency• Angular.module().config()• $routeProvider.when(url, configObj)• configObj Possible params
– templateUrl or template– controller– controllerAs– redirectTo– resolve
![Page 101: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/101.jpg)
Step 9 – Reusing Templates
• Create vs Edit
• Same UI, different server calls
![Page 102: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/102.jpg)
Step 9 – Other cool things
• Redirect user after adding / updating todo
• Add href links to navigate within application
– Add Todo
– Edit Todo
– Home Page
• ng-href vs href
– Also, ng-src vs src
![Page 103: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/103.jpg)
BACK TO THEORY FOR A BIT
![Page 104: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/104.jpg)
Authorization in SPAs
• Server side critical
– Session cookies
– Token based
• Client side
– Interceptors
– Resolves
– Cookies automatic
– Tokens, extra effort
![Page 105: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/105.jpg)
Advanced $http
• Common Error Handling
• Request / Response transformations
• Extending $http
![Page 106: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/106.jpg)
$http - Interceptors
• Request & Response interceptors
• Implement factory
– Return object with
• Request
• requestError
• Response
• responseError
![Page 107: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/107.jpg)
A Sample Response Interception
.factory(‘myInt’, [‘$q’, function($q) {return {
response: function(resp) {return resp;
}, responseError: function(err) {if (canRecover(err)) { // Do Something }else { $q.reject(err); }
}};
});
![Page 108: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/108.jpg)
$http – Request / Response Transformations
• transformRequest & transformResponse
– function()
– Global (config() section) or $http level
• Take data as a parameter
– Return response in needed format
![Page 109: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/109.jpg)
END OF SESSION 2
![Page 110: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/110.jpg)
SESSION 3 – TESTING
![Page 111: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/111.jpg)
Agenda
• Automated Testing – what, why
• Unit testing
• Scenario Testing
![Page 112: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/112.jpg)
Why should you unit test?
• You want to catch errors at the earliest possible time
• You want to ensure that you don’t end up breaking older features
• You don’t have a compiler to tell you when you make a typo
![Page 113: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/113.jpg)
The 5 * 5 * 5 case
The Setup
• Server – 5 Flows
• Client – 5 Flows
• Client Input – 5 Flows
Testing it
• Manually– All possible permutations
– 5 * 5 * 5 = 125 tests to ensure all flows are tested
• Automated– Minimize smartly
– 5 tests for server
– 5 for client
– 5 for client input
– Another 5 – 10 end to end
– Total 20 – 25 tests
![Page 114: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/114.jpg)
TDD and you
Test Driven Development, or TDD, is an AGILE methodology that flips the development lifecycle, by ensuring that tests are written first before the code is implemented, and that tests drive the development, and are not just used as a validation tool.
The tenets of TDD are simple:• Code is written only when there is a failing test that requires the
code to pass• Just the bare minimum amount of code is written to ensure that
the test passes• Duplication is removed at every step• Once all tests are passing, the next failing test is added for the next
required functionality.
![Page 115: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/115.jpg)
TDD - Continued
These simple rules ensure that:
1. Your code develops organically, and that every line of code written is purposeful.
2. Your code remains highly modular, cohesive and reusable (as you need to be able to test it)
3. You provide a comprehensive array of tests to prevent future breakages and bugs
4. The tests also act as specification and thus documentation for future needs and changes.
![Page 116: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/116.jpg)
Unit Testing in AngularJS world
• Jasmine (BDD Style)
• Declarative
• Reads like English
• Testacular for running tests
![Page 117: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/117.jpg)
The Jasmine / BDD framework
describe("MyController:", function() {it("to work correctly", function() {
var a = 12;var b = a;
expect(a).toBe(b);expect(a).not.toBe(null);
});});
![Page 118: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/118.jpg)
Dependency Injection in Tests
• Testing your TodoService?
beforeEach(inject(function(TodoService) {
}));
Want a $rootScope? Same way.
![Page 119: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/119.jpg)
SESSION 3 CODE-ALONG STARTS NOW
![Page 120: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/120.jpg)
Code Along – Initial Setup
Run:sudo npm install –g karma-cli
cd step10karma start
OR
cd step10
../node_modules/karma/bin/karma start
OR DO IT FROM WEBSTORM
![Page 121: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/121.jpg)
Code Along – Session 3
• Left off from session 2step10
• Add a test for fetching todoliststep11
• Add a test for creating todostep12
![Page 122: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/122.jpg)
Testing services
• beforeEach(module(ModuleName))
• beforeEach(inject(function(dep1, dep2) {}));
• Write your tests in each it block
![Page 123: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/123.jpg)
Unit Testing controllers
• Ask for $controller service
• Create controller instance
– Pass in context specific dependencies
– Like $scope, $routeParams
![Page 124: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/124.jpg)
Unit Testing with XHRs
• Ask for $httpBackend service
• $httpBackend.expectGET (or expectPOST)
• Provide expected URL
• .respond(responseData)
• Don’t forget the $httpBackend.flush() calls
• Don’t forget afterEach with– $httpBackend.verifyNoOutstandingExpectation()
– $httpBackend.verifyNoOutstandingRequest()
![Page 125: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/125.jpg)
Step 11 – Testing LandingCtrl
• Create controller instance– $controller(‘LandingCtrl’)
• Set expectations using $httpBackend– expectGET
– respond
– Set expectation before request is made
• Remember, asynchronous!– When does the server respond?
– flush()
![Page 126: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/126.jpg)
Step 12 – Testing CreateCtrl
• Create controller instance
• Setup todo object that will be created
– Where does it come from?
• When is the create request triggered?
– Set expectations before that
– expectPOST(url, data)
• What happens on success?
– Check redirect
![Page 127: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/127.jpg)
AND BACK TO THEORY FOR A BIT
![Page 128: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/128.jpg)
End to End testing
• Your unit tests pass
• Your business logic looks correct
• You have your routes setup
• Are you done?
• How do you know your application works?
![Page 129: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/129.jpg)
Angular Protractor
• AngularJS Aware
– Grab the value of a binding
– Understand the ng-repeat
• WebDriver enabled
– No need for yet another runner
• Debugging capabilities
– Pause / Resume at will
![Page 130: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/130.jpg)
Reduce the burden on manual QA
• Smoke Tests
• Build validation tests
• Run on every save?
• Catch breakages faster, fix faster
![Page 131: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/131.jpg)
Installation
• npm install –g protractor
• webdriver-manager update
![Page 132: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/132.jpg)
The configuration (conf.js)
// myConf.jsexports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['e2eSpec.js'],jasmineNodeOpts: {
showColors: true},capabilities: {
browserName: ’firefox'},baseUrl: ‘http://localhost:8000’
}
![Page 133: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/133.jpg)
Protractor – Writing Simple tests
• Add a simple configuration
– Point it to WebDriver and your tests
• Write the test
• Jasmine based
– browser.get('http://localhost:8000');
– browser.findElements(by.repeater(’todo in landingCtrl.todos'))
![Page 134: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/134.jpg)
Protractor – Interacting with the UI
• AngularJS Aware
• Element
– By.binding
– by.model
– by.repeater
• Browser.debugger()
• Browser.takeScreenshot()
![Page 135: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/135.jpg)
Running: Step by step
Install Webdriver (First time only):webdriver-manager update
Start Webdriver:webdriver-manager start
Start Server:node server.js
Start Protractor:cd test/e2eprotractor conf.js
![Page 136: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/136.jpg)
END OF SESSION 3
![Page 137: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/137.jpg)
SESSION 4 – DIRECTIVES & BEST PRACTICES
![Page 138: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/138.jpg)
Agenda
• Directives
– Concepts
– Creating your own
• Best Practices
– Tools
– Project Structure
– Other Modules
![Page 139: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/139.jpg)
Directives
• Reusable UI widgets
• Rendering + Behavior
• DOM Manipulation needed Directive
![Page 140: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/140.jpg)
Ng-include
• A poor man’s directive
• Rendering, no behavior
• Dependent on context
![Page 141: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/141.jpg)
SESSION 4 CODE-ALONG STARTS
![Page 142: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/142.jpg)
Code Along – Session 4
•Extract out stock repeater
•Use ng-include to include rendering logic
step13
![Page 143: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/143.jpg)
Step 13 – ng-include
• Extract out todo template into todo-widget.html
• Include it using ng-include
– Remember, ng-include expects a variable
– Use single quotes inside double quotes to tell it it is a string constant
![Page 144: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/144.jpg)
Limitations of ng-include
• Expects each user to know name and path to the template
• Dependent on context
– Expects controller with functions to be defined
– Expects variables to be defined with certain names
• Not great for reusability
• Hard to make self-contained
![Page 145: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/145.jpg)
The Two Types of Directives
Display Input
![Page 146: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/146.jpg)
The Directive Life Cycle
• Directive Created
• Template Element Compiled
– Template Level Modifications done here
• Scope, Controller created
• Link Function
– Pre & Post linking (if children)
![Page 147: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/147.jpg)
Understanding your options
• Scope
– Bindings
• restrict
• Template / Template URL
• Transclude
• Controller
• Compile / link
![Page 148: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/148.jpg)
Restrict
• A Attribute <div my-dir></div>
• C Class <div class=“my-dir”></div
• E Element <my-dir></my-dir>
![Page 149: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/149.jpg)
Scope
• False Default, shares parent scope
• True Creates a new scope
• {} isolated scope
– = binding -> Objects
– @ binding -> Attributes / Interpolated Strings
– & binding -> Functions
![Page 150: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/150.jpg)
The Compile function
• DOM transformations
• Common to all instances of directive
– Think ng-repeat
– Think ng-view
• No Scope yet
![Page 151: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/151.jpg)
The Linking Function
• Ability to add specific behavior
– When your directive is first loaded
– For future behavior, restricted to the element
• Run once for each instance of your element
![Page 152: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/152.jpg)
Directive Controllers
• Controller functions for your directive
• Used for cross directive communication
• Use Link
– When you have functionality specific to your directive
• Use Controller
– When you have functionality that other directives (usually child) will need to access
![Page 153: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/153.jpg)
Transclusions
• Customized content for directives
– Changes from usage to usage
• Think Tabs
• Think Zippy / Accordions
• Think Carousels
![Page 154: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/154.jpg)
SESSION 4 CODE-ALONG CONTINUES
![Page 155: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/155.jpg)
Code Along – Session 4
• Convert ng-include to directivestep14
• Convert directive to fully contained with data passed instep15
• Delete todo and reload liststep16
![Page 156: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/156.jpg)
Step 14 - Converting ng-include to directive
• Create directive todoWidget
– Use as todo-widget in HTML
• Return Directive definition object
– Restrict: ‘A’
– templateUrl: ‘components/todo-widget/todo-widget.html’
![Page 157: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/157.jpg)
Step 15 - Self contained directives
• Scope param
– ‘=‘ binding
– todo: ‘=todoData’
– Takes todo-data in HTML, saves it as $scope.todo
• Link function
– Gets three arguments - $scope, $element, $attrs
– getTodoClass function on $scope
![Page 158: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/158.jpg)
Step 16 – Delete todo and reload list
• Add del function in todo-service– $http[“delete”](‘/api/todo’ + id);
• Add button in todo-widget.html– ng-click=“deleteTodo()”
• In directive– Add deleteTodo() function which calls service– Add whenDelete: ‘&’ in scope attribute– On success of service call, call $scope.whenDelete()
• In LandingCtrl– Add reload function– In HTML, add when-delete=“lCtrl.reload()”
![Page 159: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/159.jpg)
BACK TO THEORY
![Page 160: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/160.jpg)
BEST PRACTICES, MODULES, TOOLS
![Page 161: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/161.jpg)
10 DOS AND 10 DON’TS IN ANGULARJS
![Page 162: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/162.jpg)
DO #1: WRITE YOUR UNIT TESTS (AND SCENARIO TESTS)
![Page 163: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/163.jpg)
DO #2: LEVERAGE DATA BINDING
![Page 164: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/164.jpg)
DO #3: WRAP 3RD PARTY COMPONENTS AS DIRECTIVES / SERVICES
![Page 165: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/165.jpg)
DO #4: USE MODULES & ORGANIZE CODE BY FUNCTIONALITY
![Page 166: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/166.jpg)
DO #5: USE TRACK BY FOR NG-REPEAT
![Page 167: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/167.jpg)
DO #6: NAMESPACE YOUR CODE
![Page 168: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/168.jpg)
DO #7: USE MULTIPLE LAYERS FOR SERVICES
![Page 169: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/169.jpg)
DO #8: MINIMIZE DATA ON SCOPE / THIS
![Page 170: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/170.jpg)
DO #9: USE THE CONTROLLER AS SYNTAX
![Page 171: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/171.jpg)
DO #10: USE RESOLVE FOR PRE-ROUTE CHECKS & INTERCEPTORS FOR ALL OTHERS
![Page 172: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/172.jpg)
DON’T #1: USE $ROOTSCOPE AS A STORE. DON’T USE $SCOPE TO SHARE FUNCTIONS & VARIABLES
![Page 173: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/173.jpg)
DON’T #2: DOM MANIPULATION IN CONTROLLER
![Page 174: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/174.jpg)
DON’T #3: OVERUSE FILTERS IN YOUR HTML
![Page 175: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/175.jpg)
DON’T #4: PUT DATA YOU DON’T SHOW ON SCOPE / THIS
![Page 176: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/176.jpg)
DON’T #5: MANIPULATE THE UI DIRECTLY
![Page 177: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/177.jpg)
DON’T #6: USE GLOBAL SELECTORS IN DIRECTIVES
![Page 178: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/178.jpg)
DON’T #7: GO OVERBOARD WITH NG-REPEATS
![Page 179: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/179.jpg)
DON’T #8: OVERUSE SCOPE EVENTS IN YOUR APPLICATION
![Page 180: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/180.jpg)
DON’T #9: FORGET CLEANUP IN YOUR CONTROLLERS & DIRECTIVES
![Page 181: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/181.jpg)
DON’T #10: CREATE GIANT FILES OR FOLDERS
![Page 182: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/182.jpg)
Other modules
• Animation
• Touch
• Cookies
• Resource
• Security
• Routing
![Page 183: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/183.jpg)
BEST PRACTICES
![Page 184: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/184.jpg)
Directory Structure
• Yeoman / Angular – seed• App
– images– css– Vendors (libs)– sections– components
• Tests– Spec
• Mimic js folder structure
– E2e• Reflect app heirarchy
![Page 185: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/185.jpg)
Modularizing your codebase
• What can be reused?
• What belongs in logical groups?
• Group by functionality, not by type
![Page 186: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/186.jpg)
Build Process
• Grunt / Ant
• Glob / Minify your code base
• Load at the end of body
• Cache static files
– Namespace by version
– Use Etags
• ng-boilerplate is a great starting point
![Page 187: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/187.jpg)
RequireJS
• Good
• Can be overkill
– Lot of extra boilerplate
• Great for lazy loading dependencies
• Beneficial only if you have hundreds of files
![Page 188: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/188.jpg)
Dependency Injection
• Use it
• Depend on it
• Use the [] notation (more on this later)
• Capture external dependencies in Services
• Use Mocks to inject dependencies in tests
• Look at ng-annotate if you want to be lazy
![Page 189: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/189.jpg)
3rd party callbacks & $apply
Do
• Use 3rd party libraries and components
• Integrate them as directives / services when possible
Don’t
• Forget to call $apply to let angular know when to do work
![Page 190: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/190.jpg)
Handling Data & ACLs
• Resolve
– Load Data
– Handle auth checks
– Login or not?
• Interceptors
– Per request level
![Page 191: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/191.jpg)
Flashing {{}} in HTML
• Use ng-cloak
• Use ng-bind instead of {{ }}
![Page 192: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/192.jpg)
Syntax
• Use module. Syntax
• Use safe DI
• Namespace as much as possible
![Page 193: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/193.jpg)
Putting things on $scope
• Minimize
• What the view needs only!
• The scope is heavy and expensive
• Every item gets digested and dirty checked
• Think twice, and thrice first
![Page 194: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/194.jpg)
The $rootScope
DO NOT
• Use the root scope to store global state
• Use the root scope as a communication mechanism
• In fact, forget there is a parent $rootScope if at all possible
Valid Uses:
• Broadcasting and listening for events
![Page 195: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/195.jpg)
Communicating in the App
• Services
• Scope $broadcast, $emit and $on
• URL Params
![Page 196: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/196.jpg)
Attribute Directives
• You can create directives that are
– Attributes (like ng-show, ng-hide)
– Elements (<datepicker>)
– Classes (<div class=“autocomplete”>)
– Comments (<!– datepicker -->)
• But
– Always prefer to use attributes or classes
– IE compatibility issues!
![Page 197: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/197.jpg)
Structuring Business Logic
Controllers• should not reference DOM• should have view behavior
– What should happen if user does X– Where do I get X from?
Services• should not reference DOM (mostly)• are singletons• have logic independent of view
– Do X operation
PS: Do put DOM manipulation in Directives
![Page 198: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/198.jpg)
Using the [] for DI
myApp.controller(‘MyCtrl’, function($scope, $location) {});
Is the same as
myApp.controller(‘MyCtrl’, [‘$scope’, ‘$location’, function($scope, $loc) {}]);
![Page 199: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/199.jpg)
Using the [] for DI
Until you compile your code!
myApp.controller(‘MyCtrl’, function(a, xy) {});
Is not the same as
myApp.controller(‘MyCtrl’, [‘$scope’, ‘$location’, function(a, xy) {}]);
[] notation is the only way AngularJS knows which params are which!
![Page 200: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/200.jpg)
To $ or not to $
• $ is used by AngularJS internals only
– $scope
– $http
– $resource
• Don’t use $ when you are naming your own services, controllers, etc.
![Page 201: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/201.jpg)
USEFUL TOOLS & LIBRARIES
![Page 202: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/202.jpg)
Batarang
![Page 203: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/203.jpg)
Karma + Webstorm
![Page 204: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/204.jpg)
3rd Party Components
• Wijmo
• KendoUI
• Angular-UI
• ngModules.org
![Page 205: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/205.jpg)
Other Tools
• Yeoman
• Ng-Boilerplate
![Page 206: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/206.jpg)
SO IN SUMMARY…
![Page 207: AngularJS One Day Workshop](https://reader033.vdocuments.site/reader033/viewer/2022052316/559453101a28abc84f8b4720/html5/thumbnails/207.jpg)
Feedback
– Feedback?
– Comments?
– Suggestions?
• omniscient1 on Twitter
• Recommend us on LinkedIn (FundooSolutions) if you like it