In my angularjs app I have replaced ngRoute (routeProvider) with ui.router (urlRouterProvider) module and stateProvider to navigate between states within my app.
Now I find out that ui-router only works with states and <a ui-sref=""> instead of <a href="">. As I have to set the application navigation outside of my app by using javascript, I can not change the anchors from href to sref. Here's how I set navigation links.
Portal.setNavigation(
[
{
"label": "Application1",
"selected": true,
"url": "/web/guest#/Application1"
}
]
);
This code set's the href attributes accordingly. Here is my stateProvider snippet, which works on manually placed srefs like this one: <a ui-sref="Application1">Application State 1</a>
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('Application1', {
url: '/Application1',
templateUrl: '/Application.html',
controller: 'AppCtrl'
});
}]);
Any ideas how I can continue using ui-router AND using hrefs to navigate through states?
If you are navigating outside of your application through javascript by doing something like window.location(url), you should be able to to put your state's route in the url and the router should be able to handle the route i.e. window.location(/state1).
Here's the text from the ui-router that sheds some light on this (link):
Here's how you set a basic url.
$stateProvider
.state('contacts', {
url: "/contacts",
templateUrl: 'contacts.html'
})
Now when the user accesses index.html/contacts then the 'contacts'
state would become active and the main ui-view will be populated with
the 'contacts.html' partial.
Related
I have a state named state.home() that is used to redirect a user to the home pageand this is my state:
$stateProvider
.state('state.home', {
url: '/home',
templateUrl: modulePath + '/views/home/home.html',
controller: 'state:HomeController',
controllerAs: 'homeCtr'
})
In another page after doing some work , in my controller i need to redirect the user to a specific Div in the home page, so in my controller i added this line for the redirection but it doesn't seem to be the right way:
$state.go('state.home',{'#': 'anchor'});
I want to know if it could work with the same state or I have to make a new state.
Give the div an id, e.g <div id="anchor"></div>
in the controller, navigate to the intended state and use anchor scroll to go to the div. Dont forget to inject $anchorScroll
$state.go('state.home').then(function() {$anchorScroll('anchor');})
I'm currently having an issue with the angular-route#1.5.8 module.
The router does not seem to activate on its own. What I mean is that when I call the page (http://localhost/index.html), the requested template does not show up. However, manually adding a hash (#) to the end of the url, activates the router and shows the correct template.
I build a test application with nearly the same router-configuration, and in that app the router works as expected.
There are no errors logged in the console.
This is the config:
angular.module('app', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: './app/html/default.html'
})
.when('/login', {
templateUrl: './app/html/login.html',
})
.otherwise({
redirectTo: '/'
});
});
The templates are basically a span-tag with some text to show what template is being displayed.
Any help is appreaciated.
Did you put ng-view directive on your index page? You should share more of your the relevant routing codes, your html, your templates.
I have a modular application where i have routes split into multiple files.
So my system is.
Top
--Main.Module.js
--Main.Routes.js
--Main.Controllers.js
--Main.html
--user (folder)
----User.Module.js
----User.Routes.js
----User.Controllers.js
And in the user folder I have a login folder with a Login.html and a register folder with a Register.html
The main module file looks like this
angular.module('Main', ['ionic', 'Main.Routes', 'Main.Controllers', "User"])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
});
The main route file contains
angular.module('Main.Routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('Loader', {
url: '/',
templateUrl: '/views/Main.html',
controller: 'MainController'
});
$urlRouterProvider.otherwise('/');
});
And the Main.Module.js injects these two things as well as the User module which js file looks like this
angular.module('User', ['User.Controllers', 'User.Services', 'User.Routes']);
The user routes file has the routes for the login page and the register page
angular.module('User.Routes', [])
.config(function($stateProvider) {
$stateProvider
.state('Login', {
url: '/user/login',
templateUrl: 'views/user/login/Login.html',
controller: 'LoginController'
})
.state('Register', {
url: '/user/register',
templateUrl: 'views/user/register/Register.html'
});
// if none of the above states are matched, use this as the fallback
});
And when I do $state.go("Login") from the main controller it takes me to the login page without any issue. But I have a register button on the login page which is associated with this block of code
//Move user to the register page
$scope.registerClick = function(){
$state.go("Register");
}
Which redirects me to the register page for around half a second then immediately kick it back over to the main html page. So my question is i need to know why the state isnt staying with the register page and is moving immediately to the main.html page. The register page is part of the page history stack because i can go "back" to it with either the hardware back button or pressing back on chrome during testing. I tried moving the routes back to the main route file and not injecting the user routes but it produced the same results.
==============EDIT=============
Once the application loads, if i change the page it goes to after the main page to the register page and add a link back to the login page this behavior does not occur. I'm just confused on whats different.
set an otherwise
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/defaultpage');
.state('login', {
url: '/login',
templateUrl: 'templates/template.html',
controller: 'Ctrl'
})
.otherstates etc....
});
I see what I did wrong. In the location where I had my button that was supposed to take me to the register page alongside the ng-click directive i also had a href directive set to #. Thank you all for your input though.
The offending line
Create an account
What it should have been
Create an account
I am stuck at hiding and showing the login and logout buttons at the navbar. I am setting some cookies at LoginCtrl which belongs to login.html. When user logged in I am assigning rootscope to some variables which that variable assing to ngshow/hide in And getting those cookies in HomeCtrl. What i want to achieve is when I click log in button in the login.html Login element at the nav bar has to be gone and Username element has be to show. In plunker when I add some nested states like my local and result is the same. But when i remove the nested structure and add simple two state its start working.
Working Case:
.state('home', {
templateUrl:'home.html', ===>stores the navbar html
controller: 'HomeCtrl'
})
.state('login', {
templateUrl:'login.html',
controller:'LoginCtrl'
})
Not Working Case:
.state('home', {
templateUrl:'home.html, ===>stores the navbar html
controller: 'HomeCtrl'})
.state('home.login', {
templateUrl:'home.login.html',
controller:'LoginCtrl'})
Here is plunker when you logged in login button is in place but when you rerun the app Login button is gone.
http://plnkr.co/edit/tZuvyrAUD0yCN8a3K5lF
You problem was that you put 'some' key but get 'Some'. Here is your example: plnkr.co/edit/ZsT52SYFeRVCXpGYTMqK?p=preview
My application has several 'modal' windows, For now there is no specific route to reach an open modal directly. I mean, written the url directly in the browser.
There are a Jquery solution, but how implement some similar solution for angular? where placed? when should run?
You can perform this sort of task within the routing config of your app.
For example, this one is using ui-router, for the routes, and ui-bootstrap for the modals.
In the route config add an onEnter which will fire when the route is first entered.
.state('login', {
onEnter: function ($stateParams, $state, $modal) {
$modal.open({
keyboard: false, // prevents escape-key closing modal
backdrop: 'static', // prevents closing modal outside of the modal
templateUrl: '/views/login', // view to load
controller: 'LoginCtrl' // controller to handle
})
}
})
Now, when navigating to the, in this example, login page the route will open the modal for me.