Post on 19-Jan-2016
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
memo@iEmosoft.com
$Scope
Sharedvs.
Isolate
<body ng-controller=‘myCTRL’> <full-name/></body>
app.directive("fullName", function(){ return {
scope: false, template: …" };
<body ng-controller=‘myCTRL’> <full-name/></body>
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
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
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
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
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
An Angular Module
Controllers { productsCTRLcheckoutCTRL
}
An Angular Module
Controllers { productsCTRLcheckoutCTRL
}
Filters { * currency * orderBy * filter distinctCategories}
An Angular Module
Controllers { productsCTRLcheckoutCTRL
}
Filters { * currency * orderBy * filter distinctCategories}
Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’}
An Angular Module
Controllers { productsCTRLcheckoutCTRL
}
Filters { * currency * orderBy * filter distinctCategories}
Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’}
Factories { … }
An Angular Module
Controllers { productsCTRLcheckoutCTRL
}
Filters { * currency * orderBy * filter distinctCategories}
Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’}
Factories { … } Directives
An Angular Module
Controllers { productsCTRLcheckoutCTRL
}
Filters { * currency * orderBy * filter distinctCategories}
Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’}
Factories { … } Directives
An Angular Module
Module(s)“Dependencies”
listOfProducts.html
SportzApp Module “Bucket”
mainCtrl ---------------------$scope
listOfProducts.html
SportzApp Module “Bucket”
mainCtrl ---------------------$scope
cart (factory)
listOfProducts.html
SportzApp Module “Bucket”
mainCtrl ---------------------$scope
checkoutCTRL---------------------$scope
cart (factory)
listOfProducts.html
SportzApp Module “Bucket”
mainCtrl ---------------------$scope
checkoutCTRL---------------------$scope
cart (factory)
listOfProducts.html
cartSummary.html
placeOrder.html
thankYou.html
SportzApp Module “Bucket”
Web ServerClient Machine
Web ServerClient Machine
AngularControllers
AngularDirectives
Web ServerClient Machine
AngularControllers
AngularDirectives
LocalServer
Ajax Cache Factory Biz Log
Recap• Don’t overuse modules
Recap• Don’t overuse modules• Don’t overuse isolate scope
Recap• Don’t overuse modules• Don’t overuse isolate scope• Consider Directives and reusability
Recap• Don’t overuse modules• Don’t overuse isolate scope• Consider Directives and reusability• Don’t overuse watches
Recap• Don’t overuse modules• Don’t overuse isolate scope• Consider Directives and reusability• Don’t overuse watches• Do consider local server pattern
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
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
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
memo@iEmosoft.com
Contact Info
Mike EmoEmail: Memo@iEmosoft.comBlog: TheMikeEmo.comPhone: 612-615-6937
Nick ThurowNThurow@gmail.com
.Net Solutionhttps://github.com/emomon23/IntroToAngular