This question already has an answer here:
Angular - UI Router Routes - HTML5 Mode
(1 answer)
Closed 5 years ago.
I have already tried $locationProvider and base href tag in my head of my index.html file. But was getting 404 error while rendering my views. I think it is something with my app.use method of Express in app.js file.
This is my folder structure of this project. https://i.stack.imgur.com/PFPlk.png
This is my app.js file.
var express = require('express');
var app = express();
app.use(express.static(__dirname+'/public'));
app.listen(3000);
console.log('Running on port 3000...');
This is my script.js file.
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl : 'views/home.html',
controller : 'homeController'
})
.state('posts', {
url: '/posts',
templateUrl : 'views/posts.html',
controller : 'postsController'
})
.state('radio', {
url: '/radio',
templateUrl : 'views/radio.html',
controller : 'radioController'
});
$urlRouterProvider.otherwise('/');
});
myApp.controller('homeController', function($scope) {
$scope.title = 'Hello.';
});
myApp.controller('radioController', function($scope) {
$scope.message = 'Look! I am an radio page.';
});
This is my index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>WISS</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="styles/styles.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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="/">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a ui-sref="home">HOME</a></li>
<li><a ui-sref="posts">POSTS</a></li>
<li><a ui-sref="radio">RADIO</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div id="main">
<div ui-view></div>
</div>
</div>
</body>
</html>
In Angular place $locationProvider.html5Mode(true); in your myApp.config block.
Then for express add this before app.listen(3000)
app.all('/*', function(req, res) {
res.sendfile('public/index.html');
});
Related
The pages aren't loading in my ng-view. All the clicked links come up as just blank. What am I doing wrong? I think I have all my routes put correctly. Thanks in advance.
index.html
<!DOCTYPE html>
<html ng-app="soolApp">
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Hi. I'm Dan Karlin.</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-folder-open"></i> Example 1</li>
<li><i class="fa fa-folder-open"></i> Example 2</li>
</ul>
</div>
</nav>
</header>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
script.js
var soolApp = angular.module('soolApp', ['ngRoute']);
soolApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/promo', {
templateUrl : 'pages/promo.html',
controller : 'promoController'
})
.when('/rain', {
templateUrl : 'pages/rain.html',
controller : 'rainController'
});
});
soolApp.controller('mainController', function($scope) {
});
soolApp.controller('promoController', function($scope) {
});
soolApp.controller('rainController', function($scope) {
});
So, I'm at a loss. I have a job interview on Monday and was putting together this angular app for that purpose.
I think you should check your console of browser. You have done everything right. Here is the plunkr I created from your example. Its working. Only thing you should look into is the location of html files which might be giving 404 error.
And, Best of luck for the interview ;)
I'm learning AngularJS for a project but I got stuck in rendering a partial view. I've made the main page with three partial templates that need to be loaded in the main page. Also created a javascript files to define the module and create the controller. After all this still the partial templates are not loading in the main index page. Also there is no errors in the google chrome console. My Folder structure is as follows :
- scripts
-- angular.min.js
-- angular-route.min.js
-- app.js
templates
-- home.html
-- courses.html
-- students.html
index.html
My index.html is :
<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<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>Title Page</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route-min.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">Title</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Courses</li>
<li>Students</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Home</li>
<li>Courses</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
My app.js is :
var app = angular.module("myModule", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "templates/students.html",
controller: "studentsController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home Page";
})
.controller("coursesController", function ($scope) {
$scope.courses = ["C#", "VB.NET", "ASP.NET", "SQL Server", "AngularJS", "JavaScript"];
})
.controller("studentsController", function($scope, $http) {
$http.get("http://localhost:8000/api/students").then(function(response) {
$scope.students = response.data;
});
});
I've also tried the followings :
"<ng-view></ng-view>", "<div ng-view></div>", "<div ng-view=""></div>"
But nothing seems to be working.
I have tried many different approaches getting my Angular routing to work, however, I cannot get the links to route correctly. Any help will be greatly appreciated.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SIE Special Projects</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="sp_app">
<div ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">{{ message }}</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> Projects</li>
</ul>
</div>
</nav>
<div id="main">
<div ng-view></div>
</div>
</div>
</body>
</html>
Here is a plunk of my routing code
http://embed.plnkr.co/FVVdbuKddGNFQgjkuSxv/
Routing Code:
var app = angular.module('sp_app', ['ngRoute']);
// configure our routes
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'mainController'
})
.when('/projects', {
templateUrl: 'allprojects.html',
controller: 'projectsController'
});
});
app.controller('mainController', function ($scope) {
$scope.message = 'Welcome to the Special Projects web page';
});
app.controller('projectsController', function ($scope) {
$scope.message = 'Here are the projects';
});
I am trying to use the routing feature of angularJS, but so far it will not include my html templates (user.html and overview.html, which are in the same folder as index.html).
For information only: the expression {{test}} is working.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PARA Liste</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
</head>
<body>
<div ng-app="angularJsApplication" ng-controller="angularJsController">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Para Liste</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>overview</li>
<li>user1</li>
<li>user2 - {{test}}</li>
</ul>
</div>
</div>
</nav>
<div class="ng-view"></div>
</div>
<script src="js/angularJsApplication.js"></script>
<script src="js/angularJsApplicationController.js"></script>
</body>
</html>
angularJsApplication.js:
var app = angular.module("angularJsApplication", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/#", {
templateURL : "overview.html"
})
.when("/overview", {
templateURL : "overview.html"
})
.when("/user1", {
templateURL : "user.html"
})
.when("/user2", {
templateURL : "user.html"
})
});
angularJsApplicationController.js:
app.controller("angularJsController", function($scope){
$scope.test = "testTestTEST";
});
user.html:
<h1>user</h1>
Its typo mistake :
not templateURL It''s templateUrl
So,it should be.
templateUrl: "overview.html"
I know that routeProvider topic has been raised over a thousand of times, but I still cannot figure out why my code isn't working. The problem is, I think, with routeProvider which shows Resource not found whenever i try to go to localhost:8080/login
Here is the code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Strona Logowania</title>
<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="col-xs-offset-2 col-xs-8">
<div ng-view></div>
</div>
</div>
</div>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<script src="../scripts/app.js"></script>
<script src="../scripts/controllers.js"></script>
<script src="../scripts/services.js"></script>
</body>
</html>
app.js
'use strict';
var app = angular.module('myApp', ['ngRoute', 'services', 'controllers']);
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/login', {
controller: 'loginCtrl',
templateUrl: '../page/login.html'
}).
when('/home', {
controller: 'homeCtrl',
templateUrl: '../page/home.html'
}).
otherwise({
redirectTo: '/login'
});
}]);
controllers.js
'use strict';
var cont = angular.module('controllers', ['services']);
cont.controller('loginCtrl', ['$scope', 'usersFactory', '$window',
function ($scope, usersFactory, $window) {
$scope.login = function () {
usersFactory.create($scope.user).$promise
.then(function (response) {
$window.location.href = "/page/test.html";
}, function (response) {
$scope.errorMessage = "Bledne dane logowania";
});
}
}]);
cont.controller('homeCtrl', ['$scope', 'usersFactory', '$window']);
login.html
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<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" aria-selected="true">Davay bilet</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="nav dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PL<span class="caret"></span></a>
<ul class="nav dropdown-menu">
<li>PL</li>
<li>EN</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="jumbotron">
<form name="myForm">
<div>
<label>Login*:</label>
<input type="text" ng-model="user.ldapLogin" name="ldapLogin"/>
</div>
<div>
<label>Hasło*:</label>
<input type="password" ng-model="user.password" name="password"/>
</div>
<button ng-click="login()" type="submit" class>Loguj</button>
</form>
</div>
When I insert login.html into index.html with added ng-controller it works fine.
Make sure you the templateUrl is set correctly. Relative paths in angular refer to the document in which the app is instantiated (i.e. index.html).
Assuming you have a structure like:
root/scripts/myApp.js
root/page/login.html
root/index.hmtl
the correct referral would be templateUrl: 'page/login', not as might be expected templateUrl: '../page/login'. According to angular there is no need to go one level down in your folder structure.
I think the templateUrl is relative to the current url but not the file system path because the view is loaded on client side. So I think the code below should work:
$routeProvider
.when('/login', {
controller: 'loginCtrl',
templateUrl: '/page/login.html'
})
.when('/home', {
controller: 'homeCtrl',
templateUrl: '/page/home.html'
})
.otherwise({
redirectTo: '/login'
});