index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Angular Js</title>
</head>
<body ng-controller="homeController">
<div align="center">
<a href="#/">Home</a> | <a href="#/about-us">About Us</a> | <a
href="#/services">Services</a> | <a href="#/products">Products</a> |
<a href="#/contactus">Contact Us</a>
<div ng-view></div>
</div>
<script type="text/javascript" src="scripts/js/angular.min.js"></script>
<script type="text/javascript" src="scripts/js/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
<script type="text/javascript"
src="scripts/controller/homeController.js"></script>
<script type="text/javascript"
src="scripts/controller/aboutusController.js"></script>
<script type="text/javascript"
src="scripts/controller/servicesController.js"></script>
<script type="text/javascript"
src="scripts/controller/productsController.js"></script>
<script type="text/javascript"
src="scripts/controller/contactusController.js"></script>
</body>
</html>
scripts/app.js
var app = angular.module('myapp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'homeController',
templateUrl: 'views/home.html'
});
$routeProvider
.when('/about-us',
{
controller: 'aboutusController',
templateUrl: 'views/aboutus.html'
});
$routeProvider
.when('/services',
{
controller: 'servicesController',
templateUrl: 'views/services.html'
});
$routeProvider
.when('/products',
{
controller: 'productsController',
templateUrl: 'views/products.html'
});
$routeProvider
.when('/contactus',
{
controller: 'contactusController',
templateUrl: 'views/contactus.html'
});
$routeProvider
$routeProvider.otherwise({ redirectTo: '/' });
});
scripts/controller/homeController.js
app.controller('homeController', function($scope){
$scope.message = 'home Controller message';
});
scripts/controller/aboutusController.js
app.controller('aboutusController', function($scope ){
$scope.aboutusmessage = 'aboutus Controller message';
});
scripts/controller/servicesController.js
app.controller('servicesController', function($scope){
$scope.servicesmessage = 'services Controller message';
});
scripts/controller/productsController.js
app.controller('productsController', function($scope){
$scope.productsmessage = 'products Controller message';
});
scripts/controller/contactusController.js
app.controller('contactusController', function($scope){
$scope.contactusmessage = 'contactus Controller message';
});
output
0 comments:
Post a Comment