ng-view Angular not showing the text output

Question

<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-route.js"></script>
</head>
</head>
<body ng-app="myApp" ng-controller="cont1">
<a href=#dogs>dogs</a> <a href=#cats>cats</a>
<div ng-view></div> 
<script>
angular.module("myApp", ['ngRoute']).config     ('$routeProvider',function($routeProvider){
  $routeProvider.when("/dogs", {templateUrl: "one.html"})
            .when("/cats", {templateUrl: "two.html"})
            .otherwise("/cats", {redirectTo: "/dogs"})
});
app.controller("cont1", function($scope){ $scope.model = {message: "This is my app One!!!"} });
</script> 
</body> 
</html>

I am unable to get the message in paragraph 'Here are the cats' or 'Here are the dogs' on clicking the two links; these files are saved as one.html and two.html in the same folder.

I have downloaded and added the angular-route.js file in the same folder. Kindly help!

I have put controllers in routerProvider but it is not necessary, and adding it to it wont run! :(

Please try with serve your project from command prompt instead of just double click on html file. Thanks. — Naitik, Mar 16 '15 at 13:29

score 0 · Answer 1 · answered Mar 16 '15 at 13:19

You are forgetting to insert the controllers for your templates inside the object in when. See below:

<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-route.js"></script>
</head>
</head>
<body ng-app="myApp" ng-controller="cont1">
<a href=#dogs>dogs</a> <a href=#cats>cats</a>
<div ng-view></div> 
<script>
angular.module("myApp", ['ngRoute']).config     ('$routeProvider',function($routeProvider){
  $routeProvider.when("/dogs", {
                   templateUrl: "one.html",
                   controller: "cont1"
                   })
            .when("/cats", {
                   templateUrl: "two.html",
                   controller: "cont1"
                 })
            .otherwise("/cats", {redirectTo: "/dogs"})
});
app.controller("cont1", function($scope){ $scope.model = {message: "This is my app One!!!"} });
</script> 
</body> 
</html>

I know I left controller; it should work without it too, and I tested even with controllers but this doesn't run! :( — Deadpool, Mar 16 '15 at 13:26
try running "python -m SimpleHTTPServer 3000" in the same directory in your terminal if you are on mac. — user3681587, Mar 16 '15 at 13:36

score 0 · Answer 2 · answered Mar 16 '15 at 13:20

If you're opening this html file directly in the browser, it won't work. This is because your template files will be loaded using AJAX. To make sure the user's data from one site cannot be fetched by a malicious other site, AJAX requests must adhere to the Same origin policy. The minute details of this policy are outside the scope of this answer, but it means that one site page can't make requests to another site. Files loaded directly from disk (loaded using the `file://' url scheme) don't have an origin so the cross origin policy check will always fail.

To solve this problem, put your files on a server, and try acessing them from there. If you're using a mac, you canuse Python's simple http server, which comes preinstalled on your mac. On windows, you can use mongoose.

score 0 · Answer 3 · answered Mar 16 '15 at 13:36

When you use the minify-proof syntax for angular you pass the parameters as an array, so instead of:

config('$routeProvider',function($routeProvider){
  $routeProvider.when("/dogs", {
...
});

you needed:

config(['$routeProvider',function($routeProvider){
  $routeProvider.when("/dogs", {
...
}]);

http://plnkr.co/edit/7NiWduPXCIKutSF243Hg?p=preview

score 0 · Answer 4 · answered Mar 17 '15 at 07:25

I checked it out with Team. I just had to remove the controller from the top part of the code in Html file, and it would work fine.

<body ng-app="myApp" ng-controller="cont1">

should be turned to ...

<body ng-app="myApp">

Thanks buddies for helping me though!

ng-view Angular not showing the text output

4 Answers4