I have the following code in my app.js:
var myApp = angular.module('myApp', ['ngRoute'])
myApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).
otherwise({
templateUrl: '/angularjs/public/angular/views/home.html'
});
$locationProvider.html5Mode(true);
}]);
When I go to home at http://localhost/angularjs/public, the .otherwise kicks in correctly.
If I go to http://localhost/angularjs/public/products, nothing happens, or more precisely, I believe .otherwise is invoked again, since is displayed the home.html view. Also no error is throwed in batarang's console.
What could be the problem?
you need to add "public" to product slug in your route
when('public/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).
Related
I have a site with multiple angularjs app inside. The structure is the following :
index.html
js
js_controller.js
js_directives.js
js_filters.js
js_routes.js
js_home.js
sub_app
index.html
js
subapp_controller.js
subapp_directives.js
subapp_filters.js
subapp_routes.js
subapp_home.js
On the first app I added the following in js_routes.js :
angular.module('jsroutes.routes', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'templates/mytemplates.html'});
$routeProvider.otherwise({redirectTo: '/'});
}])
No problem with this. It works well.
The problem concern my subapp. I added the following in subapp_routes.js :
angular.module('subapproutes.routes', ['ngRoute'])
.config(['$routeProvider','$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.when('/subapp', {templateUrl: '/subapp/templates/mytemplate.html', controller: 'myCtrl'});
$routeProvider.when('/subapp/:id', {templateUrl: '/subapp/templates/mysecond.html', controller: 'myCtrl'});
$routeProvider.otherwise({redirectTo: '/subapp'});
}])
The problem is : if the url is /subapp works, /subapp/1 not work for example. It returns to home with templates/mytemplates.html
I don't know why.
If someone can help me.
Thanks in advance
I managed to remove the hash # from my urls by setting locationProvider.html5Mode to true, but another issue arose. Nothing displays, and on my console it gives me a 404 error.
I am well aware that this question has been asked several times, but I have tried all those solutions without success. Kindly assist.
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'home.html',
//controller:'homecontroller'
})
.when('/home', {
templateUrl: 'home.html',
//controller:'homecontroller'
})
.when('/best-prices-buy-phones-in-kenya', {
templateUrl: 'pages/buy-phones.html',
//controller:'aboutcontroller'
})
.when('/best-prices-buy-phones-in-kenya2', {
templateUrl: 'pages/buy-phones-htc.html',
//controller:'servicecontroller'
})
.when('/contact_us', {
templateUrl: 'contact-page.html',
//controller:'contactcontroller'
});
}]);
In Index.html, you no longer need '#' as ' $locationProvider.html5Mode(true);' takes care of this. so the href on your links should simply be just a '/' plus the page you require, e.g.
<a href='/home'>
or
<a href='/best-prices-buy-phones-in-kenya'>
For some reason my ngRoute dosent work properly? I dont know but it dosent show any error on the console either. Here is my Cloud9 File. And here is my script.js:
var app = angular.module('ChattApp', ["firebase", "ngRoute"])
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'HtmlFiles/login.html',
controller: 'LoginController'
})
.when('/Register', {
templateUrl: 'HtmlFiles/registration.html',
controller: 'RegistrationController'
})
.otherwise({
redirectTo: '/'
});
});
app.factory("Auth", ["$firebaseAuth",
function($firebaseAuth) {
var ref = new Firebase("https://uniquecoders.firebaseio.com/");
return $firebaseAuth(ref);
}
]);
It looks like you're not injecting the $routeProvider into the config function.
Take a look at the tutorial for the $routeProvider here or take not of the screenshot below.
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
I am using AngularJs with Ruby on Rails.
I set the html5 option to true in angular: $locationProvider.html5Mode(true)
But now when I try to navigate through pages in my application, it will only change the URL in my browsers URL bar. But the page it self will nto change unless I reload the page. Only then will it go to the page specified.
This is how my Angular routing looks like:
#test.config(['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
# Route for '/'
$routeProvider.when('/', { templateUrl: '../../views/visitors/index.html.erb', controller: 'VisitorsCtrl' } )
$routeProvider.when('/users', { templateUrl: '../../views/users/index.html.erb', controller: 'UsersCtrl' } )
# Default
$routeProvider.otherwise( { redirectTo: "/" } )
$locationProvider.html5Mode(true)
])
On the root page I have a element: <h2><a ng-click="viewUsers()">Users</a></h2>
And viewUsers() is called here:
#test.controller 'VisitorsCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.viewUsers = ->
$location.path('/users')
console.log("Redirected")
]
What could be needed more to get this kind of routing to work?
New angular route:
Test.config ($routeProvider, $locationProvider) ->
$routeProvider
.when '/',
templateUrl: '../../views/visitors/index.html.erb',
controller: 'VisitorsCtrl'
.when '/users',
templateUrl: '../../views/users/index.html.erb',
controller: 'UsersCtrl'
try to use following instead:
$window.location.href = '/users'