angularjsHow can I set up routes in AngularJS?

To set up routes in AngularJS, you need to use the $routeProvider service. This service allows you to define the routes for your application, and map them to controllers and views.

Here is an example of how to set up routes:

angular.module('myApp', ['ngRoute'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

In this example, we have defined two routes: /, which is the main page of the application, and /about, which is an about page. For each route, we have specified a templateUrl which is the path to the HTML template for that page, and a controller which is the controller associated with that page. Finally, we have specified an otherwise route which will redirect to the main page if a route is not found.

Code explanation

1. angular.module('myApp', ['ngRoute']): This creates an AngularJS module named myApp, and includes the ngRoute module, which provides the $routeProvider service.

2. .config(function ($routeProvider): This defines the configuration function for the module, and provides the $routeProvider service.

3. .when('/', { ... }): This defines a route for the / path, and specifies the templateUrl and controller for that route.

4. .when('/about', { ... }): This defines a route for the /about path, and specifies the templateUrl and controller for that route.

5. .otherwise({ ... }): This defines a route which will be used if none of the other routes match. In this case, it will redirect to the / path.

Helpful links

• AngularJS $routeProvider Documentation

Edit this code on GitHub