AngularJs Template

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">
 <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

AngularJs Template

Related Post

0 comments:

Post a Comment

ads2