So having an issue with AngularUI Router. The problem I'm having is it's unable to access any states via entering the URL or refreshing while on a state other than home. The returned error is Cannot GET /state-name however the ui-sref="state-name" works perfectly fine.
Not using a Node server or Express routing, just Angular and running web server using Gulp-Connect.
Technology:
AngularJS 1.5.3
Angular UI 0.2.18
Gulp 3.9.1
Routes.js
angular.module('myApp').config(function(
$httpProvider,
$stateProvider,
$locationProvider,
$urlRouterProvider
){
$locationProvider.html5Mode({enabled: true, requireBase: false});
$stateProvider
.state('home',{
url:'/',
templateUrl: 'path/to/home.tmpl.html'
})
.state('state-name',{
url:'/state-name',
templateUrl: 'path/to/state-name.tmpl.html'
});
$urlRouterProvider.otherwise('/');
});
Is there something I'm missing to allow for refreshing on a state or navigating via URL?
You should have a state called state-name to be able to access it. From your state providers, I can't see any state with this name state-name. Currently your available states are home and route_1.
To access 'state-name', you need to add this state:
.state('state-name',{
url:'/state-name',
templateUrl: 'path/to/state-name.tmpl.html'
})
For accessing the URL directly, using the state's name, you need to use the bang notation. For example:
For home: http://localhost/#!home
For state-name: http://localhost/#!state-name
Of course, substitute http://localhost by your host + context + whatever you need.
Related
I'm developing an application on angularjs. I tried to remove "index.html#/" from url and used
$locationProvider.html5Mode(true);
in my route.js file (full code snippet provided below). Now my main problem to remove "#" from url is resolved but a new bug arise i.e. now when I'm on a view i.e. localhost:2124/Bill-Paymentand press CTRL + F5 my application redirects me to 404 / default route which I set in route.js file. Now what I want is "when I refresh my view I land on same view/page not on default".
angular.module('app.routes', [])
.config(function ($locationProvider,$stateProvider, $urlRouterProvider, $uiViewScrollProvider) {
// MAIN ROUTE
$stateProvider
// START PAGE ROUTE END
// LOGIN PAGE ROUTE START
.state('login', {
url: '/Bill-Payment',
templateUrl: 'templates/login/login.html',
controller: 'loginController'
})
// NEW MAIN ROUTE END
$uiViewScrollProvider.useAnchorScroll();
// $locationProvider.html5Mode(true).hashPrefix('!');
// OTHERWISE ROUTE
$urlRouterProvider.otherwise("/Index");
});
Any help would be appreciated.
Are these all your routes? There's no /Bill-Payment route here. which means it will go to /Index as specified by your .otherwise route
I have an angularjs application. The app is supposed to be a hybrid mobile app for android and iOS. I have a JavaScript file in the project which is not a part of any module. In that JavaScript file I need to call the respective template URL, either through $state or any method which loads the controller also.
For $scope I found many ways of accessing it outside that angularjs project but could not find the same for $state.
we can use java-script
window.location.href //to change location
for example:
suppose right now I am in https://www.google.co.in/
now i want to navigate to https://news.google.co.in/
we can simply write
window.location.href ="https://news.google.co.in/"
it will navigate to that page
Now in your project you might have defined your routing like this
function routeConfig($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('landing.home', {
url: '/home',
templateUrl: "app/components/homeFolder/home.html",
controller: 'homeController',
controllerAs: 'homec'
})
.state('landing.hometwo', {
url: '/home1',
templateUrl: "app/components/OnHand/Templates/OnHandhome.html",
controller: 'OnHandController',
controllerAs: 'Onhand'
})
})
Now if you are in angularjs controller you will simply use
$state.go('landing.home');// to navigate to your required location
But if you are not in angularjs Module you can change window.location to navigate to required page
for example to achieve ---$state.go('landing.home'); you can write
window.location.href ="https:complete url"
or otherwise
window.location.hash ="#/home1" //the url which is defined for that state
I want to implement a pagination function using AngularJS. Then I'm trying to achieve it by using same state transition and adding 'same name' query parameter.
app.config ["$locationProvider", "$stateProvider", "$urlRouterProvider", ($locationProvider, $stateProvider, $urlRouterProvider) ->
$locationProvider.html5Mode true
$urlRouterProvider.otherwise '/'
$stateProvider
.state 'shops',
url: "/shops?page"
controller: "shopsController"
templateUrl: "shops.html"
.state 'shops.shop_detail',
url : "/:shop_id"
controller: "shopDetailController"
templateUrl: "shop_detail.html"
.state 'shops.shop_detail.menus',
url: "/menus?page"
controller: "menusController"
templateUrl: "menus.html"
]
For example, if you want to see Page 2 of list of shops, URL inputed in browser is like the following.
/shops?page=2
And if you want to see Page 2 of list of menus in an specific shop, URL inputed in browser is like the following.
/shops/:shop_id/menus?page=2
But when I run this code, the following error occurred.
Error: error:modulerr
Module Error
Failed to instantiate module app due to:
Error: Duplicate parameter name 'page' in pattern '/shops/:shop_id/menus?page?page'
I think this kind of implementation of pagination using query parameter is popular. But I cannot do this using UI-Router.
Please tell me the solution.
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",
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.