angular's equivalent to angularjs states

user_5374333 0
Viewed 858

In AngularJS, for routing purposes, we define states with children which makes it possible to switch between views with the result that each view is always rendered in one container:

$stateProvider.state("communication.create-message", {
    url: ...,
    templateUrl: ...,
    menu: ...,
    parent: "communication",
    ncyBreadcrumb: {
        label: "Create Message"
    }
});

Whichever state we choose - the view is always rendered within one container that has ui-view attribute.

I'm trying to achieve the same in Angular 2 or above, but I have no idea of how to reproduce the above-stated functionality.

In app.component.ts we have router-outlet where component templates get rendered.

Say, we have many nested child routes - is it possible to render all of them within this outlet ?

What would the code in app-routing.module.ts look like in this case ?

Could anyone please give a working example of how to go about it ?

angular2-routing angular-ui-router angular angularjs javascript
3 Answers

Step 1 : Import Routes from @angular/router in app.module.ts .. import Routes. You have to write 

import {Routes} from '@angular/core'

Step 2 : Add all the routes you want to set up in an array pf type Routes like : this is for informing angular all the routes in your app. Each route is a javascript object in this array.

const appRoutes : Routes = [
  {path : 'communication-route'} 
]

always you have to give path , this what you enter after your domain like "localhost :4200/communication-route".

Step 3: Add the action to route i.e what happens when this path is reached.

 const appRoutes : Routes = [
  {path : 'communication-route'} , component :communicationroutecomponent
 ]

here i have given the component name "communicationroutecomponent" , i.e this component will be loaded when the path "/communication-route" is reached

Step 4: Register your routes in your app To do this you will have to do new import in app.module.ts

import {RouterModule} from '@angular/router'

Routermodule has special method forRoot() which registers our routes .

In our case we will have to write this piece of code in 

imports :[
 RouterModule.forRoot(appRoutes)
]

Our routes are now registered and angular knows our routes now.

Step 5 : Where to display the route content i.e the html content of you route page.

For this angular has directive . We need to include where we want to load our content i.e in the html.

<a router-outlet="/communication-route"></a>

Navigating to routes : angular gives a directive for this routerLink so if we want to navigate to users component , you can give this in your html element:

routerLink="/communication-route"

I hope i was able to explain how this works.

user_37333970

Your code should be as follows

    export const ComRoute: Routes = [
{
path: 'communication-route',
children: [
{ path: 'communication', component: communicationComponent },
{ path: ':child1', component: child1Component },
{ path: ':child1/field', component: child1Component}
]
}
];
user_67248270

First of all, states are not an official AngularJS concept. They come from ui-router, which began life as an alternate to the simplistic built in router.

Eventually, ui-router became the de facto standard for routing in AngularJS while the official ng-route module was extracted into a separate, optional library by the Angular team.

ui-router, is complex but exceptional and has earned what is in my view well deserved popularity and success. This success has led to its expansion to support additional platforms enabling the same powerful state based structure in applications written for frameworks such as React.

It is now available for Angular (formerly known as Angular 2).

You can read the documentation and see how to get started on https://ui-router.github.io/ng2

Here is a snippet from the src/app/app.states.ts module of the official example repository

export const loginState = {
  parent: 'app',
  name: 'login',
  url: '/login',
  component: LoginComponent,
  resolve: [
    { token: 'returnTo', deps: [Transition], resolveFn: returnTo },
  ]
};

As we can see, there are compatible concepts available, including what looks like a nice evolution of the resolves API which allows function oriented injection which was generally simpler than class based injection in ui-router with AngularJS.

Note, I have not used it in an Angular project.

user_19158930
Related