Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript...
-
Upload
kristin-mosley -
Category
Documents
-
view
225 -
download
0
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/1.jpg)
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
![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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/2.jpg)
$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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/3.jpg)
<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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/4.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/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 Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/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 Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/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 Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/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 Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/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 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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/10.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/11.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/12.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/13.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/14.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/15.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/16.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/17.jpg)
![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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/18.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/19.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/20.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/21.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/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 Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/23.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/24.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/25.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/26.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/27.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/28.jpg)
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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/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 Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/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 Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/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 Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/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 Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/33.jpg)
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
![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.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0121a28abf838ccc4c5/html5/thumbnails/34.jpg)
Contact Info
Mike EmoEmail: [email protected]: TheMikeEmo.comPhone: 612-615-6937
Nick [email protected]
.Net Solutionhttps://github.com/emomon23/IntroToAngular