I have just start working with AngularJS but have an extensive background with JavaScript, PHP, HTML, CSS, etc. I have a basic template put together and everything works fine, when you start at '/'. However, if I tried to load '/contact' or any other page instead of starting at '/' I get a 404 not found. Now, I understand the basics as to why: AngularJS loads different content based on the templates via AJAX so the page never changes. The question: how do I fix this? I cannot be the first one to have this issue but I did some Googling and couldn't find any help.
File: index.html
<!DOCTYPE html>
<html ng-app="alertBlaze">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AlertBlaze</title>
<link href="stylesheet/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet/app.min.css" rel="stylesheet">
<base href="/">
</head>
<body ng-controller="mainController">
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">AlertBlaze</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Platform</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div ng-view></div>
<script src="javascript/jquery.min.js"></script>
<script src="javascript/angular.min.js"></script>
<script src="javascript/bootstrap.min.js"></script>
<script src="javascript/app.min.js"></script>
</body>
</html>
File: app.min.js
var alertBlaze = angular.module('alertBlaze', ['ngRoute']);
alertBlaze.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
alertBlaze.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/platform', {
templateUrl : 'pages/platform.html',
controller : 'platformController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
})
.otherwise({
redirectTo : '/'
});
$locationProvider.html5Mode(true)
});
alertBlaze.controller('mainController', function($scope) {
});
alertBlaze.controller('platformController', function($scope) {
});
alertBlaze.controller('aboutController', function($scope) {
});
alertBlaze.controller('contactController', function($scope) {
});
Any help is appreciated.
Thank you!
I think problems in $locationProvider.hashPrefix('');
If you can go to http://alertblaze.com/contact you catch 404, but if you can go to http://alertblaze.com/#/contact - it's success.
try to change
$locationProvider.hashPrefix('');
to the
$locationProvider.hashPrefix('!');
or remove
$locationProvider.html5Mode(true)
and change your routing with #/
Okay, so yeah apparently the issue is exactly what Tara's said it was however, I want the pound sign remove for cleaner URL's so I added Apache Rewrite Rules to rewrite everything to index.html:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
Add the above as a rewrite and everything will work!
Related
So I've set up ui-router and I had it working a few minutes ago, sort of, it would display the template with content loaded from another html file, but none of the links would work. Now nothing is working: the template shows up but the content is not pulled in and none of the links work.
Ctrl.js
var site = angular.module('site', ['ui.router']);
site.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('page', {
url: '/page',
templateUrl: 'page.html',
})
.state('about', {
url: '/about',
templateUrl: 'about.html',
});
$urlRouterProvider.otherwise('/page');
})
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="scripts/ctrl.js"></script>
<link rel="stylesheet" href="style/main.css">
</head>
<body ng-app="site">
<nav class="navbar navbar-default navbar-fixed-top" id="navigate">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navSmall">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navSmall">
<ul class="nav navbar-nav navbar-right">
<li>about</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center container-fluid">
<div ui-view></div>
</div>
<footer class="footer">
<div id="note" class="container">
<div class="row">
<div class="col-sm-8">
-----Footer Content-----
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</footer>
</body>
</html>
About.html (should be loaded but it's not)
<div ui-view="about">
<div class="container-fluid bg-about">
<div class="container-content">
<div class="row">
</div>
</div>
</div>
</div>
Wow you all are fast! Thanks for the suggestions. So update: changing it to ahref="#/about" helped in that I can now go to the link but still no content displays. There is a console error:
Error: Access to restricted URI denied
fg/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:103:167
n#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:98:460
m/g<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:95:489
e/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:130:409
uf/this.$get</m.prototype.$eval#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:103
uf/this.$get</m.prototype.$digest#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:142:165
uf/this.$get</m.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:399
Ac/c/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:115
h/<.invoke#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:41:374
Ac/c#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:36
Ac#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:332
fe#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:20:156
#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:315:135
g/</j#https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29566
g/</k<#https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29882
angular.min.js:117:399
Your state URL is /about, not /about.html.
In any case, use the ui-sref directive, that's what it's for
<a ui-sref="about">about</a>
You simply pass in the state name (and any params, see the documentation) and it will create the right URL for you taking into account any $locationProvider.html5mode configuration.
If you are loading the app via file:///some/path/to/index.html, the AJAX requests to your templates (ie about.html) might not work. You should be using an HTTP server for your local development.
Have a look at (or even just clone as a base) the angular-seed project. It provides an excellent starting point for first-time Angular development.
You are mistake the state URL
your code <li>about</li>
You can access the state by URL from browser, but referencing other section of the app is a bad practice though it still works
<li>about</li>
Do this
<li><a ui-sref="about">about</a></li>
your state URL is mistake, is /about not /about.html
Try this
<li><a ui-sref="about">about</a></li>
For link to work you need to use
about
instead of
about.
Also for content to pull in like data binding you need to use controller.
Try this, just make sure test.html be there.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
controller: 'myCtrl',
templateUrl: 'test.html'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("MainController", function($scope) {
});
module.controller("myCtrl", function($scope) {
$scope.my = 10;
ab = function() {
alert($scope.my);
}
});
</script>
</head>
<body ng-app="sampleApp">
<div ng-controller="MainController">
Route
<ng-view>
</ng-view>
</div>
</body>
</html>
I started with AngularJS, and my route doesn't work. I searched in google and try some solution found but nothing works.
My index.html (public/index.html)
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<script src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script type="text/javascript" src="javascript/controllers/VehiculeCtrl.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Projet Web</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!--<li class="active">Link <span class="sr-only">(current)</span></li>-->
<li>Véhicules</li>
<li>Agences</li>
<li>Agents</li>
<li>Statut</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- div pour les templates-->
<div ng-view>
</div>
</body>
</html>
My app.js (javascript/app.js):
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : '../views/index.html',
controller : 'VehiculeCtrl'
})
// route for the about page
.when('/vehicules', {
templateUrl : '../views/vehicules.html',
controller : 'VehiculeCtrl'
})
// route for the about page
.when('/agents', {
templateUrl : '../views/vehicules.html',
controller : 'AgentsCtrl'
})
// route for the about page
.when('/agences', {
templateUrl : '../views/vehicules.html',
controller : 'AgencesCtrl'
})
// route for the about page
.when('/status', {
templateUrl : '../views/vehicules.html',
controller : 'StatusCtrl'
})
.otherwise({redirectTo: '/'});
});
And my controller (controllers/VehiculesCtrl.js):
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('VehiculeCtrl', function ($scope,$http, VehiculesGet) {
$scope.text = 'Salut ! je teste le controleur';
var url = '127.0.0.1:3000/vehicules';
//console.log("curieux", VehiculesGet);
var res = VehiculesGet.getAllVehicules(url, function(data, status){
console.log("test",status);
console.log("test",data);
$scope.result = data;
});
});
// GET ALL VEHICULE
myApp.factory('VehiculesGet', [ '$http', function($http) {
//var url = 'http://127.0.0.1:3000/vehicules';
var result;
var data;
return {
getAllVehicules: function(url, callback) {
$http.get('http://127.0.0.1:3000/vehicules')
.success(function (data, status) {
// données récupérées avec succès
callback(data, status);
}).error(function(data,status){
callback(data, status);
});
}
};
}]);
My tree:
public
javascripts
controllers
VehiculesCtrl.js
app.js
views
index.html
Help me please :) ...... And sorry for my english x)
Thanks
I think you should add
<body ng-controller="VehiculeCtrl">
to your controller and remove
var myApp = angular.module('myApp', ['ngRoute']);
from your controller.
Then export your controller from app.js like
myApp.controller('VehiculeCtrl', function ($scope,$http, VehiculesGet)
Try to load the angular-route after the angular, not after your controller, this should work
<head>
<meta charset="UTF-8">
<script src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script type="text/javascript" src="javascript/controllers/VehiculeCtrl.js"></script>
</head>
You are missing the ng-view element in your markup. This is where the routing functionality places the templateUrl content. See this link for documentation: https://docs.angularjs.org/api/ngRoute/directive/ngView
You should remove var myApp = angular.module('myApp', ['ngRoute']) from VehiculesCtrl.js. In VehiculesCtrl.js you should use myApp variable which is declared in app.js
I am trying to load templates in angular but get an error:
Failed to load resource: net::ERR_FILE_NOT_FOUND angular.js:102 Error:
[$compile:tpload]
http://errors.angularjs.org/1.3.15/$compile/tpload?p0=pages%2Fhome.html
at Error (native)
at file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:6:417
at file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:137:25
at file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:112:113
at n.$eval (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:126:15)
at n.$digest (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:123:106)
at n.$apply (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:126:293)
at l (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:81:240)
at M (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:85:342)
at XMLHttpRequest.e (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:86:418)
Here's my index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="weatherApp">
<head>
<title>AngularJS Weather Forecast SPA</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
html, body, input, select, textarea
{
font-size: 1.05em !important;
}
</style>
<!-- load angular via CDN -->
<script src="http://code.angularjs.org/1.3.0-rc.2/angular.min.js"></script>
<script src="http://code.angularjs.org/1.3.0-rc.2/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.3.0-rc.2/angular-resource.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS Weather</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
// MODULE
var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource']);
// ROUTES
weatherApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.htm',
controller: 'homeController'
})
.when('/forecast', {
templateUrl: 'pages/forecast.htm',
controller: 'forecastController'
})
});
// CONTROLLERS
weatherApp.controller('homeController', ['$scope', function($scope) {
}]);
weatherApp.controller('forecastController', ['$scope', function($scope) {
}]);
I tried to use WAMP server to load the pages from, but still get the same error.
Currently your template protocol contains file:// which would not accessible through your browser.
You need to host your code on some server(like IIS, WAMP, etc.) & paste your whole code directory on the server, in order to work your code. Other wise your code looks fine.
So the URL should be either http:// or https:// then your template will fetch from server directly.
Use https or http in URL .Example:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
I have the following script:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!--link rel="stylesheet" type="text/css" href="css/main.css"-->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(window).resize(function () {
$('body').css('padding-top', parseInt($('#navbar').css("height"))+10);
});
$(window).load(function() {
alert(parseInt($('#navbar').css("height")));
$('body').css('padding-top', parseInt($('#navbar').css("height"))+10);
});
</script>
</head>
Basically I have a fixed top navbar (<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top">) and it's covering up the top of my page's actual body content. I came across this solution (after window.load finishes, set the padding of the body based on navbar's height) from many other sources. But it doesn't work. The window.resize works perfectly and will readjust the padding of the body accordingly.
Any idea what's wrong? When I first load the page, the alert statement executes and says the value is NaN. The page behind is still fully white and hasn't loaded at all until I've clicked 'ok'. It's doing this is both chrome and Firefox. Any idea what's happening? Thanks.
Edit:
Adding more code.
This is the body
<body ng-app="cosmoApp">
<div ng-include="'templates/header.html'"></div>
<div ng-view></div>
<div ng-include="'templates/footer.html'"></div>
<script src="/scripts/angular.js"></script>
<script src="/scripts/angular-route.js"></script>
<script src="/scripts/cosmo.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</body>
This is the partial html that Angular shoves into the ng-view div in the body.
<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div>
<div class" jumbotron navbar-brand">
<h2>Whatever</h2>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
This is the JS
angular.module('cosmoApp', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when("/", {templateUrl: "partials/home.html", controller : 'PageCtrl'})
.when("/services", {templateUrl: "/partials/services.html", controller : "PageCtrl"})
.when("/gallery", {templateUrl: "/partials/gallery.html", controller : "PageCtrl"})
.when("/about", {templateUrl: "/partials/about.html", controller : "PageCtrl"})
.when("/contact", {templateUrl: "/partials/contact.html", controller : "PageCtrl"})
.otherwise({redirectto: "/"});
}]).controller("PageCtrl", function($scope)
{
});
Edit 2:
Adding screenshot of the page load. Why does it think window is loaded at this stage if it's not actually loaded?
So I followed this guide: http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
But when I try to change the view nothing happens, anybody a idea what I do wrong?
This is the code I got.
Home.php:
<!DOCTYPE html>
<html ng-app="lax">
<head>
<meta name="author" content="Koen Desmedt" />
<meta name="description" content="CMS Belgium Lacrosse" />
<meta name="keywords" content='Lacrosse, BLF, Belgium' />
<meta name="googlebot" content="noarchive" />
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="lax.js"></script>
<link href="css/style.css" rel="stylesheet">
<title>CMS Belgium Lacrosse</title>
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#/home">
<span class="glyphicon glyphicon-home"></span> BLF
</a>
</li>
<li>
Players
</li>
<li>
Club
</li>
<li>
Games
</li>
</ul>
</nav>
</div>
</header>
<div id='contentcontainer'>
<div class='container' ng-view></div>
</div>
</body>
</html>
lax.js:
var lax = angular.module('lax', []);
lax.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'views/news.php',
controller: 'NewsController'
}).
when('/players', {
templateUrl: 'views/players.php',
controller: 'PlayersController'
}).
otherwise({
redirectTo: '/home'
});
}]);
lax.controller('NewsController', function($scope) {
$scope.message = 'This is Add new order screen';
});
lax.controller('PlayersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
From angular 1.2.0, ngRoute has been moved to its own module. You have to load it separately and declare the dependency.
Update your html:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
And Js:
var lax = angular.module('lax', ['ngRoute']);
For more information: http://docs.angularjs.org/guide/migration
Angular routes require the route module to be included as well. Here is the documentation that covers this.
So, I think you may be missing the:
<script src="angular-route.js"></script>
In the <head> of the page.
*Note: this module used to be part of Angular, but was moved out recently (1.2?). So, some tutorials are still assuming that $route is built-in.
Adding this would work :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
but it will not work without internet access when running for a first time ,Therefore you should ng-route dependency to your project and refer that in your html file
How to add ng-route dependency