Angular Routing ngRoute fails to pull my other HTML files - javascript

So after reading here and there on MEAN, I decided to make my first MEAN application which is pretty small, all seems to work except the routeing to make my app a one-page app. Any help would be much appreciated!
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'authController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'authController'
});
});
Anyway, I adopted a boilerplate navigation bar
<nav class="navbar-fluid navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">IoT</a>
<p class="navbar-text">IoT</p>
<p class="navbar-right navbar-text" ng-hide="authenticated">Login or Register</p>
<p class="navbar-right navbar-text" ng-show="authenticated">Logout</p>
<p class="navbar-right navbar-text" ng-show="authenticated">Signed in as {{current_user}}</p>
</div>
</nav>
And, when I run it on localhost:3000, the homepage address I got instead is
http://localhost:3000/#!/
where I was expecting
http://localhost:3000/#/
And when I clicked on the 'register' link, the address I got is
http://localhost:3000/#!/#%2Fregister
where as I was expecting
http://localhost:3000/#/register
Is that normal? Maybe it's bcs of the version of Angular I was using?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-resource.min.js"></script>
It was all fine before, but then I stripped down the HTML and make the main page pull individual HTML pages one-by-one then this happened.

Change your links from <a href="#/login"> to <a href="#!/login">, <a href="#"> to <a href="#!"> etc..
I also have this issue but changing from a hash to hashbang resolves it for me.

Try this one. I'm not sure this will fix your issue. But please try this one.
Change your route provider by including default parameter.
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'authController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'authController'
})
.otherwise({
redirectTo: '/'
});
});
and provide the links like Login

Try this one:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'authController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'authController'
})
.otherwise({
redirectTo: '/'
});
});
For Sign Out, You should use such as:
<p class="navbar-right navbar-text" ng-show="authenticated">Logout</p>

App.config(['$routeProvider', '$locationProvider', function config($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('')
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller: 'loginController'
})
.otherwise('/');
}]);
will work see https://docs.angularjs.org/api/ng/provider/$locationProvider

Related

my angular routes have a '#%2F' before the actual URL I have defined in the app.js

I am setting up my angular routes in the app.js as so:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/characters', {
templateUrl: 'views/characters.html',
controller: 'AboutCtrl',
controllerAs: 'characters'
})
.when('/framedata', {
templateUrl: 'views/framedata.html',
controller: 'FrameDataCtrl',
controllerAs: 'frame'
})
.otherwise({
redirectTo: '/'
});
});
These URLs do work because when I type in localhost:9000/framedata or /characters it displays the view I expect. When I used the navigation bar that defines the links as expected there is a '#%2F' that is added like so: http://localhost:9000/#!/#%2Fcharacters
<ul class="nav navbar-nav">
<li class="active">tekkenMitzu?</li>
<li><a ng-href="#/characters">Characters</a></li>
<li><a ng-href="#/framedata">Frame Data</a></li>
</ul>
I hope this gives sufficient information, please let me know if I should give you some more information, if it is necessary I can upload this to a domain so you can see the 'live' version.
Try this below code
.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/characters', {
templateUrl: 'views/characters.html',
controller: 'AboutCtrl',
controllerAs: 'characters'
})
.when('/framedata', {
templateUrl: 'views/framedata.html',
controller: 'FrameDataCtrl',
controllerAs: 'frame'
})
.otherwise({
redirectTo: '/'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);// it will remove the #
});
And your URL having some white space if you remove the space then the %2F will clear
More details, please checkout it
AngularJS converting my ng-href url "slash" into "%2f"

AngularJS Angular-Route on Ubuntu changing routes /#/ -> /#!/ links not working

