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');
})
Related
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.
In my main index.html file I have the following simple markup...
<body ng-app="starter" ng-controller="AppCtrl">
<div ui-view></div>
</body>
In my app.js I am using $stateProvider to create routes so I can display certain pages...
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/app');
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.accounts', {
url: '/accounts',
templateUrl: 'templates/accounts.html'
})
});
When the page loads, the first state is loaded, meaning I can see the contents of menu.html in my main index.html and the controller AppCtrl is passed to this state.
My AppCtrl loads an API that I am using on click of a button from menu.html, the API provides a UI for a user to login, and once the credentials are good, the success is called...
app.controller('AppCtrl', function($scope, $ionicModal, $timeout, $state) {
$scope.create = function() {
var linkHandler = Plaid.create({
env: 'tartan',
clientName: 'Example Project',
key: 'test_key',
product: 'connect',
onSuccess: function(token) {
$state.go('app.accounts');
},
});
linkHandler.open();
}
});
What the API does is pretty irrelevant, but as you can see, I am passing $state.go('app.accounts'); on success. But instead of changing the state to app.accounts, I believe the otherwise statement is called because all I see is the contents of the app state.
Why is this so? I've been stuck on this issue for some time now.
app.accounts is a child state of app. That means in menu.html there must be <ui-view> in order to display accounts.html.
If you don't want to display accounts.html inside menu.html, you shouldn't make accounts a child state of app:
<body ng-app="starter">
<div ui-view></div>
</body>
and
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/app');
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('accounts', {
url: '/accounts',
templateUrl: 'templates/accounts.html'
})
});
In my js app I have this in config $stateProvider section via angular ui-router:
.state('login', {
url: '/login',
templateUrl: 'app/login/login.tmpl.html',
controller: 'LoginCtrl as login'
})
.state('app', {
abstract: true,
url: '/',
views: {
'main': { templateUrl: 'app/main/main.html' }
}
})
.state('app.reports', {
url: 'reports',
views: {
'': {templateUrl: 'app/templates/reports.tmpl.html'},
'devices#app.reports': {
templateUrl: 'app/templates/devices.tmpl.html',
controller: 'DevicesCtrl as devicesCtrl'
},
'graphics#app.reports': {...}
}
})
In index.html I have:
<body ng-controller="MainCtrl as main" >
<section ui-view>
<div ui-view="main"></div>
</section>
....
</body>
It works only if I have nested ui-view="main" in ui-view.
Is it correct way to work with ui-router?
In main.html I have header, footer and some common information for some pages.
But I have another state, 'login', in which I'll have their own templates. But in index.html their will be loading with ui-view, not ui-view="main".
How can I refactor my index.html and js to avoid nested ui-view in index.html?
Or I have a correct way?
You could refactor your app state like this:
.state('app', {
abstract: true,
url: '/',
templateUrl: 'app/main/main.html'
})
That should allow you to ony have the following in your index.html:
<body ng-controller="MainCtrl as main" >
<section ui-view>
</section>
....
</body>
I m working on angular project and my need is hide header block on login page only. I tried to hide header on login page. But it still doesn't work for me. Can you any one help me to hide it on login state.
Here my index html
<div ng-include src="'views/header.html'" ng-hide="$state.current.name === 'login'"></div>
<div class="">
<div ui-view></div>
</div>
Here my app.js
var app = angular.module('Qapp', ["ui.router", "ngRoute"])
app.config(function($stateProvider, $urlRouterProvider) {
//$urlRouterProvider.when('/dam', '/dam/overview');
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('base', {
abstract: true,
url: '',
templateUrl: 'views/base.html'
})
.state('login', {
url: '/login',
parent: 'base',
templateUrl: 'views/login.html',
controller: 'LogCt'
})
.state('dam', {
url: '/dam',
parent: 'base',
templateUrl: 'views/dam.html',
controller: 'DamCt'
})
});
You don't have access to $state object directly on HTML. For get access to it you should put $state object with the $scope/$rootScope, You could do this in run block/controller & use $state.includes instead of $state.current.name
Markup
<div ng-include src="'views/header.html'" ng-hide="$state.includes('login')">
</div>
Code
app.run(function($state, $rootScope){
$rootScope.$state = $state;
})
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.