Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ......
Transcript of Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ......
![Page 1: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/1.jpg)
Angular GotchasBest 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
![Page 2: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/2.jpg)
$Scope
Shared vs.
Isolate
![Page 3: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/3.jpg)
<body ng-controller=‘myCTRL’> <full-name/> </body>
![Page 4: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/4.jpg)
app.directive("fullName", function(){ return {
scope: false, template: …" };
<body ng-controller=‘myCTRL’> <full-name/> </body>
![Page 5: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/5.jpg)
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 - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/6.jpg)
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 - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/7.jpg)
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 - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/8.jpg)
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 - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/9.jpg)
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 Scope TWO WAY Binding
![Page 10: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/10.jpg)
An Angular Module
![Page 11: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/11.jpg)
Controllers { productsCTRL checkoutCTRL }
An Angular Module
![Page 12: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/12.jpg)
Controllers { productsCTRL checkoutCTRL }
Filters { * currency * orderBy * filter distinctCategories }
An Angular Module
![Page 13: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/13.jpg)
Controllers { productsCTRL checkoutCTRL }
Filters { * currency * orderBy * filter distinctCategories }
Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’ }
An Angular Module
![Page 14: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/14.jpg)
Controllers { productsCTRL checkoutCTRL }
Filters { * currency * orderBy * filter distinctCategories }
Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’ }
Factories { … }
An Angular Module
![Page 15: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/15.jpg)
Controllers { productsCTRL checkoutCTRL }
Filters { * currency * orderBy * filter distinctCategories }
Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’ }
Factories { … } Directives
An Angular Module
![Page 16: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/16.jpg)
Controllers { productsCTRL checkoutCTRL }
Filters { * currency * orderBy * filter distinctCategories }
Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’ }
Factories { … } Directives
An Angular Module
Module(s) “Dependencies”
![Page 17: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/17.jpg)
![Page 18: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/18.jpg)
listOfProducts.html
SportzApp Module “Bucket”
![Page 19: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/19.jpg)
mainCtrl --------------------- $scope
listOfProducts.html
SportzApp Module “Bucket”
![Page 20: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/20.jpg)
mainCtrl --------------------- $scope
cart (factory)
listOfProducts.html
SportzApp Module “Bucket”
![Page 21: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/21.jpg)
mainCtrl --------------------- $scope
checkoutCTRL --------------------- $scope
cart (factory)
listOfProducts.html
SportzApp Module “Bucket”
![Page 22: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/22.jpg)
mainCtrl --------------------- $scope
checkoutCTRL --------------------- $scope
cart (factory)
listOfProducts.html
cartSummary.html
placeOrder.html
thankYou.html
SportzApp Module “Bucket”
![Page 23: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/23.jpg)
Web ServerClient Machine
![Page 24: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/24.jpg)
Web ServerClient Machine
Angular Controllers
Angular Directives
![Page 25: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/25.jpg)
Web ServerClient Machine
Angular Controllers
Angular Directives
Local Server Ajax Cache Factory Biz Log
![Page 26: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/26.jpg)
Recap• Don’t overuse modules
![Page 27: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/27.jpg)
Recap• Don’t overuse modules • Don’t overuse isolate scope
![Page 28: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/28.jpg)
Recap• Don’t overuse modules • Don’t overuse isolate scope • Consider Directives and reusability
![Page 29: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/29.jpg)
Recap• Don’t overuse modules • Don’t overuse isolate scope • Consider Directives and reusability • Don’t overuse watches
![Page 30: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/30.jpg)
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 - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/31.jpg)
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 - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/32.jpg)
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 - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/33.jpg)
Angular GotchasBest 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
![Page 34: Angular Gotchas - Windows · PDF file · 2016-01-26Angular Gotchas Best of Web ... $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 ... app.directive("fullName", function(){](https://reader031.fdocuments.in/reader031/viewer/2022021504/5ab258ea7f8b9a7e1d8d48bc/html5/thumbnails/34.jpg)
Contact Info
Mike Emo Email: [email protected] Blog: TheMikeEmo.com Phone: 612-615-6937
Nick Thurow [email protected]
.Net Solution https://github.com/emomon23/IntroToAngular