I'm building a simple personal contacts management app using AngularJS. I put all my files inside htdocs/angular-contacts/ folder of my Mac machine.
index.html
<!DOCTYPE html>
<html ng-app='ContactsApp'>
<head>
<title>Contacts</title>
<base href='/'></base>
</head>
<body>
<h1>Contacts</h1>
<div ng-view=""></div>
<script src='/angular-contacts/jquery-2.1.3.min.js'></script>
<script src='/angular-contacts/angular.min.js'></script>
<script src='/angular-contacts/angular-route.min.js'></script>
<script src='/angular-contacts/angular-route.min.js.map'></script>
<script src='/angular-contacts/app.js'></script>
<script src='/angular-contacts/controller.js'></script>
</body>
</html>
app.js
angular.module('ContactsApp', ['ngRoute']);
.config(function($routeProvider,$locationProvider){
$routeProvider
.when('/contacts',{
controller: 'ListController',
templateUrl: 'list.html'
});
$locationProvider.html5Mode(true);
});
controller.js
angular.module('ContactsApp')
.controller('ListController',function($scope){
$scope.contacts = [];
})
list.html
<p>List views...</p>
Why I go to http://localhost:8888/angular-contacts/contacts, I got 404 Not Found error.
How to fix this problem? How to load that list.html?
Note:
I'm using MAMP (Apache).
AngularJS: v1.3.14
Angular Route: v1.3.14
That's because
$routeProvider
.when('/contacts',{
controller: 'ListController',
templateUrl: 'list.html'
});
expects the http://localhost:8888/contacts location, not the http://localhost:8000/angular-contacts/contats location.
You should add the prefix in your route declaration, or even better, conifgure the virtual host, so you'll be able to use a real domain, rather than the localhost's sub-catalogue.
Related
My server using angular for routing. My server sending to the browser a HTML file that contains js file with routing (using angular js).
my server code (send to browser check.html contains the routing file main.js) :
var express = require("express");
var app = express(); // express.createServer();
app.use(express.static(__dirname + '/public'));
app.get("/*", function(request, response) {
response.sendFile(__dirname + '/public/check.html');
});
app.listen(8080);
check.html code:
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
</body>
</html>
after the browser gets the check.html file he doesnt redirect it to main.js in order to use the routing. I tried to debug it but the browser is stuck without doing nothing. my app is local and the url im trying to connect to is:
http://localhost:8080/stations
and all the files are loaded correctly without any errors on the console.
main.js code:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/',
{
controller: 'HomeController',
templateUrl: 'menu.html'
})
.when('/stations',
{
controller: 'StationsController',
templateUrl: 'check2.html'
})
.when('/',
{
controller: 'HomeController',
templateUrl: 'menu.html'
})
.otherwise({redirectTo: '/'});
});
myApp.controller('StationsController', function($scope){
$scope.check = {name:"ELAD!!"};
});
check2.html code:
<html>
<head>
</head>
<body>
<div>
<p>{{check.name}}</p>
</div>
</body>
</html>
Ok let's start fresh on angular..
Angular 101
You may know angular is essential for Single Page Application so what happens is you supply the first page that is check.html in your case but you should name it index.html it's a convention. khair.. what happens is when a route transition occurs in the your angular code that is something after # an it's purely client end or a soft redirection. so angular fires an AJAX request to retrieve the resource matching your templateUrl from router. then plugs it inside the <div ng-view></div> thus the redirection. notice the ng-view.
Well bellow is the proposed solution
the link should be http://localhost:8080/#stations as the angular matches handles the routes after #. Other routes like the link you provided are handed to the server.
your check.html should look like this.
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
and your check2.html should be in your public directory and have the code like
<div>
<p>{{check.name}}</p>
</div>
Angular is working as I can see the {{ text }} but I can't seem to get the ng-view to display.
My code is:
index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/1.3.5/angular.js"></script>
<script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div class="main_container" ng-controller="MainController">
<span ng-cloak>{{text}}</span>
<div ng-view></div>
</div>
<!-- modules -->
<script src='app.js'></script>
<!-- controllers -->
<script src='MainController.js'></script>
<script src='home.js'></script>
</body>
</html>
home.js:
app.controller('home', function($scope) {
$scope.words = 'It works!';
});
MainController:
app.controller('MainController',function($scope){
$scope.text = 'Hello World!';
});
home.html:
<div ng-controller="home">
<h3>{{ words }}</h3>
</div>
app.js:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/index',{
templateUrl: 'home.html',
controller: 'home'
}).
otherwise({
redirectTo: '/index'
});
//$locationProvider.html5Mode(true);
});
edit:
It seems to work in plunker but when I open the file in chrome I get the following error:
"XMLHttpRequest cannot load {{file location}}. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."
You don't need the ng-controller attribute on your root element in home.html because you are already defining the controller for that template when you set up your $routeProvider. Beyond that your code looks good. If you really want to get ahead of the game, though, I would recommend using UI Router if you plan to do any advanced routing in your application. It is much more robust and easier to work with than Angular's ngRoute, widely used, and well-documented.
Your Code is working fine !! there may be problem on which file to load first so please take care of the order of the files added in your HTML
Here is the working plunker with your code. here ng-view loads with no problem
http://embed.plnkr.co/oNADizOltrGitbWTWNXf/preview
Hope this helps!!!
I've just started using AngularJS for a new app I'm looking at putting together but I've run into a problem when using routes and views.
I've stripped this example down to the bare minimum but the issue remains. All this example is doing is hitting the server and returning the index.html page, which then sources Angular etc.
index.html
<!doctype html>
<html lang="en" ng-app="main">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" src="css/style.css" />
<script type="text/javascript" src="js/ext/angular.min.js"></script>
<script type="text/javascript" src="js/ext/angular-route.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<base href="/ui/">
</head>
<body>
<div ng-view></div>
</body>
</html>
main.js
(function() {
var app = angular.module('main', ['ngRoute', 'test']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/test', {
templateUrl: 'html/test.html',
controller: 'TestCtrl'
})
.otherwise({
redirectTo: '/test'
});
$locationProvider.html5Mode(true);
}]);
})();
test.js
(function() {
var app = angular.module('test', []);
// get hierarchy
app.controller('TestCtrl', ['$scope', function($scope) {
alert('here');
}]);
})();
test.html
<div>FooBar!</div>
The alert gets fired infinitely but I just don't know why. I've seen other examples where ng-view and routing appear to be used exactly the same way, so I'm not sure what I'm doing wrong...
I had same problem sometime ago. Please, use firebug or some network control in the same browser at the developers tools panel where you can see the requests to the server for resources and then check that test.html file is requested and is correctly retrieved. It seems like the only one that is retrieved is the index.html and due this, the loop.
Probably you have to use this templateUrl value "/html/test.html" with "/" before. To localize this resource.
This is the idea that I'm proposing you. Localize the test.html resource with the correct way. I hope this can help you.
I had this issue today in March 2016. I have just found out what was causing the infinite loop when ng-view is present in the html (index.html in my case which is the initial html loaded at the start).
Ok, the problem was after all very simple one. I had this route provider setting in my app.js
angular.module('myapp',['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl:'/index.html',
controller:'MyAppCtrl'
})
Since the initial html loaded is index.html, and the url at that point is '/', and the routeProvider invokes the code at when '/'. Yes, it loads index.html again, and again and again and again... till it dies. The solution is not to set index.html as the templateUrl for the '/' route. The html (template) should not include <div ng-view></div>.
Here's how I've done it, example here
Code
.config(['$routeProvider', '$locationProvider',function($routeProvider, $locationProvider) {
$routeProvider
.when('/test', {
template: '<div>test</div>',
controller: 'testCtrl'
})
.when('/other', {
template: '<div>Delete</div>',
controller: 'otherCtrl'
})
.otherwise({
redirectTo: '/test'
});
$locationProvider.html5Mode(true);
}]);
Ok, I solved my problem. I've accepted sergio's as it was closest to how I realised what the problem was - my app was requesting the html file from the application server, which is set up to return the index.html file as a default action. As the html request had no associated action, the default response of returning index.html was kicking in instead of the test.html file.
Once I changed the url so it was getting the html file from the web server, everything worked great. If I'd taken a moment earlier to actually think through what was happening, it would've been obvious.
Thanks for the responses!
I'm just getting started with ui-router and can't make it displaying a view under the ui-view template.
Main template looks like this
index.html
<html ng-app="MyApp">
<head>
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<h4>
This should be the header
</h4>
<div ui-view></div>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-ui-router.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-cookies.js"></script>
<script src="app.js"></script>
<script src="controllers/main.js"></script>
</body>
</html>
test.html contains just few lines of text
app.js
angular.module('MyApp', ['ui.router'])
.config(function($stateProvider) {
$stateProvider
.state('main', {
url: '/',
templateUrl: 'views/test.html',
controller: 'MainCtrl'
});
})
And on the '/' page I can only see a header and no test.html text.Console gives no errors.
What am I missing here?
Check this plunker, which shows, that we should not forget to set the default route via the: $urlRouterProvider.otherwise("/");. So the only extension made is the injection of $urlRouterProvider and configuration what to do at the start-up (otherwise):
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('main', {
url: '/',
templateUrl: 'test.html',
controller: 'MainCtrl'
});
})
See that example in action.
NOTE: also, do not mix usage of ui-router and default angular routing:
<script src="vendor/angular-ui-router.js"></script>
<!--<script src="vendor/angular-route.js"></script>-->
Simply use one, or the other. The ui-router, which you've already started to use, would/should be good enough...
I am trying to have each item in a list have a button that uses $routeProvider to route to a template. However, I keep getting 404s when I hit the link (it goes to the right address, but no page loads). Any help on getting this code to work would be most appreciated:
angular.module('tipOutput', ['firebase', 'filters'])
.controller('Tips', ['$scope', 'angularFire',
function ($scope, angularFire) {
var ref = new Firebase('https://sitename.firebaseio.com/tips');
angularFire(ref, $scope, "tips");
}])
//routing to secondary pages
.config(['$routeProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/tips/:tipId', {template: 'partials/tip-detail.html', controller: 'Tips'}).
otherwise({redirectTo: '/'});
}])
And, in case it helps, here's the code of my template:
<html ng-app="TipOutput">
<body>
<div ng-view></div>
<script type="text/javascript" src="http://static.firebase.com/v0/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.min.js"></script>
<script type='text/javascript' src='https://cdn.firebase.com/v0/firebase-simple-login.js'></script>
<script src="js/app.js"></script>
</body>
</html>
Routes in a single page app are really virtual routes. How does the webserver software know what to do with that url? What are you doing to map this url to the html file that is serving your app? I suspect you might need to setup your httpd so that it understands what is going on.