Microsoft & .NETASPAngular.js Routes with SharePoint Tutorial

Angular.js Routes with SharePoint Tutorial

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Introduction

In the ASP.NET world, navigation to different locations can be achieved in many different ways. The simplest way would be to define anchor tags ‘<a>’. In this article, we will explore the AngularJS route feature to enable navigation in a single page application (SPA). We will explore two modules, ng-route and ui-router, to enable navigation. We will also see how to pass parameters to the URLs and consume them in a controller. Let’s understand these concepts with the help of examples.

Description

While exploring routes, we will make use of ui-view or ng-view that displays the different pages in the ‘view’ section specified in the container HTML. Let’s look at ng-route and then ui-router with the help of examples.

ng-Route

To enable routing, the following JS files are required:

<script src="https://ajax.googleapis.com/ajax/libs/
   angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/
   angularjs/1.3.14/angular-route.js"></script>

Routes are basically a set of rules that controls the navigation. The routes are defined by using $routeProvider. To use $routeProvider, the ‘ngRoute’ module needs to added as a dependency to the module definition, as shown in Line 1.

 1. var app = angular.module('App', ['ngRoute']);
 2. app.config(['$routeProvider', function
          ($routeProvider) {
 3.    $routeProvider
3a.    .when('/', { templateUrl: 'tab1.html', controller:
          'tab1Controller' })
3b.    .when('/tab2/:param1', { templateUrl: 'tab2.html',
          controller: 'tab2Controller' })
3c.    .otherwise({ redirectTo: '/' })
 4. }]);

In Line 2, we inject $routeProvider to the configuration. In Line 3a., the ‘.when’ takes two parameters, the path and the route information. In this example, if the URL is ‘/’, it loads a particular HTML file mentioned in the ‘templateUrl’. In this example, it loads ‘tab1.html’ and this page uses the controller ‘tab1Controller’. It’s important to note here that the controller is passed to the HTML at the runtime.

In Line 3b., there is an extra parameter in the path attributed by colon ‘:’. This is the syntax to pass parameters to the URL. Line 3c. specifies the default URL navigation by defining ‘.otherwise’.

Until now we have declared the routes. Now, we define the controllers:

1. app.controller('tab1Controller', ['$scope', function
      ($scope) {
2.       $scope.displayMessage = 'Tab 1 data';
3.    }]);
4. app.controller('tab2Controller', ['$scope',
      '$routeParams', function ($scope, $routeParams) {
5.       $scope.displayMessage = 'Tab 2 data ' +
         $routeParams.param1;
6.    }]);

In Line 4, $routeParams is injected to the controller; this helps is reading parameter values passed in the URL. In Line 5, $routeParams.param1 gets the parameter value that is passed in the URL.

Finally, let’s look at the HTML for than landing page, namely tab 1 and tab 2.

In the landing page, we define the ng-view:

<div ng-app="App">
   Welcome to demo
   <div ng-view></div>
</div>

Tab1 html is defined as:

<div>
   <a href="/HtmlPage1.html#/tab2/val1">
      {{displayMessage}}</a>
</div>

Tab2 html is defined as:

<div>
   displayMessage}}
</div>

The output for tab 2 will be: “Tab 2 data val1”.

ui-router

This is a routing framework based on ‘state’ instead of just an URL route. This can be used when there are nested routing requirements or more complex routing requirements. Let’s understand this with the help of an example.

To use this routing feature, we refer the following JS file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/
   angular-ui-router/0.2.15/angular-ui-router.min.js">
</script>

We will re-use the tab1 and tab2 HTML from the above example in this ui-router example.

The router definition is a bit different from the previous ng-route example. When defining the module, we include the ‘ui-router’ dependency.

1. var app = angular.module('App', ['ui.router']);
2. app.config(AppConfiguration);

In the app.config method definition, we use $urlRouterProvider to define the default navigation and use $stateProvider to define the different states. Here, we define two states, ‘tab1’ and ‘tab2’. The URL for both states takes two parameters: param1 and param2. Here also, we pass the controller at the runtime to the HTML.

 1. $urlRouterProvider.when("", "/home");
 2. $urlRouterProvider.when("/", "/home");
 3. $urlRouterProvider.otherwise('/home');
 4.
 5. $stateProvider.state('tab1', {
 6.    url: '/tab1/:param1/:param2',
 7.    controller: 'Tab1Controller',
 8.    templateUrl: '/tab1.html',
 9. });
10.
11. $stateProvider.state('tab2', {
12.    url: '/tab2/:param1/:param2',
13.    controller: 'Tab2Controller',
14.    templateUrl: '/tab2.html',
15. });

The controller declaration and definition is as shown below; we define two controllers, Tab1Controller and Tab2Controller. Here, we inject $stateParams to read the parameter values passed from the HTML to the ‘state’.

 1. app.controller('Tab1Controller',Tab1Controller);
 2. app.controller('Tab2Controller',Tab2Controller);
 3.
 4. Tab1Controller.$inject = ['$scope', '$stateParams'];
 5. Tab2Controller.$inject = ['$scope', '$stateParams'];
 6. function Tab1Controller($scope, $stateParams) {
 7.    $scope.displayMessage = 'Tab 1 message' +
          $stateParams.param1 + " " + $stateParams.param1;
 8. }
 9.
10. function Tab2Controller($scope, $stateParams) {
11.    $scope.displayMessage = 'Tab 2 message' +
          $stateParams.param1 + " " + $stateParams.param1;
12. }

the landing page is modified to look as shown next:

 1. <div>
 2.    <ul>
 3.       <li>
 4.          <a ui-sref="tab1({param1:'val 1',
                param2:'val 2'})">Tab 1</a>
 5.       </li>
 6.       <li>
 7.          <a ui-sref="tab2({param1:'val 3',
                param2:'val 4'})">Tab 2</a>
 8.       </li>
 9.    </ul>
10. <div ui-view></div>
11. </div>

In Line 4, we are using ui-sref, which translates to the HREF. Based on the ‘state’, it renders the respective HTML. The parameters are passed to the UTL; from there, it’s referenced in the controller and the controller displays the data on the UI.

Summary

In this article, we saw the different route patterns available with AngulaJS. Ng-route can be used for applications where there is less complex routing required. Ui-router is generally used when there is a requirement of nested routes. Ng-route is URL-based routing whereas ui-router is state-based routing. The routing concept can be applied not just for ASP.NET/HTML application, but also can be extended to applications such as SharePoint.

References

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories