ng-view is a directive in AngularJS (1.x) used with the $routeProvider (not ui-router) for basic routing.
You use it to display the template associated with the current route:
<div ng-view></div>
When you navigate to a route like /home, Angular will look at your $routeProvider.when('/home', ...) configuration and render the corresponding template inside the ng-view container.
Common Issues (And How to Fix Each One)
1️⃣ You Didn’t Include ngRoute as a Dependency
If you’re using $routeProvider, you must add 'ngRoute' as a module dependency.
Fix:
angular.module('myApp', ['ngRoute']);
2️⃣ You Forgot to Include the Angular Route Script
If you’re using AngularJS from a CDN or locally, you also need to include the Angular Route module:
Fix:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
Make sure this is included after AngularJS itself.
3️⃣ ng-view Is Missing or Placed Incorrectly
You must have exactly one ng-view in your main layout where route templates will be injected.
✅ Fix:
Place it in your main index.html or root component:
<body ng-app="myApp">
<div ng-view></div>
</body>
Make sure it’s not inside a controller or component that prevents it from rendering.
4️⃣ Route Configuration Is Missing or Incorrect
This is a big one. If you didn’t define the route using $routeProvider.when(), or if the route path doesn’t match the URL, Angular won’t display anything.
Fix:
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.otherwise({
redirectTo: '/home'
});
}]);
Double-check:
- Paths (e.g.,
/homevs/Home) templateUrlfile location- That the file actually exists and loads
5️⃣ Template File Not Found
If the templateUrl is incorrect or the file doesn’t exist, nothing will be rendered, and you’ll see a 404 in the browser console.
Fix:
Check the Network tab in browser dev tools to confirm that the template file is being loaded correctly.
6️⃣ Controller Not Found or Not Registered
If you link a controller in the route and it’s not defined or registered correctly, Angular can fail silently or throw an error.
Fix:
myApp.controller('HomeCtrl', function($scope) {
$scope.message = "Welcome Home!";
});
Make sure controller names match exactly and that they’re defined in the same module or a loaded module.
7️⃣ Misuse of ng-view and ui-router Together
If you are using ui-router ($stateProvider), you should use ui-view, not ng-view.
Wrong:
<div ng-view></div>
Right (if using ui-router):
<div ui-view></div>
Mixing the two will lead to nothing showing up.
8️⃣ Routing Mode Confusion (Hash vs HTML5 Mode)
If you’re using $locationProvider.html5Mode(true), you need to configure your server properly to serve index.html for all routes. Otherwise, you’ll get 404 errors and ng-view won’t work.
Fix:
Use hash mode during development:
$locationProvider.html5Mode(false);
Or configure your server (e.g., Express, Nginx) to fallback to index.html.
9️⃣ Scope or Template Errors
If your template has an error (e.g., typo in Angular expression), Angular may fail silently.
Fix:
Check the browser console for:
[$compile:nonassign][$injector:unpr][$controller:ctrlreg]errors
And debug your template.
Working Example
Here’s a minimal working version for reference.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>My App</h1>
<a href="#!/home">Home</a>
<a href="#!/about">About</a>
<div ng-view></div>
</body>
</html>
app.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutCtrl'
})
.otherwise({ redirectTo: '/home' });
});
myApp.controller('HomeCtrl', function($scope) {
$scope.message = "Welcome to the Home Page!";
});
myApp.controller('AboutCtrl', function($scope) {
$scope.message = "This is the About Page.";
});
home.html
<h2>{{ message }}</h2>
about.html
<h2>{{ message }}</h2>
Final Checklist
| Check | Description |
|---|---|
'ngRoute' added to module | angular.module('myApp', ['ngRoute']) |
| Route script included | angular-route.min.js is loaded |
ng-view present | In main HTML file, only one instance |
| Route defined | Using $routeProvider.when() |
| Template file path is correct | No 404 errors |
| Controller registered | With matching name |
| No template errors | Use browser console to check |
Correct directive (ng-view vs ui-view) | Based on routing method used |
| Server configured (for HTML5 mode) | or use hash mode instead |