AngularJSbuilding web apps like softwareBrent Goldsteinbrentlanegold@gmail.com
Some of the software Ive writtenApplesoft BasicPascal8088 AssemblerFORTRAN 77ADACPERLC++C#RubyJavascriptAppleII+MainframeE...
AngularJS is like writing softwareAngular follows patterns of software development- encapsulation- componentization / reus...
Directives and ControllersDirective is intended drive reusable,encapsulated renderingCentral idea, declare behavior in HTM...
Need to consider scopeDirectives can have private scopeThis is important, also provides forencapsulated behavior. Basicall...
Basic StructuremyApp.directive(directiveName, function() {return {restrict: E,scope: {varA: =, // 2-way bindingvarB: @, //...
Calling the directiveYou can pass variables from the calling scopeinto the directive scope<my-directive var-a="angular exp...
Use Case - Button GroupsGenerate a set of radio buttons that aredecoupled from the specific scenarioWanted a directive tha...
Two scopes, two controllersHTML Code<button-groupattr1="list" attr2="handlers"></button-group>Directive CodemyApp.directiv...
Using callback functionsSometimes you want to call a function, not seta value directly.You can actually pass functions to ...
Demo for dynamic button directiveThe disclaimer - NNYBCBIWNot necessarily your best code, but it worksFrom a database of m...
Route ResolverHow do you trigger an action when a page isfinished loading?Yep, you guessed it, the route resolverFrom the ...
Basic Structure$routeProvider.when(/somepage, {templateUrl: partials/mypa.html,resolve: {resolvePage : [myResolveFunc, fun...
Use Case - Dynamic HeaderAngular has views, which are greatBut, how to change the state of html elements outside ofthe vie...
Page resolve flow to update headerService handles communicating to controller, passes datato configure the header based on...
Demo for route resolveThe same disclaimer - NNYBCBIWNot necessarily your best code, but it worksVery simple, a skeleton ap...
Upcoming SlideShare
Loading in …5
×

AngularJS preso with directives and route resolve

3,753 views

Published on

examples showing how you can leverage angular capabilities with directives/controllers and the route-resolve capability

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,753
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
36
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

AngularJS preso with directives and route resolve

  1. 1. AngularJSbuilding web apps like softwareBrent Goldsteinbrentlanegold@gmail.com
  2. 2. Some of the software Ive writtenApplesoft BasicPascal8088 AssemblerFORTRAN 77ADACPERLC++C#RubyJavascriptAppleII+MainframeEmbeddedMainframeMinicomputerHP/Sun UnixHP/Sun UnixHP/Sun UnixPCLinuxLinuxnadanadanadanadanadaX/Motif / OpenGLPerl-CGIX/MotifWinFormsRailsAngularJSLanguages / Frameworks / Platformswhat, no Java?!...
  3. 3. AngularJS is like writing softwareAngular follows patterns of software development- encapsulation- componentization / reusability- separation of model from view w/binding- but, there is a client-side modelKind of opposite to web page designNot really friendly to external jqueryNeed to think like building widgets
  4. 4. Directives and ControllersDirective is intended drive reusable,encapsulated renderingCentral idea, declare behavior in HTML, butexecute in codeWhere does the code go? In a customcontroller inside the directive
  5. 5. Need to consider scopeDirectives can have private scopeThis is important, also provides forencapsulated behavior. Basically a boundary.The directives custom controller has directaccess to the directives scope. -- Just like anyother controller, really.
  6. 6. Basic StructuremyApp.directive(directiveName, function() {return {restrict: E,scope: {varA: =, // 2-way bindingvarB: @, // 1-way binding},controller: function($scope) {// declare reusable functions$scope.myFunc = function(a,b,c){$scope.varA = a*b/c; // neato}// do some other things here, but executes only once$scope.someVal = varB * 2.17;},template: "<div> Html can go here </div>"// templateUrl: /path/to/html/partial.html};});
  7. 7. Calling the directiveYou can pass variables from the calling scopeinto the directive scope<my-directive var-a="angular exp"var-b="angular exp"></my-directive>Note the name-with-dashes in attributes mapsto camelCase in the directive scope
  8. 8. Use Case - Button GroupsGenerate a set of radio buttons that aredecoupled from the specific scenarioWanted a directive that:- looped through a list of values- created the buttons- attached activate handlers to each button- exposed the current active value
  9. 9. Two scopes, two controllersHTML Code<button-groupattr1="list" attr2="handlers"></button-group>Directive CodemyApp.directive(buttonGroup, function(){// interior scope & controller...});App Controller CodemyApp.controller(mainController,function mainController($scope){});
  10. 10. Using callback functionsSometimes you want to call a function, not seta value directly.You can actually pass functions to the directiveBut, is there a way to create a morestreamlined payload / signature?Yes, we can just bundled into an object and callinside the directive
  11. 11. Demo for dynamic button directiveThe disclaimer - NNYBCBIWNot necessarily your best code, but it worksFrom a database of movies, generate buttons that triggerthe display of movie infoCode avail from:https://github.com/brentlane/tigley(tigley is the name of my cat...)
  12. 12. Route ResolverHow do you trigger an action when a page isfinished loading?Yep, you guessed it, the route resolverFrom the route config you can specify afunction that will be called when the route iscomplete, page is done loading
  13. 13. Basic Structure$routeProvider.when(/somepage, {templateUrl: partials/mypa.html,resolve: {resolvePage : [myResolveFunc, function(myResolveFunc) {var dataToPass = { somedata: "yadda", moredata: "wubba"};myResolveFunc.doSomething(dataToPass);}]}});Pretty straightforward, specify a callback function and pass any dataAs this is Angular, you could also use dependency injection to access outsidedata in the resolve call
  14. 14. Use Case - Dynamic HeaderAngular has views, which are greatBut, how to change the state of html elements outside ofthe view, like a header?Yep, lets use the route resolver. It can trigger the behaviorThen we can mediate through a service which broadcasts amessage, which is picked up by a controller thats outsideof the view.
  15. 15. Page resolve flow to update headerService handles communicating to controller, passes datato configure the header based on routeHTML PageThe ViewRoute Resolve1) resolve view2) trigger resolve funcBroadcast ServiceheaderOuter Page Controller
  16. 16. Demo for route resolveThe same disclaimer - NNYBCBIWNot necessarily your best code, but it worksVery simple, a skeleton app with a couple views, theheader text changes for each viewCode at:https://github.com/brentlane/tigley

×