Drew1208 Drew1208 - 4 months ago 15
AngularJS Question

routeProvider not redirecting pages

I have tried this several different way and I will all the different ways I have attempting to redirect to a different page but getting a 404 error for all of them.

index.html

This page is fine and the root is rendering:

<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<div ng-view></div>

<div>Angular seed app: v<span app-version></span></div>

<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="controllers/app.controller.js"></script>
<script src="app.config.js"></script>
</body>
</html>


app.config

app.config(['$routeProvider', function($routeProvider) {

$routeProvider.when('/',{
templateUrl: 'views/templates/home.tpl.html', //page is rendering
controller: 'HomeController'
})
.when('/userForm',{
templateUrl: 'views/templates/userForm.html', //NOT rendering
controller: 'FormController'
})
.otherwise({redirectTo: '/'});

}]);


app.controller.js

app.controller('HomeController',['$scope', 'ROOT', function($scope, ROOT){

$scope.Root = ROOT;

console.log("Inside the home controller");

$scope.menu = {
items:[
{
link: ROOT+'/userForm',
name: 'Contact Form'
}
]
}

}]);

app.controller('FormController',['$scope', function($scope){

console.log("You are inside the form controller");

}]);


Attempting to redirect to userForm.html with a button, a href and a link from the controller. All giving me a 404 error.

<div>
<a class="navbar-brand" ng-href="{{ Root }}">Menu</a>

<button type="button" onclick="window.location.href='/userForm.html'">Next page</button>
<a ng-href="/userForm.html">Click here to go to the next page...</a>

<ul class="nav navbar-nav navbar-right">

<li ng-repeat="item in menu.items" class="dropdown" dropdown on-toggle="toggled(open)">

<a ng-href="{{ item.link }}">{{ item.name }}</a>

</li>
</ul>
</div>


app.js

// Declare app level module which depends on views, and components
var app = angular.module('myApp', [
'ngRoute',
'myApp.version'
]);

app.constant('ROOT','/RedirectedControllerDemo/app/views/templates');


File structure:
File Structure

Answer

I'll move my comment to an answer (which was the first response here), but due to routing in AngluarJS, the routing component does not need the URL to contain name of the file: userFomr.html, but the route instead www.url.com/userForm

Your href should look like this:

 <a href="#/userForm">

But if you wish to remove the #, you can set your app up to use HTML5 mode:

https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag

Comments