Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript...

34
Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick Thurow http://www.tinyurl.com/mikeemo [email protected]

Transcript of Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript...

Page 1: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Angular GotchasBest of Web…but watch out

Responsive application build with HTML5 and Javascript

Mike R. EmoFounder iEmoSoft consulting

Featuring Nick Thurowhttp://www.tinyurl.com/mikeemo

[email protected]

Page 2: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

$Scope

Sharedvs.

Isolate

Page 3: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

<body ng-controller=‘myCTRL’> <full-name/></body>

Page 4: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

app.directive("fullName", function(){ return {

scope: false, template: …" };

<body ng-controller=‘myCTRL’> <full-name/></body>

Page 5: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

app.directive("fullName", function(){ return {

scope: false, template: …" };

<body ng-controller=‘myCTRL’> <full-name/></body>

myCtrl (Controller) $scope.firstName = ‘Mike’ $scope.lastName = ‘Emo’

fullName (Directive) $scope.age=31

myCtrl $scope firstName: ‘Mike’ lastName: ‘Emo’ age: 31

Page 6: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

app.directive("fullName", function(){ return {

scope: false, template: …" };

<body ng-controller=‘myCTRL’> <full-name/></body>

myCtrl (Controller) $scope.firstName = ‘Mike’ $scope.lastName = ‘Emo’

fullName (Directive) $scope.age=31

myCtrl $scope firstName: ‘Mike’ lastName: ‘Emo’ age: 31

They share the SAME scope

Page 7: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

app.directive("fullName", function(){ return {

scope: true, template: …" };

<body ng-controller=‘myCTRL’> <full-name/></body>

myCtrl (Controller) $scope.firstName: ‘Mike’ $scope.lastName: ‘Emo’

fullName (Directive) $scope.age: 31

myCtrl $scope firstName: ‘Mike’ lastName: ‘Emo’

fullName scope INHERITS from controller scope

fullName $scope age: 31

Page 8: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

app.directive("fullName", function(){ return {

scope: { }, template: …" };

<body ng-controller=‘myCTRL’> <full-name/></body>

myCtrl (Controller) $scope.firstName = ‘Mike’ $scope.lastName = ‘Emo’

fullName (Directive)

myCtrl $scope firstName: ‘Mike’ lastName: ‘Emo’

fullName $scope

Isolate Scope

Page 9: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

app.directive("fullName", function(){ return { scope: {

family:’=’ }, template: …" };

<body ng-controller=‘myCTRL’> <full-name family=‘lastName’ /></body>

myCtrl (Controller) $scope.firstName = ‘Mike’ $scope.lastName = ‘Emo’

fullName (Directive)

myCtrl $scope firstName: ‘Mike’ lastName: ‘Emo’

fullName $scope family: ‘Emo’

Isolate ScopeTWO WAY Binding

Page 10: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

An Angular Module

Page 11: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Controllers { productsCTRLcheckoutCTRL

}

An Angular Module

Page 12: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Controllers { productsCTRLcheckoutCTRL

}

Filters { * currency * orderBy * filter distinctCategories}

An Angular Module

Page 13: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Controllers { productsCTRLcheckoutCTRL

}

Filters { * currency * orderBy * filter distinctCategories}

Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’}

An Angular Module

Page 14: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Controllers { productsCTRLcheckoutCTRL

}

Filters { * currency * orderBy * filter distinctCategories}

Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’}

Factories { … }

An Angular Module

Page 15: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Controllers { productsCTRLcheckoutCTRL

}

Filters { * currency * orderBy * filter distinctCategories}

Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’}

Factories { … } Directives

An Angular Module

Page 16: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Controllers { productsCTRLcheckoutCTRL

}

Filters { * currency * orderBy * filter distinctCategories}

Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’}

Factories { … } Directives

An Angular Module

Module(s)“Dependencies”

Page 17: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.
Page 18: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

listOfProducts.html

SportzApp Module “Bucket”

Page 19: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

mainCtrl ---------------------$scope

listOfProducts.html

SportzApp Module “Bucket”

Page 20: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

mainCtrl ---------------------$scope

cart (factory)

listOfProducts.html

SportzApp Module “Bucket”

Page 21: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

mainCtrl ---------------------$scope

checkoutCTRL---------------------$scope

cart (factory)

listOfProducts.html

SportzApp Module “Bucket”

Page 22: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

mainCtrl ---------------------$scope

checkoutCTRL---------------------$scope

cart (factory)

listOfProducts.html

cartSummary.html

placeOrder.html

thankYou.html

SportzApp Module “Bucket”

Page 23: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Web ServerClient Machine

Page 24: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Web ServerClient Machine

AngularControllers

AngularDirectives

Page 25: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Web ServerClient Machine

AngularControllers

AngularDirectives

LocalServer

Ajax Cache Factory Biz Log

Page 26: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Recap• Don’t overuse modules

Page 27: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Recap• Don’t overuse modules• Don’t overuse isolate scope

Page 28: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Recap• Don’t overuse modules• Don’t overuse isolate scope• Consider Directives and reusability

Page 29: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Recap• Don’t overuse modules• Don’t overuse isolate scope• Consider Directives and reusability• Don’t overuse watches

Page 30: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Recap• Don’t overuse modules• Don’t overuse isolate scope• Consider Directives and reusability• Don’t overuse watches• Do consider local server pattern

Page 31: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Recap• Don’t overuse modules• Don’t overuse isolate scope• Consider Directives and reusability• Don’t overuse watches• Do consider local server pattern• Keep directives and controllers thin

Page 32: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Recap• Don’t overuse modules• Don’t overuse isolate scope• Consider Directives and reusability• Don’t overuse watches• Do consider local server pattern• Keep directives and controllers thin• Remove event handlers when applicable to avoid memory leaks

Page 33: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Angular GotchasBest of Web…but watch out

Responsive application build with HTML5 and Javascript

Mike R. EmoFounder iEmoSoft consulting

Featuring Nick Thurowhttp://www.tinyurl.com/mikeemo

[email protected]

Page 34: Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.

Contact Info

Mike EmoEmail: [email protected]: TheMikeEmo.comPhone: 612-615-6937

Nick [email protected]

.Net Solutionhttps://github.com/emomon23/IntroToAngular