Angular JS Training

Shivakanth Cheripelli

Agenda
1. Introduction to Angular JS
2. Whats new and different about Angular JS
3. Angular JS Framework (Model-View)
4. How you should be thinking about Angular
5. Using Angular with ASP.NET MVC
6. Creating and Angular View inside and MVC View
7. Using Angular inside MVC Layouts
8. Interpolation and Controllers
9. Built in Directives
10. How to think about Directives
11. Breaking down your first Directive
12. Working more on Directives
1.
2.
3.
4.
5.

ngRepeat/Tables,
ngClass, ngTemplate and ngInclude
ngModel, $Scope.$Watch
Disadvantages of Scope watcher
ngcloak

Agenda

13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

Deep linking in an MVC

Compile and Link Function
Directive communication Channels
Built in Filter and Customer Filters
Constants and Values
How to think about Services
Factories
Services
Providers
Decoraters
Dependency Injection

Getting Started

What is a Browser & how web pages get to the

browser?

*** The browser gets the HTML text of the page, parses it into a structure
that is internally meaningful to the browser, lays out the content of the
page, and styles the content before displaying it to end user. All of this
work happens behind the scenes.

What is SPA?

SPA Lifecycle

What Is AngularJS
1. It is a framework that is primarily used to build single-page web applications
2. Client-side technology, written entirely in JavaScript. It works with the long
established technologies of the web (HTML, CSS, and JavaScript) to make the
development of web apps easier and faster than ever before.
3. AngularJS makes it incredibly easy to build interactive, modern web
applications by increasing the level of abstraction between the developer
and common web app development tasks.

Best Practices
1. Best
1.
2.
3.
4.

Practices
MV* separation
DRY
Dont write hacky solutions
Dont try to re-invent the wheel

2. Dont write bad code

1. Performance
2. Reusability
3. Square peg, round hole
3. Test
1. Write the best tests!
2. Doesnt have to be TDD
4. Broaden your understanding
1. Learning curve should be steep!
2. Practice being curious
3. Refactor!
5. Read the source code!
1. Consumable
2. Error messages are bad!
3. Dissect the source

Download
AngularJS

Angular Architecture

One of the most confusing adjustments we need to make is learning how to think
about structuring the application

Structuring your Angular application

1.

2.

3.

Directory Structure
1.

How to structure your development application

2.

How to structure your test directory

Modules
1.

Modularize on function

2.

Modularize on functionality

Controllers
1.

Sharing data between controllers

4.

Directives

5.

Testing

Directory Structure
Recommended directory structure

Recommended test directory

structure

*** I recommend, using a tool called Grunt to concatenate project files together in a single file for production

Modularizing your angular application

1.

A module is the kernel of functionality for Angular apps

2.

Modules are a great way to reduce global scope noise

The following methods are valid ways to break up our functionality by modules:
Modularizing on function
.

The most recommended method. Divide the modules by feature. When we break
up our application by feature, we intend to focus on the module function, rather
than the types of functions were including.

*** In our production applications, we use this method of writing modular code and its highly recommend.

Modularizing your angular application

Modularizing on functionality

Divide the modules by type. We need to inject these modules as dependencies for
our main app, which makes it incredibly easy to set up tests for each module type
and also isolates and subdivides the functionality that well need to account for
when writing specs (tests).

*** One issue with this method is that it sometimes leaves us with a bunch of incredibly small modules. This outcome wont hurt
performance, but it can be cumbersome to develop.

The $digest Loop and Dirty checking

How do we get the magical data binding to work in only a few lines of code?
Disclaimer: Its very important that we understand how the $digest loop works and what is dirty checking

http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/

Demo
1. How to setup AngularJs application
2. Interpolation and controllers
3. Built-in Directives
4. ngRepeat
5. ngClass, ngTemplate and ngInclude
6. ngModel
7. $scope.$watch
8. Disadvantages of scope watcher
9. ngCloak

Caching in Angular

Caching $http requests in Angular

Why should we cache, anyway?
1. To reduce API calls,
2. To create scalable apps,
3. To improve performance etc

Introducing the $cacheFactory

Its a feature out of the box provided by AngularJS.

Yah! I cached the data

Retrieve data from

cache

How to manage cache?

What Cache provides for us, out of the box?
1. info()
returns the ID, size, and options of the cache object

2. put()
method allows us to put any javascript object into the cache
Eg: cache.put("hello", "world");

3. get()
method gives us access to the cache value for a key
Eg: cache.get("hello");

4. remove()
removes a key-value pair from the cache
Eg: cache.remove("hello");

5. removeAll()
function resets the cache and removes all cached values

6. destroy()
method removes all references of this cache from the cache registry.

AngularJS cache vs browser HTTP cache

Angular $cacheFactory

Browser HTTP cache

(Chrome)

Javascript heap memory

Disk

Eviction algorithm

Least recently used (LRU)

LRU

Life span

until page refresh

Determined by HTTP headers

Support for
revalidation

No

Yes

Requires
cooperation of
remote server

No

Yes

Example

Caching Demo

Security in Angular

Security in Angular
Strict Contextual Escaping: the $sce Service

Available by default in Angular version 1.2 and higher

$sce is a fantastic service that allows us to write whitelisted, secure code

by default and goes a long way toward helping us prevent XSS and other
vulnerabilities. Given this power, its important to understand what it is
that were doing so we can use it wisely

Very dangerous code and highly vulnerable for threats

Converting user input

In the controller:

Converting to a
trusted HTML

$sce API
The getTrusted() method takes two arguments:

$sce Parse
Similar to the $parse service, the parse method converts an Angular
expression into a function. If the expression is a literal constant, it calls the
$parse service; otherwise, it calls the $sce.getTrusted() service

The $sce library has a few helper methods for the parse() method

Configuring $sce

Security Demo

Optimizing Angular Apps

Optimizing Angular Apps

Why to optimize?

Optimizing Angular Apps

What to Optimize?
1. Optimize the $digest Loop
2. Optimize ng-repeat
3. Optimize $watch Functions
4. Use Bindonce the watcher is removed once the expression stabilizes in
the UI.
5. Optimize Filters
6. Figure out Unchanging Data and cache it.
7. Optimize your Page Load
1. Minification
2. Utilize the $templateCache

Optimizing the $digest Loop

e AngularJS API Reference for Directives

ngRepeat Documentation

Using Filters Demo

AngularJS extends HTML with new attributes.

AngularJS is perfect for Single Page Applications (SPAs).
AngularJS is easy to learn.

What You Should Already Know

Before you study AngularJS, you
MVC
Training
Deloitte
should
have a basic
understanding of:
HTML
CSS
JavaScript

Defining Routes Demo

actually tweaked the route just a little bit

Factory Demo