index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Angular Js</title>
</head>
<body ng-controller="homeController">
<a href="#/">Home</a> |
<a href="#/about-us">About Us</a>
<div ng-view></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/services/aboutusService.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.otherwise({ redirectTo: '/' });
});
controller/homeController.js
app.controller('homeController', function($scope){
$scope.message = 'home Controller message';
});
controller/aboutusController.js
app.controller('aboutusController', function($scope, aboutusService ){
$scope.aboutusmessage = 'aboutusController aboutmessage';
$scope.aboutmessageservicehello = aboutusService.hello();
$scope.aboutmessageservicehhi = aboutusService.hi('ravi');
});
services/aboutusService.js
app.service('aboutusService', function () {
this.hello = function () {
return ' hello aboutus Service';
};
this.hi = function (firstname) {
return ' hello '+firstname;
};
});
views/aboutus.html
<h3>About Us Page</h3>
{{aboutusmessage}} <br>
{{aboutmessageservicehello}} <br>
{{aboutmessageservicehhi}}
views/home.html
<h3>Home Page</h3>
{{message}}
output
0 comments:
Post a Comment