I thought the new direction that Angular was going in was Controller free views. How come the New Router (seemingly) asks for a Controller? Is it possible to route without one?
Yes it is possible. In 1.5 You can use component() or 1.3+ directive().
Here is the latest example working with angular 1.5, components() and child routes:
http://plnkr.co/edit/N3YP3dKMuljpZ6mWsVBT?p=preview
app.js
angular.module('app', ['ngComponentRouter', 'dialog', 'heroes', 'crisis-center'])
.config(function($locationProvider) {
$locationProvider.html5Mode(true);
})
.run(function($router) {
$router.config([
{ path: '/...', name: 'App', component: 'app', useAsDefault: true }
]);
$router.navigate(['App']);
})
.component('app', {
template:
'<nav>\n' +
' <a ng-link="[\'CrisisCenter\']">Crisis Center</a>\n' +
' <a ng-link="[\'Heroes\']">Heroes</a>\n' +
'</nav>\n' +
'<ng-outlet></ng-outlet>\n',
$routeConfig: [
{path: '/crisis-center/...', name: 'CrisisCenter', component: 'crisisCenter', useAsDefault: true},
{path: '/heroes/...', name: 'Heroes', component: 'heroes'},
{path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter', 'CrisisDetail', {id:3}]}
]
});
Related
Here is component structure of my application. Any advice will be valuable. Root component is app.
Which has two components as child : login & home.
home has two child components : dummy-component & dummy-component1.
Is it good practice? Will I face any issue if I switch component router to ui-router. I am also planning to switch from angular 1.6.0 to 2.0
App.component('app', {
templateUrl: 'core/app',
$routeConfig: [{
path: '/core/teamnest/login-component/',
name: 'LoginComponent',
component: 'loginComponent',
useAsDefault: true
},
{
path: '/core/teamnest/home-component/...',
name: 'HomeComponent',
component: 'homeComponent'
},
],
controller: appController
});
App.component('homeComponent', {
templateUrl: 'core/dashboard',
$routeConfig: [{
path: '/dummy-component',
name: 'DummyComponent',
component: 'dummyComponent',
useAsDefault: true
},
{
path: '/dummy-component1',
name: 'DummyComponent1',
component: 'dummyComponent1'
}
],
bindings: {
$router: '<'
},
controller: homeController
});
App.component('dummyComponent', {
templateUrl: 'core/dummy',
controller: dummyController
});
App.component('dummyComponent1', {
templateUrl: 'core/diff'
});
I'm using Angular (v2.4.5). Is it possible to have nested named outlets?
Here is my situation:
//app.component.html
<router-outlet name="test"></router-outlet>
<router-outlet></router-outlet>
//dashboard.component.html
<router-outlet name="test"></router-outlet>
<router-outlet></router-outlet>
Routes:
const routes: Routes = [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'login',
component: LoginComponent
},
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
redirectTo: 'inbox',
pathMatch: 'full'
},
{
path: 'inbox',
component: InboxContentComponent
},
{
path: 'test',
component: TestComponent,
outlet: 'test'
}
],
{
path: 'test',
component: TestComponent,
outlet: 'test'
}
}
If I go to this url: http://localhost/login(test:test) the TestComponent is loaded in the app.component.html outlet.
If I go to this url: http://localhost/dashboard/inbox(test:test) the TestComponent is loaded in the app.component.html outlet and not in dashboard.component.html
I want to be able to target test outlet from dashboard. Is it possible?
I am new to Component Router. I am using it in angular 1.5 and I would like to define a default component in the case a user try to access a route not defined in the config :
I have an app component with this config :
$routeConfig: [
{ path: '/...', name: 'Layout', component: 'layout', useAsDefault: true }
]
and a layout component with this config
$routeConfig: [
{path: '/', name: 'Home', component: 'home', useAsDefault: true},
{path: '/user', name: 'User', component: 'user' }
]
I can access to the urls localhost:8080/#/ and localhost:8080/#/user but
when I try to access localhost:8080/#/test it doesn't redirect me to the home component although the useAsDefault is set to true (I obtain a blank page...).
Has anyone faced this problem ?
Current working on angular2 beta version 6, in this nested routing like parent to child using (EX: /plan/...) future is not working on es5 JavaScript development, but in type script development it's working perfectly
Throwing error: EXCEPTION: Link "["Plan"]" does not resolve to a terminal instruction.
App.js code
var Tabs = [],viewId;
app.AppComponent =
ng.core.Component({
selector: 'app',
template: '<router-outlet></router-outlet>',
directives: [ng.router.ROUTER_DIRECTIVES],
providers: [ng.http.HTTP_PROVIDERS]
})
.Class({
constructor: [ng.router.Router, function(router) {
console.log("1");
router.config([
{ path: '/', redirectTo: ['Home'] },
{ path: '/home', component: app.HomeComponent, name: 'Home' },
{ path: '/plan/...', component: app.planComponent, name: 'Plan' }
]);
}]
});
document.addEventListener('DOMContentLoaded', function() {
ng.platform.browser.bootstrap( app.AppComponent,[ng.router.ROUTER_PROVIDERS]);
});
Plan.js code
app.planComponent =
ng.core.Component({
selector: 'plan-view',
templateUrl: './assets/src/plan/view/plan.html',
directives: [ ng.router.RouterLink, ng.router.ROUTER_DIRECTIVES],
})
.Class({
constructor:[ng.router.Router, function(router){
console.log("2");
router.config([
{ path: '/', redirectTo: ['PlanInfo'] },
{ path: '/planInfo', component: app.planInfoComponent, name: 'PlanInfo', useAsDefault: true }/*,
{ path: '/coverage', component: app.CoverageComponent, name: 'Coverage' },
{ path: '/nonelective', component: app.nonElectiveComponent, name: 'NonElective' },
{ path: '/loans', component: app.loansComponent, name: 'Loans' },
{ path: '/enrollment', component: app.enrollmentComponent, name: 'Enrollment' }*/
]);
}]
});
I think that you should use the ng.router.RouteConfig decorator instead of the router itself. Like this, you will have the same configuration as with TypeScript.
Here is the way to do:
ng.router
.RouteConfig([
{ path: '/', redirectTo: ['Home'] },
{ path: '/home', component: app.HomeComponent, name: 'Home' },
{ path: '/plan/...', component: app.planComponent, name: 'Plan' }
])(app.AppComponent);
(...)
ng.router
.RouteConfig([
{ path: '/', redirectTo: ['PlanInfo'] },
{ path: '/planInfo', component: app.planInfoComponent, name: 'PlanInfo', useAsDefault: true }/*,
{ path: '/coverage', component: app.CoverageComponent, name: 'Coverage' },
{ path: '/nonelective', component: app.nonElectiveComponent, name: 'NonElective' },
{ path: '/loans', component: app.loansComponent, name: 'Loans' },
{ path: '/enrollment', component: app.enrollmentComponent, name: 'Enrollment' }*/
])(app.planComponent);
As a reference, you could have a look at this plunkr: https://plnkr.co/edit/w61Ecbmuj7EfDnsYEHOS?p=info.
My SPA uses the new angular router. Everything is working well, but now I would like to pass a parameter to one of the components. There are multiple viewports in every routing, and in this case I can't grab the parameter passed to the router.
The routing
AppController.$routeConfig = [
{
path: '/',
redirectTo: '/home'
},
{
path: '/home',
components: {
'main': 'home',
'footer': 'footer'
},
as: 'home'
},
{
path: '/request',
components: {
'main': 'request',
'footer': 'footer'
},
as: 'request'
},
{
path: '/request/:id',
components: {
'main': 'request',
'footer': 'footer'
},
as: 'requestid'
},
{
path: '/allItems',
components: {
'main': 'allItems',
'footer': 'footer'
}, as: 'allItems'
}
];
The calling of the route
<a class="btn btn-warning" aria-haspopup="true" aria-expanded="false" ng-link="requestid({id: 1})">
the result url seems legit
https://<sitename>/index.aspx#/request/1
The controller cannot get the $routeParams.id.
angular.module('app.request')
.controller('requestController', ['$routeParams', '$scope', function ($routeParams, $scope) {
$scope.id = $routeParams.id;
}]);
What I've missed? Thanks in advance.