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

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