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:
Post a Comment