Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

Create Five Page Web Application using Angular:-
......................................................................................................................................

1)  First Create HTML Page


2)  Link two plugin first angular and another will be route configuration plugin.

3) Create a header, middle, and footer section

4)   create ng-app and ng-controller section then write  <div ng-view> </div>

      It is used to load the child template of the angular main page

5   Create Controller file and define different routing path

     app=angular.module('modulename',[ngRoute]);
     app.config(function($routeProvider) {
    $routeProvider

  .when('/', {
    templateUrl : 'pagename',
    controller  : 'contoller'
  })

   .when('/pathname', {
    templateUrl : 'pagename',
    controller  : 'controllername'
  })

    ....
    ...
    ...

    .otherwise({redirectTo: '/'});



app.controller('Controllername', function($scope) {
  $scope.message = 'data';
});


Complete Code for Angular Single Page Application:-

Design Web Page :-

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
<style type="text/css">
    *
    {
    margin:0px;
    }
header, footer
{
background-color: gray;
height: 150px;
color: white;
}
  header a
  {
  color:white;
  font-size: 25px;
  text-decoration: none;

  }
   section
   {
    height: 400px;
    background-color: cyan;
   }

</style>
</head>
<body ng-app='myApp'>
<header>

    <a href="#/">Home</a>
    <a href="#/blog">Blog</a>
    <a href="#/about">About</a>
     <a href="#/services">Services</a>
 </header>
 <section>
  <div ng-view></div>
 </section>
   <footer>

   </footer>
    <script src="app.js"></script>
  </body>
</html>

...........................................................................
  Code for app.js:-
.................................................................................................


var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl : 'pages/home.html',
    controller  : 'HomeController'
  })

  .when('/blog', {
    templateUrl : 'pages/blog.html',
    controller  : 'BlogController'
  })

  .when('/about', {
    templateUrl : 'pages/about.html'
     })
  .when('/services', {
    templateUrl : 'pages/services.html'
     })

  .otherwise({redirectTo: '/'});
});

app.controller('HomeController', function($scope) {
  $scope.message = 'Hello from HomeController';
});

app.controller('BlogController', function($scope) {
  $scope.message = 'Hello from BlogController';
});

app.controller('AboutController', function($scope) {
  $scope.message = 'Hello from AboutController';
});


Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post