ngnewrouter
TRANSCRIPT
ngNewRouterPHI DONG (@PHIDONG)
ABOUT ME
• Software Engineer at CudaSign formerly SignNow. (we’re hiring!)
• AngularJS, D3.JS
PHI DONG (@PHIDONG)
ROUTER
• ngRoute moved to a module in 1.3
• Router options are now:
• ngRoute
• very simple applications, single view
• UI-Router
• flexible routing, multiple views, nested views,
• ngNewRouter (Component Router)
• new router in development with multiple views, nested views,
and emphasis on easier migration to Angular 2
What is ngNewRouter?
• Router for Angular 1.x (1.3+) and Angular 2
developed in TypeScript
• Being maintained by Brian Ford (@briantford)
• Component based, focus on migration path to
Angular 2
• Docs at https://angular.github.io/router/
• Repo at https://github.com/angular/router
• STILL IN DEVELOPMENT (v0.5.3)
Getting Started
• npm installnpm install angular-new-router
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<title>My app</title>
</head>
<body ng-app="myApp" ng-controller="AppController as app">
<div ng-outlet></div>
<script src="/node_modules/angular/angular.js"></script>
<script src="/dist/router.es5.js"></script>
<script src="/app/app.js"></script>
</body>
</html>
• add to index.html
angular.module('app', ['ngNewRouter'])
.controller('AppController', ['$router', AppController]);
• add dependency to app.js
{
path: '/user',
component: 'user'
}
{
path: '/user',
components: {
main: 'userInfo',
sideBar: 'usersList'
}
}
<div ng-outlet></div><div ng-outlet="main"></div>
<div ng-outlet="sideBar"></div>
Configuring
• Setting up routes using $routeConfig
AppController.$routeConfig([]);
config accepts an array of route objects
A path object
path and component (or components)
Configuring
{
path: '/user',
component: 'user'
}
• component is an alias for components
{
path: '/user',
components: {
default: 'user'
},
as: 'user'
}
• actually does this behind the scenes:
WAIT.. COMPONENT??
• Angular 1.x:
• template, controller, router (optional)
AppController.$routeConfig([
{
path: '/user',
component: 'user'
}
]);
• Uses “controller as" syntax by default; uses that name to infer
controller name and binds the component name to template
<h1>User Name: {{user.name}}</h1>
user.html
• Changing the name to bind to is in development… (i.e. if you’re
binding to {{vm.foo}} in templates for more reusability)
$componentMapperProvider
component: 'myComponent'
WHERE IS ALL THE MAGIC COMING FROM?
• By default serves from ./components so this component would use:
• MyComponentController for controller,
• myComponent for template binding,
• and template get dasherized naming and would load from
./components/my-component/my-component.html
angular.module('app.myComponent', [])
.controller('MyComponentController', [function () {
this.name = 'Friend';
}]);
$componentMapperProvider
• We can override this behavior by configuring
$componentMapperProvider using the available methods
$componentMapperProvider#setTemplateMapping
takes a function for mapping component names to component template URLs
$componentMapperProvider#setCtrlNameMapping
takes a function for mapping component names to component controller names
$componentMapperProvider#setCtrlAsMapping
takes a function for mapping component names to controllerAs name in the template
$componentMapperProvider#setComponentFromCtrlMapping
takes a function for mapping component controller names to component names
$componentMapperProvider (continued)
• This is done in the configuration step
• For example if we wanted to put our templates in the ./app/components
directory instead of ./components/ and use camel case naming instead of dash
case and bind templates to vm always (i.e. {{vm.name}})
angular.module('app')
.config(componentMappings)
componentMappings = function($componentMapperProvider){
// set custom template mapping
$componentMapperProvider.setTemplateMapping(function(name){
return './app/components/' + name + '/' + name + '.html';
});
// set custom template bindings
$componentMapperProvider.setCtrlAsMapping(function(name){
return 'vm';
});
}
UI-ROUTER VS NEWROUTER CONFIGURATION
<div ui-view></div>
index.html
UI-Router NewRouter
<div ng-outlet></div>
index.html
var myapp = angular.module('myapp', ['ui.router'])
myapp.config(function($stateProvider,
$urlRouterProvider){
$urlRouterProvider.otherwise('/route1')
$stateProvider
.state('route1', {
url: '/route1',
templateUrl: 'route1.html',
controller: 'component1 as component1'
})
.state('route2', {
url: ‘/route2/:userId’,
templateUrl: 'route2.html'
controller: 'component2 as component2',
resolve: {
name: function(myService) {
return myService.getName();
}
}
})
});
app.jsangular.module('myapp', ['ngNewRouter'])
.controller('AppController', ['$router',
AppController]);
AppController.$routeConfig([
{
path: '/',
redirectTo: 'component1'
},
{
path: '/route1',
component: 'component1'
},
{
path: ‘/route2/:userId’,
component: 'component2'
}
]);
function AppController ($router) {}
app.js
UI-ROUTER VS NEWROUTER CONFIGURATION (CONTINUED)
<a ui-sref="route2">Link to Route 2</a>
route1.html
UI-Router NewRouter
<a ng-link="component2">Link to Route 2</a>
component1.html
angular.module('myapp', ['ngNewRouter'])
.controller('AppController', ['$router', AppController]);
AppController.$routeConfig([
{
path: '/route1',
component: 'component1'
},
{
path: '/route2',
component: ‘component2’,
as: ‘route2’
}
]);
function AppController ($router) {}
<a ng-link="route2">Link to Route 2</a>
component1.html
adding an alias to new router route
UI-ROUTER VS NEWROUTER CONFIGURATION (CONTINUED)
{
path: '/route2',
components: {
main: 'users',
side: 'userList'
},
as: 'route2'
}
• Aliases with multiple components
<a ng-link="route2">Link to Route 2</a>
UI-ROUTER VS NEWROUTER CONFIGURATION (CONTINUED)
{
path: '/route1',
components: {
main: 'users',
side: 'userList'
}
as: 'route1'
},
{
path: '/route2',
components: {
main: 'user',
side: 'userList'
},
as: 'route2'
}
<a ng-link=“route2">Link to Route 2</a>
<a ng-link="route1">Link to Route 1</a>
<a ng-link=“main:users">Link to Route 1</a>
{
path: '/route1',
components: {
main: 'users',
side: 'userList'
}
},
{
path: '/route2',
components: {
main: 'user',
side: 'userList'
}
}<a ng-link=“main:user">Link to Route 2</a>
Without Aliases
With Aliases
UI-ROUTER VS NEWROUTER CONFIGURATION (CONTINUED)
{
path: '/route1',
components: {
main: 'users',
side: 'userList'
}
as: 'route1'
},
{
path: '/route2',
components: {
main: 'user',
side: 'userList'
},
as: 'route2'
}
• Classic href
<a href=“/route2“>Link to Route 2</a>
OUR :ID PARAMETER AND HOW TO ACCESS IT
• Can use ng-link to pass parameters
<a ng-link="route2({userId: 33})">View User</a>
• Access in controller using $routeParams
• $routeParams is an object i.e. /route2/33 would beObject {id: "33"}
angular.module('myApp.component2', []).
controller('Component2Controller', Component2Controller);
function Component2Controller($routeParams) {
this.userId = $routeParams.userId;
}
RESOLVES AND THE ROUTER LIFECYCLE
canActivate
canDeactivate
deactivate
activate
FINALLY RESOLVING
.state('route2', {
url: '/route2',
templateUrl: 'route2.html'
controller: 'component2 as component2',
resolve: {
name: function(myService) {
return myService.getName();
}
}
}
{
path: '/route2',
component: 'component2'
}
angular.module('myApp.component2', []).
controller('Component2Controller', Component2Controller);
function Component2Controller() {
// Controller logic
}
Component2Controller.prototype.activate = function(myService) {
var vm = this;
vm.name = myService.getName();
};
{{component2.name}}
app.js app.js
./components/component2/component2.js
./components/component2/component2.html
HOW CAN I CONTRIBUTE? WHO CAN I COMPLAIN TO?
• Try it out
• Check existing issues,
uses cases and add
support or new issues/use
cases if they don’t exist
• Help reproduce bugs, fix
bugs and do pull requests
QUESTIONS?