AngularJS preso with directives and route resolve
3 likes4,119 views
The document discusses the use of AngularJS for building web applications, emphasizing concepts like encapsulation, componentization, and the separation of model and view. It provides examples of creating directives, controllers, and utilizing route resolvers to manage page loading and data passing. The author shares practical code snippets and links to a GitHub repository for further reference.
![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 data
As this is Angular, you could also use dependency injection to access outside
data in the resolve call](https://image.slidesharecdn.com/angularjspreso-130502212009-phpapp01/85/AngularJS-preso-with-directives-and-route-resolve-13-320.jpg)
AngularJS preso with directives and route resolve
- 1. AngularJS building web apps like software Brent Goldstein brentlanegold@gmail.com
- 2. Some of the software I've written Applesoft Basic Pascal 8088 Assembler FORTRAN 77 ADA 'C' PERL C++ C# Ruby Javascript AppleII+ Mainframe Embedded Mainframe Minicomputer HP/Sun Unix HP/Sun Unix HP/Sun Unix PC Linux Linux nada nada nada nada nada X/Motif / OpenGL Perl-CGI X/Motif WinForms Rails AngularJS Languages / Frameworks / Platforms what, no Java?!...
- 3. AngularJS is like writing 'software' Angular follows patterns of software development - encapsulation - componentization / reusability - separation of model from view w/binding - but, there is a client-side model Kind of opposite to 'web page' design Not really friendly to 'external jquery' Need to think like building 'widgets'
- 4. Directives and Controllers Directive is intended drive reusable, encapsulated rendering Central idea, declare behavior in HTML, but execute in code Where does the code go? In a custom controller inside the directive
- 5. Need to consider scope Directives can have private scope This is important, also provides for encapsulated behavior. Basically a boundary. The directive's custom controller has direct access to the directive's scope. -- Just like any other controller, really.
- 6. Basic Structure myApp.directive('directiveName', function() { return { restrict: 'E', scope: { varA: '=', // 2-way binding varB: '@', // 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. Calling the directive You can pass variables from the calling scope into the directive scope <my-directive var-a="angular exp" var-b="angular exp"> </my-directive> Note the name-with-dashes in attributes maps to camelCase in the directive scope
- 8. Use Case - Button Groups Generate a set of radio buttons that are decoupled from the specific scenario Wanted a directive that: - looped through a list of values - created the buttons - attached activate handlers to each button - exposed the current active value
- 9. Two scopes, two controllers HTML Code <button-group attr1="list" attr2="handlers"> </button-group> Directive Code myApp.directive(buttonGroup, function() { // interior scope & controller ... }); App Controller Code myApp.controller('mainController', function mainController($scope){ });
- 10. Using callback functions Sometimes you want to call a function, not set a value directly. You can actually pass functions to the directive But, is there a way to create a more streamlined payload / signature? Yes, we can just bundled into an object and call inside the directive
- 11. Demo for dynamic button directive The disclaimer - NNYBCBIW Not necessarily your best code, but it works From a 'database' of movies, generate buttons that trigger the display of movie info Code avail from: https://github.com/brentlane/tigley (tigley is the name of my cat...)
- 12. Route Resolver How do you trigger an action when a page is finished loading? Yep, you guessed it, the route resolver From the route config you can specify a function that will be called when the route is complete, page is done loading
- 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 data As this is Angular, you could also use dependency injection to access outside data in the resolve call
- 14. Use Case - Dynamic Header Angular has views, which are great But, how to change the state of html elements outside of the view, like a header? Yep, let's use the route resolver. It can trigger the behavior Then we can mediate through a service which broadcasts a message, which is picked up by a controller that's outside of the view.
- 15. Page resolve flow to update header Service handles communicating to controller, passes data to configure the header based on route HTML Page The View Route Resolve 1) resolve view 2) trigger resolve func Broadcast Service header Outer Page Controller
- 16. Demo for route resolve The same disclaimer - NNYBCBIW Not necessarily your best code, but it works Very simple, a skeleton app with a couple views, the header text changes for each view Code at: https://github.com/brentlane/tigley