load the content of different html pages in the same page
Question
When user selects the link, i want to load the content of other html inside the same page as per user slection. The links provided are inside a controller(myController). How to load the red.html and green.html based on the user selection. The below js code works if the links are not inside the ng-controller.
<!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">
<div ng-controller="myController">
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<div ng-view></div>
</div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.html"
})
.when("/green", {
templateUrl : "green.html"
})
.when("/blue", {
templateUrl : "blue.html"
});
});
</script>
</body>
</html>
PS: I want the links to be inside ng-controller="myController" and based on the user selection i want to load the html page in the same page. If i remove ng-controller from div, it is loading the content but i want the links to be inside the controller as shown in the above code.
1 answers
solution1
0 ACCPTED 2017-09-28 17:18:06
Problem was you didn't implement your controller as below.
//DEFINE THE CONTROLLER
////////////////////////////////
app.controller("myController", function(){
});
Look at the following example and it's working perfectly. Also I modified templateUrl to template just for demonstrate purposes.
<!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"> <div ng-controller="myController"> <a href="#!red">Red</a> <a href="#!green">Green</a> <div ng-view></div> </div> <script> var app = angular.module("myApp", ["ngRoute"]); //DEFINE THE CONTROLLER //////////////////////////////// app.controller("myController", function() { }); app.config(function($routeProvider) { $routeProvider .when("/", { template: "<h1>Home</h1>" }) .when("/red", { template: "<h1>Red</h1>" }) .when("/green", { template: "<h1>Green</h1>" }) .when("/blue", { template: "<h1>Blue</h1>" }); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.