Angularjs ng-view does not work
The problem is incorrect usage of ng-app. Only declare ng-app once for your application, usually on the html element.
Then declare other modules as dependencies of your main module.
I put the ng-app declaration on the html tag and put your ng-routing in the app module, getting rid of the views module.
http://plnkr.co/edit/btL2QMyHxhDLH7cxZ1YV
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}).
when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: '/index' });
// $locationProvider.html5Mode(true);
});
<html ng-app="app">
You can also put the view-logic in a separate module, but usually you will then also put it in a different file.
The html5mode is disabled because it triggered an error (it's a little bit tricky to make that work).
Note: it actually is possible to use multiple ng-app by manually bootstrapping them, but you really shouldn't do this unless you have a very good reason for it.
Why does AngularJS ng-view not work locally?
Both ng-view
and ng-include
use AJAX to load templates. The problem is that browser by default does not allow AJAX requests to files located on your local file system (for security reasons). Therefore you have two options:
- Run local web server that will serve your files
- Tell your browser to allow local files access
If you are on Mac, the fist option is rather easy since you have several built-in web servers (Apache httpd
and Python module called SimpleHTTPServer
). To run Python SimpleHTTPServer
module just open console in the folder your files located at and run
python -m SimpleHTTPServer 3000
then open your browser and type http://localhost:3000
. That's it.
If you are on Windows, it's also possible. You can install for example Wamp and serve files from it.
Second option is possible with Chrome, just run it with --allow-file-access-from-files
option from command line or add this flag to shortcut after path to Chrome executable.
This resource may also be useful to understand how to run things locally in different browsers and using different web servers.
ng-view not working for my app
If you don't use local server, Chrome doesn't load other html files in existing html. But, it will work in Firefox browser..
Try visual studio. Create a project in visual studio and run using it.
AngularJS ng-view not showing view
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.
AngularJS ng-view commented out
To use ng-view, you would probably would want to use a server or else your very likely to hit the cross origin request problem that you faced.However, if really want to use the local file system, you could disable same origin policy in chrome (although I'm not sure that would work, nor would I even recommend it): Disable same origin policy in Chrome
Another alternative method is mentioned here:
https://stackoverflow.com/a/23492993/3006737
Personally I would not do either and suggest you use some sort of server. You don't even need to use any of the server features. Just to run the actual page. I typically just run the built in PHP server (even though I'm not using any PHP files), although something like Node and Apache could work fine.
http://php.net/manual/en/features.commandline.webserver.php
ng-view does not seem to be working. Nothing shows up
The problem
The module call (i.e. config()) for the router is inside the controller callback.
Solution
Move the module call outside the controller callback. Look at the documentation for ngRoute and the example for more information.
So this:
mistApp.controller('mainCtrl',function($scope,$http,$route, $routeParams, $location){
//routes
mistApp.config(function($routeProvider,$locationProvider){
...
}) //end routes
}) //end of mainCtrl
Becomes:
mistApp.controller('mainCtrl',function($scope,$http,$route, $routeParams, $location){
}); //end of mainCtrl
//routes
mistApp.config(function($routeProvider,$locationProvider){
...
}) //end routes
See it working in this updated plunker.
One other issue I noticed was invalid HTML. There are three lines in the hamburger menu have an extra double quote after the class attribute. So these lines:
<span class="icon-bar""></span>
should be updated like this:
<span class="icon-bar"></span>
Instead of those three spans, you could consider using the glyphicon-menu-hamburger class name to utilize the Bootstrap menu icon (see the Components section for more information about those).
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
Related Topics
How to Vertical Align an Inline-Block in a Line of Text
Flex Child Is Growing Out of Parent
CSS Selector for Text Input Fields
Brackets Displays Wrongly for Right to Left Display Style
Image Overlay on Responsive Sized Images Bootstrap
Android: How to Add HTML Links Inside a Listview
Phonegap - How to Open External Link Inside The App
Relatively Position an Element Without It Taking Up Space in Document Flow
Print When Textarea Has Overflow
Is There a Web Service for Converting HTML to Pdf
Svg Fill Animation for The Given Path
Emoji Rendered in Chrome Have Different Widths Than in Other Browsers
Firebug-Like Debugger for Google Chrome
How to Include Glyphicons in Bootstrap 3