If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

One of the core features in AngularJS is Routing, used to build a single page app with multiple views. Using Routing to load different part of app helps in logically dividing the app and making it more manageable.

Routing is needed to show different content depending on what route is chosen. It sets the page content to be displayed in the ng-view component of index page.

Using Routing

When creating a new page you are suggested to create a navigation route for it:
New_page

Let’s see how to inject pages into the main layout manually. You will just need to define the pages that will be injected. Every time the current route changes, the included view changes with it according to the routing settings.

Go to Project > Routing.

Enter screen name in the field Name and select a needed route as a Page. Click “Add”:
routing

Make sure you set a needed page as a default route. It is your start point. Navigating to non-existing route will also redirect you to a default screen.

Several routes can lead to the same screen but paths must be different.

Routing should not contain duplicated paths. Unique paths are recommended to ensure your app works correctly.

When renaming a screen, you can choose whether to change paths of the corresponding routes.

You can add a dependency for each route by clicking “Manage dependencies” button. Note, that you should enable this dependency in Dependency Manager beforehand.

How it works

To build an app that has multiple views, an AngularJS module called ngRoute is used.

AngularJS uses $routeProvider to handle all of the magic required to get a new file and inject it into layout.

ng-view is an Angular directive that will include the template of the current route (/home, /about, or /contact) in the main layout file. In plain words, it takes the file you want based on the route and injects it into your main layout (index.html).

In Routing, you set where to place the rendered pages.

How to use

Navigation

There are two ways to navigate to route – use a directive or do it from code.

1. In Design tab, drag and drop Button component and add property ng-click = nav();.

In Scope tab, create a function nav() with the following code:

You can use Navigate to page snippet to simplify your work.

2. In Design tab, just drag and drop Button component and add property navigate-to = Screen2.

Passing parameters

Before passing parameters, please set the corresponding URL in Routing:

Routing-URL

Read more about passing parameters in URL here.

There are two ways to pass parameters.

1. In Design tab, drag and drop Button component and add property ng-click = nav();:
nav

In Scope tab, create a function nav() with the following code:

Use Navigate to page snippet to simplify your work.

2. You can just set the parameters as follows:
navigate-to

Retrieving parameters

After navigating, you can see the URL is changed:

To see the changed URL click “Remove frame” button.

On the page where you navigate to, add this code anywhere you need to catch the passed parameters:

Converting route name to URL

There is a routeName2Url() function that returns a route path generated from route name and dynamic parameters:

The first parameter is a route name. The second parameter is an object with path variables.

For example, there is a route named route_one that equals http://somedomain.com/route/path/:id/:value/done/.

The following code will return http://somedomain.com/route/path/10/4/done/:

Using route path template

By default route path template looks like /screen_name.html. You can easily change path by clicking the dropdown list and selecting a new screen. The default path may be changed this way when needed.

You can manually change a path value, including the default part (for example, you change /Screen1.html to /Screen1). From now, automatically inserting a new path when selecting from list is disabled. This is to prevent you from changing your custom path occasionally:
custom

However, if you leave the default part (for example, /screen1.html or /screen1.html/some/path/here) it can be changed as usually.