AngularJs Controller And Service

March 24, 2016

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

AngularJs Controller And Service

Related Post

0 comments:

Post a Comment

ads2