Tuesday, January 30, 2018

How to program for a routing in angularJS.


  • If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.
  • In the previous examples we have used the When method of the $routeProvider.
  • You can also use the otherwise method, which is the default route when none of the others get a match.

Program

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js">
    </script>
<body ng-app="myApp">
    <p>
         <a href="#/!">Main</a>
     </p>
        <a href="#!banana">Banana</a>
        <a href="#!tomato">Tomato</a>
    <p>
        Click on the links to change the content.
    </p>
     <p>
         Use the "otherwise" method to define what to display when none of the links are clicked.
     </p>
    <div ng-view>
    </div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider)
{
    $routeProvider
    .when("/banana",
        {
          template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
        })
        .when("/tomato",
         {
              template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
         })
            .otherwise
            ({
                template : "<h1>Nothing</h1><p>Nothing has been selected</p>"
            });
});
</script>
</body>
</html>

Output



0 comments:

Post a Comment

Thanks For Commented.

TechTalk