Created
September 14, 2016 18:54
-
-
Save kaunjovi/c85d9a55f03a0b2eeba2e1902ca5f614 to your computer and use it in GitHub Desktop.
Route of AngularJs used to change content of an HTML without reloading the page.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Routing with AngularJs</title> | |
| <!--Step 1 : Add the angular js and the angular route--> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script> | |
| </head> | |
| <body ng-app="myApp"> | |
| <h1>Routing with AngularJs</h1> | |
| <table> | |
| <tr height="100" > | |
| <td style="background-color: lightblue;"> | |
| <a href="#/">Home page</a> | |
| <br/> | |
| <a href="#bengali">Bengali</a> | |
| </td> | |
| <td style="background-color: yellow;"> | |
| <!--Step 4 : provide a container for route provider to dump it's content in. --> | |
| <div ng-view></div> | |
| </td> | |
| </tr> | |
| </table> | |
| </body> | |
| <script> | |
| 'use strict' ; | |
| // Step 2 : Create an app and import ngRoute | |
| var app = angular.module("myApp", ['ngRoute']); | |
| // Step 3 : Configure the route. Proivde template HTML that is to be shown on each route. | |
| app.config( function( $routeProvider){ | |
| $routeProvider | |
| .when("/", {template : 'Hello world from route provider.'}) | |
| .when("/bengali", { template : 'Route provider er Nomoshkar.'}) ; | |
| }) ; | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment