Displaying multiple pages with Angular

Ok, so after checking how the basics of Angular work on a single page and the different ways to create a controller in Angular it’s time to do what angular is meant to do: create a client’s side application that will consume server’s data and templates (views) to behave like a desktop application in a browser:

Routing

First thing to do is learning about routing, which is the place were we will configure our Angular module (aka application here). The routing is what allows us to establish which View a Controller will use, binding them and avoiding the Controllers to know anything about the View. This is how it works:

        var app = angular.module('BasicApp', ['ngRoute']);

        app.config(function($routeProvider) {
            $routeProvider
                .when('/', {
                    controller: 'UsersController',
                    templateUrl: '../../ViewsAngular/MiniAppIndex.html'
                }).when('/profile/:userId', {
                    controller: 'ProfileViewController',
                    templateUrl: '../../ViewsAngular/MiniAppProfile.html'
                }).otherwise({ redirectTo: '/' });
        });

Note that for using the routing we are using an angular extension/plugin called angular-route.js, and to add such dependency to our module we set it on instantiating it (that ‘ngRoute’ there). To add the routes we need to create a config object and insert it into the module, we can do that straightforward as in this example or create the routing somewhere else and then apply it here (as with the different ways to create a controller).

Oh, don’t forget to include the script!

    <script src="~/Scripts/angular.js"></script> //angular core
    <script src="~/Scripts/angular-route.js"></script> // this one for the routing

With the routing we have set on that example, the default “page” will be the empty slash “/” one, which has a Controller and a View to it. The Controller will take care of filling the scope with all the required data, after that, angular will automatically bind the values and generate the page using the view. Notice that the View is an html page that, yes, will need to be requested to the server in order to use it, while this may generate some extra requests to our server it will also reduce the data sent later as it can be HTTP cached.

Now, to tell Angular were to paint the view you can use this tag:

    <!-- Placeholder for views -->
    <div data-ng-view=""></div>

Which means that on your initial View (or HTML page loaded) you could effectively make it work as a MasterPage/Layout with its header/footer/etc. which will be common to the rest of the application, or not, but you have that choice.

Sending Parameters

Notice that at one of the routings that I set I had a parameter:

.when('/profile/:userId', {
    controller: 'ProfileViewController',
    templateUrl: '../../ViewsAngular/MiniAppProfile.html'
})

That will automatically consider that after the slash there will be a value, such value will be assigned to a variable in a dictionary called $routeParams, this is how you would set it up to make the call to profile view:

<a href="#/profile/{{ usr.ID }}">{{ usr.Name }}</a>

So just adding a # and then setting the view’s route plus its parameter will generate a link to our second view, then on retrieving that we can have a Controller like this one:

        function ProfileViewController($scope, $http, $routeParams) {
            var userID = ($routeParams.userId) ? parseInt($routeParams.userId) : 0;

            $http.get('http://localhost:56319/Users/GetProfileDetails?userId=' + userID)
                .then(function (response) {
                    $scope.userDetails = response.data;
                });
        }

I am adding three dependencies to that controller: the scope (which is shared with the View), the http to make ajax calls to the server and the routeParams with a dictionary to access the parameters sent. Using that dictionary and the parameter name (which is set at the routing) you can get its value if it was sent.

Alternatively, in case you were to use a Querystring, you can use “$location.search[“parameterName”].value” to access the value.