AngularJS One Day Workshop

AngularJS Workshop
JSFoo 2014
Shyam Seshadri

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

Introduction
• Ex Googler
• Author
– AngularJS for O’Reilly
– AngularJS Up & Running for O’Reilly
• Entrepreneur
• Coder / Geek

Agenda
• 1 day
• 4 Sessions
• Beginning to App in 16 Steps
• Hands on
• Questions? Try & save them for end of each
session

Agenda (contd…)
Session 1
• Introduction & History
• Basic Concepts &
Terminologies
•Working with
Controllers
• Angular Services
•Working with AngularJS
inbuilt services
Session 2
• Creating your own
services
• Introduction to $http
• Promises in AngularJS
• Routing

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

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

Github Repo
http://is.gd/ajs1day

Code Along – Initial Setup
Checkout:
git clone https://github.com/Fundoo-
Solutions/angularjs-one-day.git
cd angularjs-one-day
Run:
npm install

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

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!

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

SESSION 1 – INTRODUCTION &
BASICS

Agenda
• MVC & the Web
• Introducing AngularJS
• Basic Concepts
• Terminologies
• Working with Controllers

The Changing Web Paradigm
Complexity Shift

The need to manage complexity
Data Retrieval Biz. Logic
Authorization
& Permissions
Rendering
Concurrent
usage
And so much
more

While hitting faster turnaround times
Feature 1
Deliver in 10 weeks
Feature 2
Deliver in 2 weeks
Feature 3
Deliver yesterday!!!
So how can we even attempt to do this?

The need for
• Structure
• Modularity
• Tests
• Speed of Development

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

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

The AngularJS MVC pattern
The Model is fetched and
manipulated by the
controller
Model gets rendered to
the User as the View
Model
View Controller
User Actions in
the view are
triggered in the
controller

A Simple Model in AngularJS
Just any JSON object returned by the Server

Template +
Scope => View
Projection
of the
Model
Can be styled
independently
Derives
behavior from
Controller

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

Data Binding
jQuery only world
• <p id=“nameTxt”></p>
• $(‘#nameTxt’).text(nameVar);
• nameVar.onChange(function(new
Val, oldVal) {
// Update #nameTxt
});
• If an input field, then additional
• $(‘#nameInp’).change(function() {
nameVar = $(‘#nameInp).val();
});
AngularJS world
• {{nameVar}}
• <input ng-model=“nameVar”>

Create your own components
jQuery only world
AngularJS world
What if we could just do this?
<tabs>
<tab title=“Home”>content here</tab>
<tab title=“Contact”>content here</tab>
</tabs>
Plus the content, and the logic of
Switching between the tabs, and so
much more.

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

Server communication
All the standards of $, plus
• Caching
• Configurability
• Resources
Define a Project as
• And then call
• Project.save()
• Project.delete()
• And more

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
•Reusability Why
•Everywhere in AngularJS
• From Controllers to Services, from Directives to Filters Where

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

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!

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

Who’s using AngularJS?
• Google (of course!)
– Double Click for Advertisers
– Youtube
– And many more
• Amazon
• Netflix
• ING
• Lots of startups

Future Plans
• Object.observable to replace dirty checking
• Web components / Shadow DOM integration
• Asynchronous Loading
• Http, Socket, Offline, much more
• Mobile first

AngularJS + Mobile
• <30 kb compressed & minified
• Optional ngTouch for Mobile
• Plays really well with Cordova / Phonegap

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>

SESSION 1 CODE-ALONG STARTS
NOW

Code Along
Run:
node server.js
Open localhost:8000
Each Step
Step 0 - Open localhost:8000/step0/app
and so on…

At the beginning
• Static HTML
• Hardcoded data
• No functionality

Code Along – Session 1
step1 • Hook up Angular
step2 • Controllers & Data binding
step3 •More controllers & using Directives
step4 • Forms and validation
step5 • Using AngularJS services

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

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

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

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’}

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

Step 3 - More controllers & data-binding
• Create an array of todos in LandingCtrl with
– author
– title
– completed
– dueOn
• Reuse data from previous step

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

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

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

Concepts
• Scopes
• Directives
• Services
• Controllers
• Filters
• Partials

Terminology - Scopes
• It’s the context, stupid!
• Exposes model to the View
• Allows event propagation
• Options?
– Parent / Child
– Root
– Isolated
– None

Scope Hierarchy in our Application
$rootScope
LandingCtrl
RepeatItem1
RepeatItem1
CreateCtrl

Terminology - Directives
• Reusable Components
• Covered in Session 4
• Can have a template
associated
• Behavior + Rendering
• Tabs
• Datepicker
• Thumbnail Widgets

Terminology - Services
• Behavior without a UI
• Biz. Logic shared across the app
• Application level Store!
• Think
– Server APIs
– Caches / Resources
– Factories

Terminology - Filters
• Formatting HTML content
• Can be chained with normal JSON objects
• Date Filter
• List Filter

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

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

Useful Inbuilt Services
• $http
• $resource
• $location
• $window
• $routeProvider

SESSION 2 – SERVICES, SERVERS &
ROUTING

Agenda
• Creating our own services
• Intro to $http
• Promises
• Routing using ngRoute

What is an AngularJS Service
• Initialized once
• Returns function / object
• Guaranteed singleton for scope of application

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?

•Create
TodoService
•Use service
across controllers
step6

Creating Services
• angular.factory(‘ServiceName’, [‘dep1’, ‘dep2’,
function(dep1, dep2) {}])
• Function returns
– A function
– Or an object
• What is returned is the public API

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()

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

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

Working with Servers
• $http
• ngResource
• Promises

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!

Callback Hell
var currentProfile = null, username = 'something';
fetchServerConfig(function(serverConfig) {
fetchUserProfiles(serverConfig.USER_PROFILES,
username, function(profiles) {
currentProfile = profiles.currentProfile;
});
});

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

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

The core $http service
• GET
• POST
• DELETE
• PUT
• JSONP

Configuring the $http request
• Headers
• Caching
• Params
• Data
• Transformations

More hooks on the $http -
Interceptors
• Common post return hook
• Recommended way of handling
– Errors & 404s
– Authorization

•Fetch list of todos
from server
•Post form data to
server for create
step7

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

Posting data to server
• $http.post(url, postData)
– Same .then
URL: /api/todo
DATA: todo JSON object
In TodoService
add: create: function(todo) {}

Refreshing the list of todos?
• Check out step7-events
• Scope events
• Can broadcast / listen for events using $scope

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

AngularJS routing
• $routeProvider Service
• Each route consists of
– A URL Regex
– A Template
– A Controller
– Other parameters

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!

Handling route parameters
• Opening a list of recipes
• Opening a single recipe
• Declaratively declare them
– ‘/todo/:id’
• Now available as
– $routeParams.id
• Dependency Injection!

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

SESSION 2 CODE-ALONG
CONTINUES

•Templates added for
routes step8
•Add routes for create,
update, and all step9

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

Step 9 – Reusing Templates
• Create vs Edit
• Same UI, different server calls

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

Authorization in SPAs
• Server side critical
– Session cookies
– Token based
• Client side
– Interceptors
– Resolves
– Cookies automatic
– Tokens, extra effort

Advanced $http
• Common Error Handling
• Request / Response transformations
• Extending $http

$http - Interceptors
• Request & Response interceptors
• Implement factory
– Return object with
• Request
• requestError
• Response
• responseError

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

$http – Request / Response
Transformations
• transformRequest & transformResponse
– function()
– Global (config() section) or $http level
• Take data as a parameter
– Return response in needed format

Agenda
• Automated Testing – what, why
• Unit testing
• Scenario Testing

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

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

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.

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.

Unit Testing in AngularJS world
• Jasmine (BDD Style)
• Declarative
• Reads like English
• Testacular for running tests

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

Dependency Injection in Tests
• Testing your TodoService?
beforeEach(inject(function(TodoService) {
}));
Want a $rootScope? Same way.

SESSION 3 CODE-ALONG STARTS
NOW

Code Along – Initial Setup
Run:
sudo npm install –g karma-cli
cd step10
karma start
OR
cd step10
../node_modules/karma/bin/karma start
OR DO IT FROM WEBSTORM

step10 • Left off from session 2
• Add a test for fetching todo
list step11
step12 • Add a test for creating todo

Testing services
• beforeEach(module(ModuleName))
• beforeEach(inject(function(dep1, dep2) {}));
• Write your tests in each it block

Unit Testing controllers
• Ask for $controller service
• Create controller instance
– Pass in context specific dependencies
– Like $scope, $routeParams

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()

Step 11 – Testing LandingCtrl
– $controller(‘LandingCtrl’)
• Set expectations using $httpBackend
– expectGET
– respond
– Set expectation before request is made
• Remember, asynchronous!
– When does the server respond?
– flush()

Step 12 – Testing CreateCtrl
• 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

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?

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

Reduce the burden on manual QA
• Smoke Tests
• Build validation tests
• Run on every save?
• Catch breakages faster, fix faster

Installation
• npm install –g protractor
• webdriver-manager update

The configuration (conf.js)
// myConf.js
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['e2eSpec.js'],
jasmineNodeOpts: {
showColors: true
},
capabilities: {
browserName: ’firefox'
},
baseUrl: ‘http://localhost:8000’
}

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'))

Protractor – Interacting with the UI
• AngularJS Aware
• Element
– By.binding
– by.model
– by.repeater
• Browser.debugger()
• Browser.takeScreenshot()

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/e2e
protractor conf.js

SESSION 4 – DIRECTIVES & BEST
PRACTICES

Agenda
• Directives
– Concepts
– Creating your own
• Best Practices
– Tools
– Project Structure
– Other Modules

