AngularJS ng-view not showing view

Question

I'm developing a web app with AngularJS for the frontend and i'm trying to set the routing and showing the views, so far even ng-include and other stuff work for me but not ng-view I'm developing in visual studio and when i run the app it's using a local server (localhost)

here's my directory structure

- ASP.NET project
---- Css
---- Scripts
-------- App
-------- app.js
----------- Home
-------------- Controllers
------------------ index-controller.js
---- Views
------- Partials
---------- navbar.html
------- home.html
- index.html

Here's mi index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Scolaris</title>
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="Content/materialize/css/materialize.css" media="screen,projection" />

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body ng-app="app_module">

    <ng-include src="'Views/Partials/navbar.html'"/>

    <div ng-view></div>

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="Content/materialize/js/materialize.js"></script>
    <script type="text/javascript" src="Scripts/angular.js"></script>
    <script type="text/javascript" src="Scripts/angular-route.js"></script>
    <script type="text/javascript" src="Scripts/App/app.js"></script>
    <script type="text/javascript" src="Scripts/App/Home/Controllers/index-controller.js"></script>
    <script type="text/javascript" src="Scripts/initialization.js"></script>
</body>
</html>

Here's my app.js

'use strict';
var app_module = angular.module('app_module', ['ngRoute']);
app_module.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
          templateUrl: '/Views/home.html',
          controller: 'indexController'
      })
      .otherwise({
          redirectTo: '/'
      });
}]);
/* tried with ../../Views/home.html, ../Views/home.html, etc and nothing */

When i load the site it loads correctly and if i see the requests i can clearly see that it's requesting the home.html with 304 status code, the thing is the div with ng-view is not showing the html inside home.html, what could this be due to?

Any errors in console? Try removing `ng-include` and check if `ng-view loads`. — Zee, Apr 25 '15 at 06:29
@Sourabh- Tried removing the ng-include and ng-view loaded, why is that and how could i make it so the two work together? — HardCodeStuds, Apr 25 '15 at 06:41
@HardCodeStuds This is a common problem, I am also not sure but I guess your `ng-view` instantiation is delayed due to `ng-include`. I guess you should switch to [ui-router](https://github.com/angular-ui/ui-router) which is intented to deal with nested views. — Zee, Apr 25 '15 at 06:54
@Sourabh- you are wrong..there is no such thing in angularjs..basically ng-include div is not closed.so browser is wrapping that `ng-view ` div inside controller..& after loading of `ng-include` template `ng-view` div is getting replaced, look at my answer — Pankaj Parkar, Apr 25 '15 at 07:05

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

I've solved the issue by changing the <ng-include> tag with an <div ng-include="srctoview"> tag. If anyone is having this issue i'd recommend doing this, or doing it like in this answer using a controller

Thanks to @Sourabh- for leading me to an answer.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 25 '15 at 07:17

HardCodeStuds

407
2
11
29

did you looked at my answer ever? – Pankaj Parkar Apr 25 '15 at 07:19

score 0 · Answer 2 · edited Feb 08 '16 at 14:08

0

close <ng-include> directive properly as browser is wrapping ur <ng-view> inside of <ng-include>. it will solve the problem. as @pankaj has already suggested.

edited Feb 08 '16 at 14:08

disco crazy

31,313
12
80
83

answered May 04 '15 at 06:31

Sheelpriy

1,675
17
28

AngularJS ng-view not showing view

2 Answers2