I am setting up a scaffold for an app with angular and angular-ui-router. I have it working however it seems to be adding a hash into my url (I'm running dev on localhost) localhost:9000/#/test. When I land on the main page it's just localhost:9000 and it still serves the main view content. I would like to get rid of the hash if possible.
So here is my setup:
In my index.html in the body I just have my nav and then the ui-view under that:
<div class="row">
<ul class="nav navbar-nav">
<li><a ui-sref="index">Home</a></li>
<li><a ui-sref="test">Test</a></li>
</ul>
</div>
<div ui-view=""></div>
and in my app.js I just have:
angular
.module('playApp', [
'ui.router'
])
.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'views/test.html',
controller: 'testCtrl'
});
});
So when I land, it's fine, but when I start using the nav I have set up, it adds the hashes to the url, would prefer not to have them if possible. Thanks!
Include $locationProvider and do $locationProvider.html5Mode(true); :
angular.module('playApp', ['ui.router'])
.config(function($stateProvider, $locationProvider) {
$stateProvider.state('index', {
url: '',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'views/test.html',
controller: 'testCtrl'
});
$locationProvider.html5Mode(true);
});
I also have an otherwise in there as well, so that if it can't find a specified route, it will just default back:
angular.module('playApp', ['ui.router'])
.config(function($stateProvider, $locationProvider, $urlRouterProvider) {
$stateProvider.state('index', {
url: '',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'views/test.html',
controller: 'testCtrl'
});
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
});
Inject $locationProvider into your config and set html5mode to true:
angular.module('playApp', [
'ui.router'
])
.config(function($stateProvider, $locationProvider ) {
$stateProvider
.state('index', {
url: '',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'views/test.html',
controller: 'testCtrl'
});
$locationProvider.html5Mode(true);
});
Make sure you adjust your .htaccess to handle this (rewriting back to root).
There is an alternative to html5Mode. But it has its drawbacks.
When defining ui-router states, the url option is not required. From that documentation:
You might create some child states without URLs, if it doesn’t make sense to bookmark those child states. The state machine transitions between url-less states as usual, but does not update the url when complete. You still get all the other benefits of a state transition such as parameters, resolve, and lifecycle hooks.
If you don't need to provide a URL for a state so that users can bookmark those states, you can omit the url option. The URL won't change.
Related
I have a problem with migrating from ngroute to ui.router:
using ngroute i have couple angular files:
module.js
angular.module('betTogether', ['ngRoute']);
route.js
angular.module('betTogether').config(['$routeProvider',
function (
$routeProvider
) {
$routeProvider.
when('/descriptionBets', {
templateUrl: 'descriptionBets',
controller: 'descriptionBetsCtrl'
}).
when('/normalBets', {
templateUrl: 'normal',
controller: 'normalBetsCtrl'
}).
when('/addBet', {
templateUrl: 'addBet',
controller: 'addBetCtrl'
}).
otherwise({
redirectTo: '/descriptionBets'
});
}]);
normalBets.js
angular.module('betTogether').controller('normalBetsCtrl', [
'$scope','$http',
function($scope,$http){
$scope.typeBetsImages = [{link: "images/basketball.png", title:"basketball"},
{link: "images/tenis.png", title: "tenis"},
{link: "images/volleyball.png", title: "volleyball"},
{link: "images/football.png", title:"football"}
];
$http.get("/normalBets").success(function(data){
$scope.normalBets = data;
});
}]);
...and rest of controllers. And everything works ok.
Now i want to migrate to ui-router. so i change module.js and route.js like that:
module.js
angular.module('betTogether', ['ui.router']);
route.js
angular.module('betTogether').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /business
$urlRouterProvider.otherwise("/descriptionBets")
$stateProvider
.state('descriptionBets', {//State demonstrating Nested views
url: "/descriptionBets",
templateUrl: "descriptionBets",
controller: "descriptionBetsCtrl"
})
.state('normalBets', {//nested state [products is the nested state of business state]
url: "/normalBets",
templateUrl: "normal",
controller: "normalBetsCtrl"
})
.state('addBet', {//nested state [services is the nested state of business state]
url: "/addBet",
templateUrl: "addBet",
controller: "addBetCtrl"
});
}]);
and it doesnt work. i have error:
Error: [$injector:nomod] http://errors.angularjs.org/1.3.10/$injector/nomod?p0=betTogether angular.min.js:6:417
... and it is for 1st line of each controllers.
Someone could help me?
PS: sorry for my english, hope You understand all.
Check the order of your <script> imports in your index.html. The likelihood is that you've included the ui-router module after your betTogether module whereas it should come before it because betTogether depends on ui.router.
So I have this code:
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/',
templateUrl: 'login.html',
controller: 'LoginController'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'templates/dashboard.html',
controller: 'DashboardController'
})
.state('customers', {
url: '/customers',
templateUrl: 'templates/customers.html',
controller: 'CustomerController'
})
$urlRouterProvider.otherwise('/');
});
Everything works but when I go to login, I still get the base template since I am using ui-view. How can I make the login state on his own? I mean without the base template where the ui-view resides.
I have an Ionic app that uses ng-token-auth. It uses 2 ng-token-auth configs for 2 sets of users with different authentication apis.
app.js
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home/home.html',
controller: 'HomeCtrl'
})
.state('employee', {
url: "/employee",
templateUrl: "templates/employee.html",
controller: 'EmployeeCtrl'
})
.state('employer', {
url: "/employer",
templateUrl: "templates/employer.html",
controller: 'EmployerCtrl'
})
$urlRouterProvider.otherwise('/home');
HomeCtrl
$scope.$on('$ionicView.beforeEnter', function(){});
I currently put the authentication checking in a $ionicView.beforeEnter but it flashes the home screen and then redirects to the correct page. Is there a better place to put this. Thanks
U can use "resolve" from the state-provider..
edit => employer-state to home-state
.state('home', {
url: "/home",
templateUrl: "templates/home/home.html",
controller: 'HomeCtrl',
resolve: {
//check if user is remembered & redirect to next state
}
})
I am trying to capture a route to be something like
www.mysite.com/#name=ted&location=ca
I am using stateprovider and I setup as follow:
$stateProvider
.state('home', {
url: '/#name',
controller: function () {
alert('here')
do stuff...
}
})
but for some reason, alert never trigger.
Can someone help me about it? Thanks a lot!
To get params via query string you can use try:
$stateProvider
.state('home', {
url: '/?name&location',
controller: function () {
alert('here')
do stuff...
}
})
# will be there if HTML5 mode is disabled.
var app= angular.module('appName', []);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'templates/home.html',
controller: 'AddOrderController'
}).
when('/contact', {
templateUrl: 'templates/contact.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/home'
});
}]);
Try This Is Example Of Navigation Using With route Providers .
When using ui.router, all routes need a template, include that in your state, remove the # sign from the URL and it should work
I'm beginner in AngularJS and I have a problem when use Angular UI Router.
index.html
<body ng-app="app" ng-controller="AppController" layout="column">
<ui-view></ui-view>
</body>
login.html
<h1>Login page content</h1>
And in my $stateprovider...
.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "views/app.html",
controller: "AppController"
}).state('app.login', {
url: "/login",
templateUrl: "views/login.html",
controller: "LoginController"
});
$urlRouterProvider.otherwise('/login');
})
It can't display a content of login.html page. But when i change state from app.login to login. It can be displayed. How should i do now?
Out of curiosity could you try:
$urlRouterProvider.otherwise('/app/login');
I saw the abstract nested classes routed in that format in some examples,
though i don't have time to test it in jsfiddle.
edit:
Maybe if you try setting the base url to "/" ?
.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$stateProvider
.state('app', {
url: "/",
abstract: true,
templateUrl: "views/app.html",
controller: "AppController"
}).state('app.login', {
url: "/login",
templateUrl: "views/login.html",
controller: "LoginController"
});
$urlRouterProvider.otherwise('/login');
})