Created
January 28, 2018 17:42
-
-
Save nagasudhirpulla/b61a2e8b0e7a92f774c9835f47f6a99b to your computer and use it in GitHub Desktop.
Demonstrates how to create multiple angular ng-views using multiple modules. Note that is possible by using angular.bootstrap function.
This file contains 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
| <!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> | |
| <div id="myApp"> | |
| <p><a href="#/!">Main</a></p> | |
| <a href="#!red">Red</a> | |
| <a href="#!green">Green</a> | |
| <a href="#!blue">Blue</a> | |
| <div ng-view></div> | |
| <p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p> | |
| </div> | |
| <div id="myApp2"> | |
| <p><a href="#/!">Main</a></p> | |
| <a href="#!red">Red</a> | |
| <a href="#!green">Green</a> | |
| <a href="#!blue">Blue</a> | |
| <div ng-view></div> | |
| <p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p> | |
| </div> | |
| <script> | |
| /* | |
| https://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page/18583329#18583329 | |
| https://docs.angularjs.org/guide/bootstrap | |
| */ | |
| var app = angular.module("myApp", ["ngRoute"]); | |
| app.config(function($routeProvider) { | |
| $routeProvider | |
| .when("/", { | |
| templateUrl : "main.htm" | |
| }) | |
| .when("/red", { | |
| templateUrl : "red.htm" | |
| }) | |
| .when("/green", { | |
| templateUrl : "green.htm" | |
| }) | |
| .when("/blue", { | |
| templateUrl : "blue.htm" | |
| }); | |
| }); | |
| var app2 = angular.module("myApp2", ["ngRoute"]); | |
| app2.config(function($routeProvider) { | |
| $routeProvider | |
| .when("/", { | |
| templateUrl : "main.htm" | |
| }) | |
| .when("/red", { | |
| templateUrl : "green.htm" | |
| }) | |
| .when("/green", { | |
| templateUrl : "blue.htm" | |
| }) | |
| .when("/blue", { | |
| templateUrl : "red.htm" | |
| }); | |
| }); | |
| angular.bootstrap(document.getElementById("myApp"), ['myApp']); | |
| angular.bootstrap(document.getElementById("myApp2"), ['myApp2']); | |
| /* | |
| Notice that angular.bootstrap will not create modules on the fly. You must create any custom modules before you pass them as a parameter. | |
| You should not use the ng-app directive when manually bootstrapping your app. | |
| */ | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment