My Technical Notes

Monday, 12 October 2015

Angular $routeParams Example

<!DOCTYPE html>

<html lang="en" xmlns="">
    <meta charset="utf-8" />
<body ng-app="app">
    <script type="text/ng-template" id="view.html">
            Forename: {{forename}}
            Surname: {{surname}}

    <div ng-view>


    <script src=""></script>
    <script src=""></script>
        var app = angular.module('app', ['ngRoute']);

        app.config(function ($routeProvider) {
                .when('/person/:forename/:surname', { templateUrl: 'view.html', controller: 'personCtrl' });

        app.controller('personCtrl', function ($scope, $routeParams) {
            $scope.forename = $routeParams.forename;
            $scope.surname = $routeParams.surname;

Running `.../index.html#/person/Tahir/Hassan` will give us the message:

Forename: Tahir
Surname: Hassan

Another method would be to use the HTTP style parameters: `.../index.html#/person?forename=Tahir&surname=hassan`.

No comments: