AngularJS: Partial view not rendering

Question

I am trying to load partial views in a single page application using angular. I have configured the routes as shown in my script file code below. Following is my code for loading partial views:

var app = angular.module("myBlogApp", ["ngRoute"])
   .config(function ($routeProvider) {
       $routeProvider
       .when("/view1", {
           templateUrl: "Views/view1.html",
           controller: "view1Controller"
       })
      .when("/view2", {
          templateUrl: "Views/view2.html",
          controller: "view2Controller"
      })
       .when("/view3", {
           templateUrl: "Views/view3.html",
           controller: "view3Controller"
       })
   })
    .controller("view1Controller", function ($scope) {
        $scope.message = "You are in View 1";
    })
    .controller("view2Controller", function ($scope) {
        $scope.message = "You are in View 2";
    })
    .controller("view3Controller", function ($scope) {
        $scope.message = "You are in View 3";
    })

Following is the Index page:

<html ng-app="myBlogApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/Script.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>
                <a href="#/view1">View1</a>
                <a href="#/view2">View2</a>
                <a href="#/view3">View3</a>
            </td>
            <td>
                <div ng-view></div>
            </td>
        </tr>
    </table>
</body>
</html>

But when I load the index.html page and click on the hyperlinks, I do not see the view on my page.

The HTML on view is:

<h1>View2</h1>
<div>{{message}}</div>

yes. Here is how the views are: <h1>View2</h1> <div>{{message}}</div> — Sanjalee Patni
– Sanjalee Patni, Commented Jan 19, 2018 at 12:15
what angularjs version are you using? you might need href="#!/view1" instead of href="#/view1". Also check console.log for errors (maybe you got your path wrong) — Aleksey Solovey
– Aleksey Solovey, Commented Jan 19, 2018 at 12:16
@Lee you can also try using ng-href, I think you don't need to add #! there — Aleksey Solovey
– Aleksey Solovey, Commented Jan 19, 2018 at 12:53

Aleksey Solovey · Accepted Answer · 2018-01-19 12:28:08Z

1

In AngularJS version 1.6 they changed the hash-prefix for URL hash-bang. Links now have #! instead of #. More about it: commit-aa077e8

To remove the hash-prefix (!), you would need your config to have this code:

$locationProvider.hashPrefix('');

answered Jan 19, 2018 at 12:28

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sanjalee Patni Over a year ago

Used #!view1 instead of #!/view1 (omitting the slash ). This also worked. Any particular reason?

Aleksey Solovey Over a year ago

@Lee don't know, but maybe it depends on how $routeProvider.when() works (because it ignores / for whatever reason)

Manvendra Priyadarshi · Accepted Answer · 2018-01-19 12:31:43Z

<!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">


<a href="#!view1">View 1</a>
<a href="#!view2">View 2</a>
<a href="#!view3">View 3</a>


<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/view1", {
        template : "{{message}}",
        controller : "view1Controller"
    })
    .when("/view2", {
        template : "{{message}}",
        controller : "view2Controller"
    })
    .when("/view3", {
        template : "{{message}}",
        controller : "view3Controller"
    });
});
app.controller("view1Controller", function ($scope) {
    $scope.message = "You are in View 1";
});
app.controller("view2Controller", function ($scope) {
    $scope.message = "You are in View 2";
});
app.controller("view3Controller", function ($scope) {
    $scope.message = "You are in View 3";
});

</script>

</body>
</html>

Collectives™ on Stack Overflow

AngularJS: Partial view not rendering

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related