sas training day 1

7/23/2019 SAS Training Day 1

http://slidepdf.com/reader/full/sas-training-day-1 1/69

Shivakanth Cheripelli

Angular JS Training



1.Introduction to Angular JS

2.What’s new and different about Angular JS3.Angular JS Framework (Model-View)4.How you should be thinking about Angular5.Using Angular with ASP.NET MVC6.Creating and Angular View inside and MVC View

7.Using Angular inside MVC Layouts8.Interpolation and Controllers9.Built in Directives10.How to think about Directives11.Breaking down your first Directive

12.Working more on Directives1. ngRepeat/Tables,2. ngClass, ngTemplate and ngInclude3. ngModel, $Scope.$Watch4. Disadvantages of Scope watcher5. ngcloak

Agenda



13.Deep linking in an MVC

14.Compile and Link Function15.Directive communication Channels16.Built in Filter and Customer Filters17.Constants and Values18.How to think about Services19.Factories20.Services21.Providers22.Decoraters23.Dependency Injection

Agenda



Getting Started…



What is a Browser & how web pages get to thebrowser?

*** 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 thepage, and styles the content before displaying it to end user. All of thiswork happens behind the scenes.



What is SPA?



SPA Lifecycle



. !t is a framework that is primarily used to build single"page web applications

#. $lient"side technology, written entirely in %a&a'cript. !t works with the longestablished technologies of the web (HTML, $'', and %a&a'cript) to make thede&elopment of web apps easier and faster than e&er before.

. Angular%' makes it incredibly easy to build interacti&e, modern webapplications by increasing the le&el of abstraction between the de&eloperand common web app de&elopment tasks.

What Is AngularS



. +est ractices. M-* separation#. /0

. on1t write hacky solutions23. on1t try to re"in&ent the wheel2

#. on1t write bad code. erformance#. /eusability. '4uare peg, round hole

. Test. 5rite the best tests6#. oesn1t7 ha&e to be T

3. +roaden your understanding. Learning cur&e should be steep6#. ractice being curious

. /efactor6

8. /ead the source code6. $onsumable#. 9rror messages are bad6. issect the source

Best Practices



!ownloadAngularS



Angular Architecture

:ne of the most confusing ad;ustments we need to make is learning how to think

about structuring the application

Structuring your Angular application

.

irectory 'tructure. How to structure your de&elopment application

#. How to structure your test directory

#. Modules

. Modulari<e on function

#. Modulari<e on functionality

. $ontrollers

. 'haring data between controllers

3. irecti&es

8. Testing



!irectory Structure"eco##ended directory structure

*** ! recommend, using a tool called =runt to concatenate pro;ect >les together in a single >le for production

"eco##ended test directorystructure



$odulari%ing your angular application

*** !n our production applications, we use this method of writing modular code and it1s highly recommend.

. A module is the kernel of functionality for Angular apps

#. Modules are a great way to reduce global scope noise

The following methods are valid ways to break up our functionality by modules:

$odulari%ing on function

. The most recommended method. i&ide the modules by feature. 5hen we break

up our application by feature, we intend to focus on the module function, ratherthan the types of functions we1re including.



$odulari%ing your angular application

*** :ne issue with this method is that it sometimes lea&es us with a bunch of incredibly small modules. This outcome won1t hurtperformance, but it can be cumbersome to de&elop.

$odulari%ing on functionality

i&ide the modules by type. 5e need to in;ect 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 subdi&ides the functionality that we1ll need to account forwhen writing specs (tests).



he 'digest Loop and !irty chec(ingHow do we get the magical data binding to work in only a few lines of code?

Disclaimer: !t1s &ery important that we understand how the @digest loop works and what is dirty checking

httpBBangular"tips.comBblogB#CBCDBwatch"how"the"apply"runs"a"digestB



. How to setup Angular%s application

#. !nterpolation and controllers

. +uilt"in irecti&es

3. ng/epeat

8. ng$lass, ngTemplate and ng!nclude

E. ngModel

F. @scope.@watch

D. isad&antages of scope watcher

G. ng$loak

!e#o



)aching in Angular



Why should we cache* anyway?

. To reduce A! calls,

#. To create scalable apps,

. To impro&e performance etc2

Introducing the 'cache+actory

!t1s a feature out of the box pro&ided by Angular%'.

)aching 'http re,uests in Angular

0ah6 ! cached the data

/etrie&e data fromcache



What )ache pro-ides for us* out of the bo.?

. info()

returns the !, si<e, and options of the cache ob;ect

#. put()

method allows us to put any ;a&ascript ob;ect into the cache

9g cache.put(hello, world)I

. get()

method gi&es us access to the cache &alue for a key

9g: cache.get(hello)I

3. remo&e()

remo&es a key"&alue pair from the cache

9g cache.remo&e(hello)I

8. remo&eAll()

function resets the cache and remo&es all cached &alues

E. destroy()

method remo&es all references of this cache from the cache registry.

/ow to #anage cache?



AngularS cache -s browser /P cache

Angular 'cache+actory Browser /P cache0)hro#e1

%a&ascript heap memory isk

2-iction algorith# Least recently used (L/J) L/J

Life span until page refresh etermined by HTT headers

Support forre-alidation

Ko 0es

"e,uirescooperation ofre#ote ser-er

Ko 0es

2.a#ple



)aching !e#o



Security in Angular



Strict )onte.tual 2scaping3 the 'sce Ser-ice

A&ailable by default in Angular &ersion .# and higher

$sce is a fantastic service that allows us to write whitelisted, secure codeby default and goes a long way toward helping us prevent XSS and other

vulnerabilities. iven this power, it!s important to understand what it isthat we!re doing so we can use it wisely

Security in Angular

-ery dangerous code and highly &ulnerable for threats



)on-erting user input

!n the controller

$on&erting to atrusted HTML



The getTrusted() method takes two arguments:

'sce API



'imilar to the @parse ser&ice, the parse method con&erts an Angular

expression into a function. !f the expression is a literal constant, it calls the@parse ser&iceI otherwise, it calls the @sce.getTrusted() ser&ice

'sce Parse

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



)on4guring 'sce



Security !e#o



5pti#i%ing Angular Apps



5hy to optimi<e?




What to 5pti#i%e?

. :ptimi<e the @digest Loop

#. :ptimi<e ng"repeat

. :ptimi<e @watch unctions

3. Jse +indonce the watcher is remo&ed once the expression stabili<es inthe J!.

8. :ptimi<e iltersE. igure out Jnchanging ata and cache it.

F. :ptimi<e your age Load

. Mini>cation

#. Jtili<e the @template$ache




5pti#i%ing the 'digest Loop



AngularS API "eference for !irecti-es



ng"epeat !ocu#entation



6sing +ilters !e#o



AngularJS extends HTML with new attributes. AngularJS is perfect for Single Page Applications (SPAs). AngularJS is easy to learn.

What You Should Already KnowBefore you study AngularJS, youshould have a basic understanding of:HTMLCSSJavaScript

MVC Training Deloitte



!e4ning "outes !e#o



actually tweaked the route ;ust a little bit



+actory !e#o

sas training day 1

Documents