Directives
• Reusable UI widgets
• Rendering + Behavior
• DOM Manipulation needed  Directive

Ng-include
• A poor man’s directive
• Rendering, no behavior
• Dependent on context

•Extract out stock
repeater
•Use ng-include to
include rendering
logic
step13

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

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

The Two Types of Directives
Display Input

The Directive Life Cycle
• Directive Created
• Template Element Compiled
– Template Level Modifications done here
• Scope, Controller created
• Link Function
– Pre & Post linking (if children)

Understanding your options
• Scope
– Bindings
• restrict
• Template / Template URL
• Transclude
• Controller
• Compile / link

Restrict
• A  Attribute <div my-dir></div>
• C  Class <div class=“my-dir”></div
• E  Element <my-dir></my-dir>

Scope
• False  Default, shares parent scope
• True  Creates a new scope
• {}  isolated scope
– = binding -> Objects
– @ binding -> Attributes / Interpolated Strings
– & binding -> Functions

The Compile function
• DOM transformations
• Common to all instances of directive
– Think ng-repeat
– Think ng-view
• No Scope yet

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

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

Transclusions
• Customized content for directives
– Changes from usage to usage
• Think Tabs
• Think Zippy / Accordions
• Think Carousels

SESSION 4 CODE-ALONG
CONTINUES

• Convert ng-include to
directive step14
• Convert directive to fully
contained with data passed in step15
step16 • Delete todo and reload list

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’

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

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()”

BEST PRACTICES, MODULES, TOOLS

10 DOS AND 10 DON’TS IN
ANGULARJS

DO #1: WRITE YOUR UNIT TESTS
(AND SCENARIO TESTS)

DO #3: WRAP 3RD PARTY COMPONENTS
AS DIRECTIVES / SERVICES

DO #4: USE MODULES & ORGANIZE
CODE BY FUNCTIONALITY

DO #5: USE TRACK BY FOR NG-REPEAT

DO #7: USE MULTIPLE LAYERS FOR
SERVICES

DO #8: MINIMIZE DATA ON SCOPE /
THIS

DO #9: USE THE CONTROLLER AS
SYNTAX

DO #10: USE RESOLVE FOR PRE-ROUTE
CHECKS & INTERCEPTORS FOR ALL
OTHERS

DON’T #1: USE $ROOTSCOPE AS A
STORE. DON’T USE $SCOPE TO SHARE
FUNCTIONS & VARIABLES

DON’T #2: DOM MANIPULATION IN
CONTROLLER

DON’T #3: OVERUSE FILTERS IN
YOUR HTML

DON’T #4: PUT DATA YOU DON’T
SHOW ON SCOPE / THIS

DON’T #5: MANIPULATE THE UI
DIRECTLY

DON’T #6: USE GLOBAL SELECTORS
IN DIRECTIVES

DON’T #7: GO OVERBOARD WITH
NG-REPEATS

DON’T #8: OVERUSE SCOPE EVENTS
IN YOUR APPLICATION

DON’T #9: FORGET CLEANUP IN
YOUR CONTROLLERS & DIRECTIVES

DON’T #10: CREATE GIANT FILES OR
FOLDERS

Other modules
• Animation
• Touch
• Cookies
• Resource
• Security
• Routing

Directory Structure
• Yeoman / Angular – seed
• App
– images
– css
– Vendors (libs)
– sections
– components
• Tests
– Spec
• Mimic js folder structure
– E2e
• Reflect app heirarchy

Modularizing your codebase
• What can be reused?
• What belongs in logical groups?
• Group by functionality, not by type

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

RequireJS
• Good
• Can be overkill
– Lot of extra boilerplate
• Great for lazy loading dependencies
• Beneficial only if you have hundreds of files

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

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

Handling Data & ACLs
• Resolve
– Load Data
– Handle auth checks
– Login or not?
• Interceptors
– Per request level

Flashing {{}} in HTML
• Use ng-cloak
• Use ng-bind instead of {{ }}

Syntax
• Use module. Syntax
• Use safe DI
• Namespace as much as possible

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

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

Communicating in the App
• Services
• Scope  $broadcast, $emit and $on
• URL Params

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!

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

Using the [] for DI
myApp.controller(‘MyCtrl’, function($scope, $location) {
});
Is the same as
myApp.controller(‘MyCtrl’, [‘$scope’, ‘$location’, function($scope, $loc) {
}]);

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!

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.

3rd Party Components
• Wijmo
• KendoUI
• Angular-UI
• ngModules.org

Other Tools
• Yeoman
• Ng-Boilerplate

Feedback
• shyam@befundoo.com
– Feedback?
– Comments?
– Suggestions?
• omniscient1 on Twitter
• Recommend us on LinkedIn (Fundoo
Solutions) if you like it

AngularJS One Day Workshop

Recommended

More Related Content

What's hot (20)

Similar to AngularJS One Day Workshop (20)

Recently uploaded (20)

AngularJS One Day Workshop

Editor's Notes