AngularJS Component Router

View Github Repository Open presentation in a new window

dpsthree

See all presentation from dpsthree

AngularJS Component Router

0 0

componentroutertalk

On Github dpsthree / componentroutertalk

AngularJS Component Router

Paul Spears

paul.spears@oasisdigital.com
@dpsthree

What's it Called and Why?

The New Router => ComponentRouter Why name it component router? The router is a back porting of a staple idea in angular 2.0, composition of applications from components. Even in 1.4 the plan for putting it in place is to identify components of your application, group its pieces together, slap a label on it and assign it to a route So lets get started. We are going to dive into the basics and run through them real quick then look at some code.

Where do I get it?

  • Pre-built
    • npm install angular-new-router
  • Compile from source
    • https://github.com/angular/angular (currently ahead)
    • https://github.com/angular/router
As of today where you choose to get this from makes a big difference. But we will get into that as it comes up

Plug It In

                <body>

    <script src="lib/angular/dist/angular.js"></script>
    <script src="lib/componentRouter/dist/angular-new-router.es5.js"></script>
</body>
            
var myApp = angular.module('myApp', ['ngNewRouter'])

Create Application Controller

                
myApp.controller('MyAppCtrl', function() {
});
The controller that is identified/created will have code added to it to setup the router. Unlike ngRoute and uiRouter the component router operates as part of the run cycle (or at run time). So which controller you pick does matter as you likely want the controller with the routing code to run first

Inject $router

myApp.controller('MyAppCtrl', function($router) {
});
Lets set this aside to create our first component

Create a component

Components consist of a template and a controller
*Template must reside at:
approot/components/ComponentName/ComponentName.html
*Controller must be named:
ComponentNameController
approot/components/home/home.html 
<h1>Hello from the Home Page</h1>
<span>Displaying a message from the controller {{home.message}}</span>
approot/components/home/home.js 
angular.module('homeModule', [])
.controller('homeController', homeController);

function homeController () {
    this.message = 'Im in the home controller';
}

Route to the Component

myApp.controller('MyAppCtrl', function($router) {
    $router.config([
        { path: '/', redirectTo: '/home' },
        { path: '/home', component: 'home' }
    ]);
});

Add a Viewport

(not to be confused with a viewport)
<body>
    <ng-viewport></ng-viewport>
    <!--Coming Soon!!-->
    <ng-outlet></ng-outlet>

    <script src="lib/angular/dist/angular.js"></script>
    <script src="lib/componentRouter/dist/angular-new-router.es5.js"></script>
</body>
ng-outlet is coming soon, as in if you build from source it is already there

Congratulations!!!

Congratulations you have your first application running on the new router. Lets go to the bar and enjoy a choice adult beverage. You earned it!

Hold on?!

What about:
  • Resolve
  • Event Handlers
  • Nested Views
  • Controller As
These concepts mostly have an equivelent in the new router, but they are either on the way or we don't talk about them the same way. Resolve: implemented with life cycle hooks. Event Handlers: functionality moved to life cycle hooks. Nested Views: currently broken. Controller As: does not exist, but you are automatically aliasing using the component name

Lets Look at Resolve

Lets add another component
myApp.controller('MyAppCtrl', function($router) {
    $router.config([
        { path: '/', redirectTo: '/home' },
        { path: '/home', component: 'home' },
        { path: '/user/:id', component: 'user' }
    ]);
});

Adding ng-link

<h1>Hello from the Home Page</h1>
<span>Displaying a message from the controller {{home.message}}</span>
<a ng-link='user({id:12345})'>Click here to view user details</a>
approot/components/user/user.html 
<h1>Hello from the user Page</h1>
<span>Username: {{user.username}}</span>
approot/components/user/user.js 
angular.module('userModule', [])
.controller('userController', userController);

function userController ($routeParams, userService) {
    var uctrl = this;
    userService.getUserDetails($routeParams.id).then(function (details) {
        uctrl.user = details;
    });
}
Setup for next slide: Now lets say we want the fetching of our data to be a requirement before navigating. Before we would use resolve. Now we have a life cycle hook. With life cycle hooks you can augment your controller by stating what the startup requirements are for your component.

Component Router "Resolve"

angular.module('userModule', [])
.controller('userController', userController);

function userController ($routeParams, userService) {
    var uctrl = this;
    uctrl.dataPromise = userService.getUserDetails($routeParams.id).then(function (details) {
        uctrl.user = details;
    });
}

userController.prototype.canActivate = function () {
    return this.dataPromise;
};
This is the canActivate hook. It must return a successful promise before the router will navigate to this page. An important note, this prevents routing, but controller execution always occurs regardless. Explain how "this" is the same everywhere hand wave over the service explain promises enough to show how this works There also exists activate canDeactivate and deActivate

Lets look at some more code

AngularJS Component Router