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'
});
Related
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';
});
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');
});
I'm developing a web app with angularjs and have run into some problems with ng-view. I have configured the routes in app.js, but when I load the main page, the partials do not show up in the view.
Here is my index.html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="headerwrap" ng-controller="headerCtrl">
<span class="logo pull-left">{{appDetails.title}}</span>
<span class="tagline-pull">{{ appDetails.tagline}}</span>
<div class="nav-wrap pull left">
<ul class="nav nav-pills">
<li class="active">Books</li>
<li>Kart</li>
</ul>
</div>
</div>
<div ng-view></div>
</body>
</html>
Here is my app.js:
var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(function($routeProvider){
$routeProvider
.when("/books", {
templateURL: 'book-list.html',
controller: "BookListCtrl",
})
.when("/kart", {
templateURL: 'kart-list.html',
})
.otherwise({
redirectTo: '/books'
})
});
myApp.controller("headerCtrl", function($scope){
$scope.appDetails = {};
$scope.appDetails.title="Book Store";
$scope.appDetails.tagline="Browse our books";
});
myApp.controller("BookListCtrl", function($scope){
$scope.books = [
{
title:"Hunger Games",
price:205,
rating:5,
col:"red"
},
{
title:"Harry Potter",
price:255,
rating:4,
col:"blue"
}
];
});
Here is my first partial, book-list.html:
<div id="booklistwrapper">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<div>
<ul class="list-unstyled">
<li class="book" style="background: {{book.col}}" ng-repeat="book in books">
<div class="book-details clearfix">
<h3>{{book.title}}</h3>
<p>{{book.price}}</p>
<ul>
<li>{{'Rating: ' + book.rating}}</li>
</ul>
</div>
</li>
</ul>
</div>
Here is my second partial, kart-list.html:
<div>
This is the Kart
</div>
Neither partial will load. Does anyone know what this might be due to?
Thats because you have a typo, its
templateUrl
not
templateURL
http://plnkr.co/edit/3CPLZssLAAoxhLRV1NAZ?p=preview
I have a Shell state with two nested states Home and About. I wish to be able to open a Modal state from either Home or About without Home or About being refreshed or removed from the screen, as is the case now. How can I amend to get this working?
http://plnkr.co/edit/EWDN3mmd4Nw0ATITrep4?p=preview
<div class="container">
<div ui-view></div>
</div>
<script type="text/ng-template" id="/shell.html">
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
<li><a class="btn btn-default" ui-sref="shell.modal" data-toggle="modal" data-target="#modal">Open Modal</a></li>
</ul>
<div ui-view="main"></div>
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
</div>
<div class="modal-body">
<div ui-view="modal"></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="/home.html">
<h1>Home</h1>
<p>{{now}}</p>
</script>
<script type="text/ng-template" id="/about.html">
<h1>About</h1>
<p>{{now}}</p>
</script>
<script type="text/ng-template" id="/modal.html">
<h1>Modal content</h1>
<p>{{now}}</p>
</script>
<script>
var modalApp = angular.module('modalApp', ['ui.router']);
modalApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('shell', {
templateUrl: '/shell.html',
controller: function($scope){
$scope.now = Date.now();
}
})
.state('shell.home', {
url: '/home',
views: {
'main#shell': {
templateUrl: '/home.html',
controller: function($scope){
$scope.now = Date.now();
}
}
}
})
.state('shell.about', {
url: '/about',
views: {
'main#shell': {
templateUrl: '/about.html',
controller: function($scope){
$scope.now = Date.now();
}
}
}
})
.state('shell.modal', {
views: {
"modal#shell": {
templateUrl: '/modal.html',
controller: function($scope) {
$scope.now = Date.now();
}
}
}
});
});
</script>
(I do not want to use the $modal service from Angular UI as I have similar nested view requirements that are not using modals.)
I created this AngularJS routing app which allows me to have all pages not in separate .htm files but all on one page with the individual page content in ng-template script elements.
Although this works, the problem is that NetBeans and PHPStorm don't recognize HTML within a script tag and so do not format it properly.
How can I change this so that I can edit this one file nicely in an editor?
<html ng-app="mainApp">
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
a:focus {
outline: none;
}
</style>
</head>
<body ng-cloak ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">AngularJS Routing</div>
</div>
<div>
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</div>
</nav>
<div class="col-lg-12">
<div ng-view></div>
</div>
<script type="text/ng-template" id="/home.htm">
<div class="jumbotron">
<h1>Home</h1>
<p>{{subtitle}}</p>
</div>
</script>
<script type="text/ng-template" id="/about.htm">
<div class="jumbotron">
<h1>About</h1>
<p>{{subtitle}}</p>
</div>
</script>
<script type="text/ng-template" id="/contact.htm">
<div class="jumbotron">
<h1>Contact</h1>
<p>{{subtitle}}</p>
</div>
</script>
<script>
var mainApp = angular.module('mainApp', ['ngRoute']);
mainApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/home.htm',
controller: 'mainController'
})
.when('/about', {
templateUrl: '/about.htm',
controller: 'aboutController'
})
.when('/contact', {
templateUrl: '/contact.htm',
controller: 'contactController'
})
.otherwise({
redirectTo: '/'
});
});
mainApp.controller('mainController', function ($scope) {
$scope.subtitle = 'the home page';
$scope.message = '';
$scope.$on("$destroy", function () {
myData.message = $scope.message;
});
});
mainApp.controller('aboutController', function ($scope) {
$scope.subtitle = 'the about page';
});
mainApp.controller('contactController', function ($scope) {
$scope.subtitle = 'the contact page';
});
</script>
</body>
</html>
With PHPStorm I belive the feature is called "language injection".
You can read about how to set it up here.
I'm not sure about netbeans, it may not have the feature.