Project works fine locally.
However after deploying it to an AWS Ubuntu instance, the routing does not seem to be working.
The home page of, www.lewisengelart.com/#/ loads with a bang as, www.lewisengelart.com/#!/
and if you try a link, the browser attempts to load
www.lewisengelart.com/#!/#%2Fabout rather than
www.lewisengelart.com/#/about.
Once again, this project works fine locally, I cannot figure out what is tripping it up on the ubuntu instance.
Has anyone encountered this problem before?
Here is app.js, the route config
var app = angular.module("App", ['ngRoute', 'ngAnimate']);
app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
$httpProvider.interceptors.push(
function($q, $location) {
return {
'responseError':function(rejection){
if (rejection.status == 401){
$location.url('/letmein');
}
return $q.reject(rejection);
}
};
});
$routeProvider
.when('/',{
templateUrl: 'partials/dashboard.html'
})
.when('/text',{
templateUrl: 'partials/text.html',
controller: 'textCtrl'
})
.when('/magnet',{
templateUrl: 'partials/magnet.html',
// controller: 'magnetCtrl'
})
.when('/gauge',{
templateUrl: 'partials/gauge.html',
// controller: 'gaugeCtrl'
})
.when('/animation',{
templateUrl: 'partials/animation.html',
controller: 'animationCtrl as ACtrl'
})
.when('/about',{
templateUrl: 'partials/about.html',
})
.when('/contact',{
templateUrl: 'partials/Contact.html',
})
.when('/letmein',{
templateUrl: 'partials/loginReg.html',
controller: 'adminCtrl'
})
.when('/add',{
templateUrl: 'partials/add.html',
controller: 'workCtrl'
})
.otherwise({
redirectTo: '/'
});
}])
And the home page partial with links
<div class="indexHeader col-md-3">
<h1>Lewis Engel</h1>
<div class="worksBox">
<a ng-href="/#/about"><span class="colorFive">About</span></a>
<span class="colorSix">Contact</span>
<span class="colorOne">Emergent Possibilities</span>
<span class="colorTwo">Emergence over Time</span>
<span class="colorThree">Magnetic Attractions</span>
<span class="colorFour">Meaningless Measures</span>
</div>
Per angular documentation.
docs.angularjs.org/guide/migration#commit-aa077e8.
Have to add
$locationProvider
and
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
to override a new protocol in the updated version of Angular.

How to initialize default route in angular?

So I'm trying to use angular routing in my application. The problem is that the route "/" does not get initialized automatically. So I first go to "/" and the main content of the page is empty (the template is not loaded at all), I click the link to /settings and settings are loaded, then I click a link to "/" and this time the template is initialized correctly. So how do I make the thing initialized at the beginning?
Here's my routing configuration:
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/profile', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/settings', {
templateUrl: '/settings.html',
controller: 'SettingsController'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
I tried calling $location.url("/profile") from a controller and it did help, but the url has to be changed and I would rather keep the "/"
use otherwise({ redirectTo: "/" })
Update : here how it should be
$routeProvider
.when('/', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/profile', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/settings', {
templateUrl: '/settings.html',
controller: 'SettingsController'
}).otherwise({ redirectTo: '/' });

AngularJS $locationProvider.html5Mode(true) gives error `url is undefined`

I am trying to use html5Mode for urls in AngularJS.
This code runs fine:
.config(["$routeProvider", "$locationProvider",
function($routeProvider, $locationProvider){
$routeProvider.when("/editor", {
templateUrl: "pages/editor/index.html"
})
.when("/docs", {
templateUrl: "pages/docs/index.html"
}).otherwise({
templateUrl: "pages/home/index.html"
});
}
]);
But this code gives me the error url is undefined
.config(["$routeProvider", "$locationProvider",
function($routeProvider, $locationProvider){
$routeProvider.when("/editor", {
templateUrl: "pages/editor/index.html"
})
.when("/docs", {
templateUrl: "pages/docs/index.html"
}).otherwise({
templateUrl: "pages/home/index.html"
});
$locationProvider.html5Mode(true);
}
]);
Could the issue be that I have instead of
What could be the source of this?
I just had the same problem and I just figured out how to solve this. Well my errors were:
I hadn't injected "$locationProvider" I was trying to call the "html5Mode" without referencing the "$locationProvider" at the begining of the function, now I have this:
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when("/", {
templateUrl: "Views/home/home.html",
controller: "HomeController"
})
.otherwise({ redirectTo: '/'});
$locationProvider.html5Mode(true);}]);
I had the wrong, I had: " href="/" "
but I'm running all the app with a local server with Wampp so the base path for my project is "/NAME_OF_THE_PROJECT/" like this:
<base href="/SEQUOIA/">
With this two corrections I solved all the errors, as I see, you have your base without the last '/', maybe your app is searching "www.localhost.com/staticCONTENT" instead of ".../static/CONTENT".
Ah! I almost forget, I have my .htaccess just the same as shown here and here

Angular-Route and the ng-view div hide the page

I'm trying to use angular-route, but when I change the div tag from <div ng-include="'views/main.html'" ng-controller="MainCtrl"></div> to <div ng-view></div> that tag is suddenly empty.
The app.js code I have is:
angular .module('testApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateURL:'views/main.html',
controller: 'MainCtrl'
})
.when('/adoption', {
templateURL: 'views/foo.html',
controller: 'fooCtrl'
})
.otherwise({
redirectTo: '/'
});
});
and the html pages and controllers are made, but pretty much empty, save some placeholder stuff.
I'm not 100% sure how I'm supposed to include the angular-route code, but what I have seems to be working.
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
you app.js should be like this:
angular .module('testApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/main', {
templateURL:'views/main.html',
controller: 'MainCtrl'
})
.when('/adoption', {
templateURL: 'views/foo.html',
controller: 'fooCtrl'
})
.otherwise({
redirectTo: '/main'
});
});

Categories

Resources