I've been looking at ways to remove the # from the URLS within AngularJS and found many solutions which pointed me in the direction to use what they had suggested now Inside my app.js I have the following:
var app = angular.module('mainApp', ['ngRoute', "oc.lazyLoad"]);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home',
{
templateUrl: '/Templates/Home/home.html',
})
.when('/About',
{
templateUrl: '/Templates/About/About.html'
})
.when('/home/:page_number',
{
templateUrl: '/Templates/Params/params.html',
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load('Templates/Params/paramsController.js');
}]
}
})
.otherwise('/home',
{
templateUrl: '/Templates/Home/home.html'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
Inside the head of my SiteMaster.Html I've placed
<base href="/">
Full breakdown:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/app.js"></script> <!-- Consists of Routing -->
<script src="Scripts/ocLazyLoad.js"></script>
<title>Angular Routing Tutorial</title>
<base href="/">
</head>
<body ng-app="mainApp">
<h1>sitemaster Template</h1>
<div ng-view></div>
</body>
</html>
Yet when I run this I get directed to /home when I manipulate the URL to be /About I get
HTTP Error 404.0 - Not Found
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
And the same for /home/SomeValue
Yet when I remove
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
And remove base href="/" from my SiteMaster.Html the routes work as expected?
Can someone explain to me why this behavior would be happening?
Related
My folder structure is:
-ngTest
--Scripts(all js files)
--index.html
--main.js
--partialView.html
index.html code is as follows:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<meta charset="utf-8" />
</head>
<body>
<p>Hello world</p>
<div ng-view></div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js is :
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
})
}).controller('newCtrl', function () {
console.log('finally');
});
partialView.html:
<div>
<p> From view</p>
</div>
What am I missing in this code?
If you want to load partialView.html as default you have to route to "/", not to "/home".
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
})
}).controller('newCtrl', function () {
console.log('finally');
});
"/html" will be accessed if you link to it in your html file, for example with:
<a href=#/html>Link<a>
Your code looks good but missing something:
You need an anchor that make you go to /home, you can add it in the index file as follow:
Red
Then click the home anchor to make your partial view appear.
Or
In the router configuration modify the home to make it only "/", so the code will be as the following:
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
}).controller('newCtrl', function () {
console.log('finally');});
One last thing, if you're using angular latest 1.6.0, you have to add the following code:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');}]);
I have a problem with the AngularJS routing: I don't get any feedback of the page. No errors or view-switches.
I checked my implementation of the module, but it's declared in the right way. Then I searched for typos such as templateURL, but I didn't find any. I also tried to use ng-href instead of href in the list, but then the links weren't clickable anymore.
Here is my plunker.
And my code:
Created my navigation:
<body ng-app="Productportfolio">
<ul>
<li>
Home
</li>
<li>
<a href='#/privat'>Log in</a>
</li>
</ul>
<ng-view></ng-view>
<!--own js -->
<script src="app.js"></script>
<!--Controller -->
<script src="ProductCtrl.js"></script>
<!--Services -->
<!--Direktives-->
</body>
Made the templates:
//home.html
<div>
<h1> Home </h1>
</div>
//private.html
<div>
<h1> Private</h1>
</div>
Declared a Angular module:
angular.module('Productportfolio', ['ngRoute'])
Added the $routeProvider to my config:
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider, $locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
$locationProvider.hashPrefix('!');
}]);
In your Plunker, there were some issues related to imports. To make it easy, I simply removed both jQuery and Bootstrap. I also put all your modules in a single app.js file.
There were some errors in your html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<!--AngularJS-->
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
</head>
<body ng-app="Productportfolio">
<ul>
<li>
<a ng-href="#home">Home</a>
</li>
<li>
<a ng-href="#private">Private</a>
</li>
</ul>
<ng-view></ng-view>
<!--own js -->
<script src="app.js"></script>
</body>
</html>
Import Angular BEFORE ngRoute or any other module
Use ng-href='#routeName' or, otherwise
And in your js:
var myApp = angular.module('Productportfolio', ['ngRoute']);
myApp.controller('ProductCtrl', ['$scope',function ($scope) {
var vm = this;
}]);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
}]);
You need to inject only external modules in your app module, not all controller, services etc
Notice that, to make it easy, I removed also your Service since you did not share it and it was useful.
Last but not least, if you want to use $locationProvider.hashPrefix('!'); to use hashbangs, you need to add <base href="/" /> at the end of your head.
For some reason, plunker does not allow me to do that, but I'm sure you'll get it to work on your version.
Here You can find the working plunker reproducing your application.
Hope I've been helpful.
The remaining and not visible problem is here :
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider, $locationProvider',
config() function of module object takes as parameter, a array of strings and not a string with "," as separator char inside it.
See example and doc here :
https://docs.angularjs.org/guide/providers#provider-recipe
So, it should be :
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider', '$locationProvider',
Update :
But in fact, in your case, it works even without precising the array :
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(
I updated the plunker and the app.js with both versions. I have the impression that the array is not mandatory (any longer). So, it seems better to ignore that parameter, especially, if with bad value, it may create side-effects.
Here the plunker with corrections (ordered lib, typos and config function called) :
http://plnkr.co/edit/NTn6Zmav5RX4V8zgHPOG?p=preview
I have removed $locationProvider.hashPrefix('!') as not suitable for the url you are using. See #AndreaM16 answer for that.
Besides, you have not declared your service you want to use in your controller.
app.js
angular.module('Productportfolio', ['ngRoute'])
.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
}]
);
or app.js without the array parameter in config function :
angular.module('Productportfolio', ['ngRoute'])
.config(
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
// $locationProvider.hashPrefix('!');
}
);
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<!--Bootstrap-->
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<link data-require="bootstrap#*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<!--AngularJS-->
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<!--own js -->
<script src="app.js"></script>
<!--Controller -->
<script src="ProductCtrl.js"></script>
<!--Services -->
<!--Direktives-->
</head>
<body ng-app="Productportfolio">
<ul>
<li>
Home
</li>
<li>
Log in
</li>
</ul>
<div ng-view></div>
</body>
</html>
The order of loading java script files is very important. Load in the following order:
<link data-require="bootstrap#*" data-semver="4.0.0-alpha.2" rel="stylesheet"
href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="jquery#*" data-semver="3.0.0"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<script data-require="bootstrap#*" data-semver="4.0.0-alpha.2"
src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<!--AngularJS-->
<script data-require="angularjs#1.5.8" data-semver="1.5.8"
src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.5.8"
src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
It means that you are loading Bootstrap.js files, but Bootstrap cannot work without jQuery library. So it means you should load jQuery at first, then Bootstrap.js. And other libraries should be reordered(I've shown in an example above).
In addition, you can use Console in your browser to see whether there are errors and what errors you have.
I got into a problem in routing that I can't remove # in the url. I have tried all the solutions like using $locationProvider by setting $locationProvider.html5Mode(true).href="/" is not working for me as its taking the directory wrong and all files are missing, so I have used href="./"
But an error keeps coming like Cannot read property 'html5Mode' of undefined
kindly provide me a solution.
Here's my snippet
var angularMFRP = angular.module('angularMFRP',['ngRoute','angularUtils.directives.dirPagination']);
angularMFRP.config(['$routeProvider','$locationProvider', function($routeProvider, $rootScope,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/partials/home.html',
controller: 'home'
})
.when('/restaurants', {
resolve: {
"check": function($location, $rootScope, $window) {
if (!$rootScope.navigates) {
$window.alert("please select City");
$location.path('/');
}
}
},
templateUrl: 'app/partials/restaurants.html',
controller: 'restaurant'
})
.otherwise({
redirectTo: '/'
});
if(window.history && window.history.pushState){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
}]);
<!DOCTYPE html>
<html lang="en" ng-app="angularMFRP">
<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 ng-bind="title"></title>
<base href="./">
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- include library script files here -->
<script src="assets/library/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="assets/library/bootstrap.js"></script>
<script src="assets/library/dirPagination.js"></script>
</head>
But an errors keeps showing like
Error: $injector:modulerr
Module Error
Failed to instantiate module angularMFRP due to:
TypeError: Cannot read property 'html5Mode' of undefined
Also I have used this statement alone too $locationProvider.html5Mode(true) as suggested in all sites,but its not working the error keep coming.Kindly suggest me some solution
Try this by replacing this line near, in your code :
angularMFRP.config(['$routeProvider','$rootScope','$locationProvider', function($routeProvider, $rootScope,$locationProvider) {
var angularMFRP = angular.module('angularMFRP', ['ngRoute', 'angularUtils.directives.dirPagination']);
angularMFRP.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/partials/home.html',
controller: 'home'
})
.when('/restaurants', {
resolve: {
"check": function($location, $rootScope, $window) {
if (!$rootScope.navigates) {
$window.alert("please select City");
$location.path('/');
}
}
},
templateUrl: 'app/partials/restaurants.html',
controller: 'restaurant'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
]);
I'm not sure how can I implement proper Angular routing in web api application. I'm able to open the pages using this approach: http://localhost:52876/HTML/app/borrower.html
The Angular controller loads fine and all functionality is there from the angular side.
Now, I want to be able to open the views in a bit better view, using ng-route, so for example http://localhost:52876/HTML/app/borrower.html will become http://localhost:52876/borrower.
I included the ng-route.js file in the html files which I'm using in my angular app.
Also in app.js I have this:
'use strict';
var modules = [
'app.controllers',
'LoanAdminApplicationController',
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.router',
'LocalStorageModule',
'angular-loading-bar'
];
var app = angular.module('app', modules);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when("/home", {
controller: "homeController",
templateUrl: "/app/views/home.html"
});
$routeProvider.when("/login", {
controller: "loginController",
templateUrl: "/HTML/login.html"
});
$routeProvider.when("/signup", {
controller: "signupController",
templateUrl: "/app/views/signup.html"
});
$routeProvider.when("/register", {
controller: "signupController",
templateUrl: "/app/views/register.html"
});
$routeProvider.when("/refresh", {
controller: "refreshController",
templateUrl: "/app/views/refresh.html"
});
$routeProvider.when("/tokens", {
controller: "tokensManagerController",
templateUrl: "/app/views/tokens.html"
});
$routeProvider.when("/borrower", {
controller: "borrowerController",
templateUrl: "/HTML/app/borrower.html"
});
$routeProvider.otherwise({ redirectTo: "/home" });
});
The html markup (I removed the content):
<!DOCTYPE html>
<html ng-app="app">
<head>
</head>
<body ng-controller="BorrowerQuickQuoteApplication">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/modernizr.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-cookies.min.js"></script>
<script src="/Scripts/angular-resource.min.js"></script>
<script src="/Scripts/angular-sanitize.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/Scripts/angular-ui-router.min.js"></script>
<script src="/Angular/controllers.js"></script>
<script src="/Angular/LoanApplicationController.js"></script>
<script src="/Angular/services.js"></script>
<script src="/Scripts/angular-local-storage.min.js"></script>
<script src="/Scripts/loading-bar.min.js"></script>
<script src="/Angular/app.js"></script>
</body>
</html>
Any idea what I need to do in order to make this working?
Should I modify the RouteConfig.cs file or I need to do anything else as well?
You don't navigate with the file name as you are doing that's angular route job to do for example
$routeProvider.when("/borrower", {
controller: "borrowerController",
templateUrl: "/HTML/app/borrower.html"
});
when you go to localhost:8080/yourapp/borrower
and you need ng-view in your index.html
Like this
<div ng-view></div>
your pages will be shown here.
router will look that you are requesting for the borrower and it will take you to the /HTML/app/borrower.html
You are using html five mode that means you need server side routing to so it can fall to index.html every time so your url can be without hash.
Since upgrading from Angular 1.3.0 RC-2 to RC-3 the hash-sign in my links generated by ui-sref has disappeared. The link is clickable and the state transfers happens correctly, but if i copy the link address and paste it in a browser it will land on the wrong page. I dont want to use HTML5Mode.
1.3.0-rc.2
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>
<script>
angular.module('myApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/foo');
$stateProvider.state('foo', {
url: '/foo',
template: 'This is foo <a ui-sref="foo.bar">Go to bar</a><div ui-view></div>'
})
.state('foo.bar', {
url: '/bar',
template: 'This is bar'
})
$locationProvider.html5Mode(false);
//$locationProvider.html5Mode({ enabled: false })
});
</script>
</body>
</html>
Plunkr demonstrating working example
1.3.0-rc.4
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
<script src="https://code.angularjs.org/1.3.0-rc.4/angular.js"></script>
<script src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>
<script>
angular.module('myApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/foo');
$stateProvider.state('foo', {
url: '/foo',
template: 'This is foo <a ui-sref="foo.bar">Go to bar</a><div ui-view></div>'
})
.state('foo.bar', {
url: '/bar',
template: 'This is bar'
})
//$locationProvider.html5Mode(false);
$locationProvider.html5Mode({ enabled: false })
});
</script>
</body>
</html>
Plunkr demonstrating the problem
Am i doing something wrong, or is ui-router not compatible with the latest release candidate of Angular?
That's a known issue. It's fixed in master.
https://github.com/angular-ui/ui-router/issues/1397
Angular 1.3 changed the HTML5 mode API, and UI-Router has to support either API.