I have followed the instructions from https://github.com/angular-ui/ui-router/wiki/URL-Routing
but cannot get this to work properly.
I have the following:
var application = angular.module('application', ['ui.router']);
application.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/test");
$stateProvider
.state('index', {
url: "/test/:param",
templateUrl: "App/Test.html",
controller: function ($scope, $stateParams) {
alert($stateParams.param);
}
});
$locationProvider.html5Mode(true);
});
Without the /:param this works as you would expect - i.e. the ui-view is correctly populated with Test.html. However, whenever I put the /:param in I get an error. The error is:
GET http://localhost:3880/test/App/Test.html 404 (Not Found)
App is the route of my angular stuff and Test.html should have a path of
http://localhost:3880/App/Test.html
which it does if not trying /:param. However, when trying /:param you can see that there is an extra /test/ in the path before /App.
Please someone help, as I would like to consume the parameter in the controller once it is correct.
You URL for this route should be like this : http://localhost:3880/test/app Where app is param.
Use absolute path for templateUrl. relative url wont work.
templateUrl: "/path/to/App/Test.html",
Related
In my angular app all the URLs are like this:
testsite.com/#/standard-page
And I would like them to be like:
testsite.com/standard-page
I have read about adding the html5mode to my config, I now have this:
angular.module('myApp').config(['$stateProvider', '$urlRouterProvider', '$locationProvider', config]);
function config($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('index', {
url: '/',
templateUrl: siteInfo.templateRoot + '/startPage.html',
})
.state('standard-page', {
resolve: {
standardPageData: getStandardPageData
},
url: '/standard-page',
templateUrl: siteInfo.templateRoot + '/standardPage.html',
controller: 'StandardPageController',
controllerAs: 'StandardPageCtrl'
});
};
and I added <base href="/"> to the head of my head, but it does not work completely as expected yet.
When I go to testsite.com/#/standard-page in my browser it loads the page, then it modifies the URL to testsite.com/standard-pagein the address bar. However, if I type in directly ``testsite.com/standard-page`, it gives me a 404.
So I'm almost there, just not quite yet. Any ideas what I might have forgotten to do here?
Angular can't do all the job. When you write testsite.com/standard-page, your server must handle the request and respond correctly. Your server respond 404 so your browser can't display anything.
This is driving me crazy.
I have a HREF within one of my pages
Click me ## ;)
Which works fine on chrome but not within PhoneGap on android.
I have searched around and cannot find a solution any where.
State provider config for EventAdd shown below.
app.config(function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/home");
//
// Now set up the states
$stateProvider
.state('EventAdd', {
url: "/EventAdd",
templateUrl: "views/eventAdd.html",
controller: 'EventaddCtrl'
});
});
It displays no errors and just doesn't navigate off the screen.
any tips?
Try <a ui-sref="EventAdd">Click me ## ;)</a> instead. Without a Plunker, i'm not sure what the issue is.
Update:
Another alternative.
View:
<a ng-click="goToEventAdd()">Click me ## ;)</a>
Controller:
$scope.goToEventAdd = function(){
//Don't forget to inject the $state service
$state.go("EventAdd");
}
I'm struggling a bit with having submodules in an Angular 1.3.9 app. I've got a (non-working, sorry) preview at http://plnkr.co/edit/XBfTPAGRRe0CWJgjGJzc?p=preview and I think it's freaking out, in part, because I'm using Restangular.
I have the following:
angular
.module('estimate', ['ui.router', 'restangular', 'estimate.project'])
;
angular
.module('estimate.project', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider'
, function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('project', {
url: "/project/{id:int}",
abstract: true,
templateUrl: '/app/templates/project.html',
controller: "ProjectController as project",
resolve: { // stuff }
})
.state('project.overview', {
url: "",
templateUrl: "/app/templates/overview.html"
})
// ...
;
}])
.controller('ProjectController', ['$scope', 'ProjectService', 'myProject'
, function($scope, ProjectService, myProject) {
console.log('i made it!');
}]);
And in my template, which is served from the estimate module, I have:
<li><a ui-sref="project.overview({ id: 1 })">One</a></li>
The URL resolves correctly on the page, but clicking on it does nothing. It doesn't even throw any console errors - it just sits there. My gut tells me it has to do with how I'm referring to the controllers and/or the routes, and if they need to be prefixed or modified to work with a submodule. Any ideas on how to get it to load properly?
If this post is too scatterbrained, let me know and I'll try to clean it up.
I updated your plunker here and would say, that the most important change is - referencing sub-module in the main module:
Instead of this:
angular
.module('estimate', ['ui.router', 'restangular'])
...
angular
.module('estimate.project', ['ui.router'])
...
We have to use this, i.e. reference sub module in a parent module
angular
.module('estimate', ['ui.router', 'restangular', 'estimate.project'])
...
angular
.module('estimate.project', ['ui.router'])
...
With some few other small adjustments, that should be the way. Check it working here
I'm very new to Angular and I'm currently building a few test/dummy apps to get my head around the way it works and become more-familiar with SPA's in Angular. However, I've stumbled into an issue when I start adding routes to my application and loading the content via ng-view
$locationProvider doesn't seem to be working correctly because if I go to localhost/sdfsdf then I get cannot GET /sdfsdf when in reality the page should be redirecting to /cocktails.
routes.js
var cocktailApp = angular.module('cocktailApp', ['ngRoute', 'cocktailControllers']);
cocktailApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/cocktails', {
templateUrl: '/partials/cocktail-list.html',
controller: 'cocktailsController'
})
.otherwise({
redirectTo: '/cocktails'
});
$locationProvider.html5mode(true);
}]);
Angular only recognizes anchor URL syntax for URLs pasted directly on the browser. So you have to you try http://localhost/#/sdfsdf instead to make your routing work. Please note that anchor syntax /# was added in previous URL.
I have my backend web framework loading my AngularJS app with following URL
http://localhost/New/Alpha/App
I also have it set up so that anything after App will still load the same thing
http://localhost/New/Alpha/App/home
http://localhost/New/Alpha/App/settings
...
I'm trying to make my AngularJS app to work in the way that it would pick up the bit of URL after App and load a controller/template accordingly. I have a problem with routing in my AngularJS app though
var main = angular.module("main", ["ui.bootstrap", "ngRoute"]);
main.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("home", {
templateUrl: "assets/tpl/home.html",
controller: "mainController"
})
.otherwise({
redirectTo: "fail"
});
$locationProvider.html5Mode(true);
});
main.controller("mainController", function($scope) {
console.log("home")
});
If I try this URL
http://localhost/New/Alpha/App/home
it changes the URL to
http://localhost/fail
instead of leaving the URL as it is and loading the template/controller. If however I change the config and give it a full relative URL it does work as supposed to
.when("/New/Alpha/App/home", {
templateUrl: "assets/tpl/home.html",
controller: "mainController"
})
My problem is, that the part of URL before App - /New/Alpha cannot be hardcoded in. It could be /New/Beta, /New/Gamma, etc.
Is what I want to do possible at all without hardcoding the full relative URL match?
UPDATE Sorry, forgot to mention that the number of URL segments before App can change, as in it could be /New/Beta/App and it also could be /New/Another/Beta/App. I don't suppose something like */App or /New/*/App is possible instead of /New/:placeholder/App?
Will this work for you?
var main = angular.module("main", ["ui.bootstrap", "ngRoute"]);
main.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/New/:greek/App/home", {
templateUrl: "assets/tpl/home.html",
controller: "mainController"
})
.otherwise({
redirectTo: "fail"
});
$locationProvider.html5Mode(true);
});
main.controller("mainController", function($scope) {
console.log("home")
});
You could then retrieve the greek with $routeParams.greek from within your controller.
The general solution to this problem is to have the server pass the app URL to your client-side code. In other words, use server-side code to dynamically write the equivalent of the following on the page:
var appUrl = '/New/Alpha/App';
Then setting up the route provider becomes:
main.config(function($routeProvider, $locationProvider) {
$routeProvider
.when(appUrl + "/home", {
templateUrl: "/assets/tpl/home.html",
controller: "mainController"
})
.otherwise({
redirectTo: appUrl + "/fail"
});
$locationProvider.html5Mode(true);
});
That way the knowledge of the application base URL lives in one place — server-side (which makes sense as only the server is in a position to truly know, if you think about it).
In your specific case, if the application base URL is implicit in the URL structure, you could calculate the following client-side:
var appUrl = window.location.pathname.match(/^\/New\/.*\/App/);
Needs work, but you get the idea. Then you can set up the route provider exactly as above.