Search This Blog

2015-11-14

Angular JS Routing

The routing functionality added by this step is provided by angular in the ngRoute module, which is distributed separately from the core Angular framework.

Step 1) Finish Serving a HTML file from Node JS

    Step 2) Create folder and files as below
Step 3)about.html

<div class="jumbotron text-center">
    <h1>About Page</h1>

    <p>{{ message }}</p>
</div>

Step 4) contact.html
<div class="jumbotron text-center">
    <h1>Contact Page</h1>

    <p>{{ message }}</p>
</div>

Step 5)error.html
<div class="jumbotron text-center">
    <h1>Error Page</h1>

    <p>{{ message }}</p>
</div>

Step 6)home.html

<div class="jumbotron text-center">
    <h1>Home Page</h1>

    <p>{{ message }}</p>
</div>

Step 7)routing.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
   
    <!-- load bootstrap and fontawesome via CDN -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

    <!-- load angular and angular route via CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    
    
    <script src="routing.js"></script>
</head>
<body ng-app="myApp" ng-controller="mainController">
    <!-- HEADER AND NAVBAR -->
    <header>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Angular Routing Example</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#!/"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#!/about"><i class="fa fa-shield"></i> About</a></li>
                    <li><a href="#!/contact/07448587873"><i class="fa fa-comment"></i> Contact</a></li>
                </ul>
            </div>
        </nav>
    </header>

    <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main">
        {{ message }}

        <div ng-view></div>
        <!-- angular templating -->
        <!-- this is where content will be injected -->

    </div>

</body>
</html>


Step 8)routing.js

// create the module and name it myApp
// also include ngRoute for all our routing needs
var myApp = angular.module('myApp', ['ngRoute']);

// configure our routes
myApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl: 'pages/about.html',
            controller: 'aboutController'
        })

        // route for the contact page
        .when('/contact/:id', {
            templateUrl: 'pages/contact.html',
            controller: 'contactController'
        })
        .otherwise({   // This is when any route not matched
            templateUrl: 'pages/error.html',
            controller: 'errorController'
        })
    $locationProvider.html5Mode(false).hashPrefix('!'); // This is for Hashbang Mode
});

// create the controller and inject Angular's $scope
myApp.controller('mainController', function ($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

myApp.controller('aboutController', function ($scope) {
    $scope.message = 'Look! I am an about page.';
});

myApp.controller('contactController', function ($scope, $routeParams) {
    $scope.message = 'Contact us! JK. This is just a demo.'  +$routeParams.id;
});

myApp.controller('errorController', function ($scope) {
    $scope.message = '404 : Not Found';
});


Step 9)run your code using 'node index.js' and Open your browser and try browsing your routing.html file (http://localhost:7879/routing.html)



No comments: