When I view the page in Google Chrome and I click on the goal list that has been generated the URL changes to URL/#/tabs/personalview but the view fails to change.
This is the code in my personalGoals.html file:
<ion-view view-title="PersonalGoals">
<ion-content class="has-footer">
<ion-item ng-repeat="goal in goals" href="#/tabs/personalview">
<span class="goal-lists">{{goal.goaltitle}}</span>
</ion-item>
</ion-content>
</ion-view>
This is the code in my app.js file:
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
$stateProvider
.state('tabs', {
url: '/tabs',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tabs.personal', {
url: '/personal',
views: {
'personalGoals-view': {
templateUrl: 'templates/personalGoals.html',
controller: 'personalCtrl'
}
}
})
.state('tabs.personalview', {
url: '/personalview',
templateURL: 'templates/test.html',
controller: 'personalViewCtrl'
})
.state('tabs.relationship', {
url: '/relationship',
views: {
'relationshipGoals-view': {
templateUrl: 'templates/relationshipGoals.html',
controller: 'relationshipCtrl'
}
}
})
.state('tabs.squad', {
url: '/squad',
views: {
'squadGoals-view': {
templateUrl: 'templates/squadGoals.html',
controller: 'squadCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('tabs/dashboard');
});
You can see the full code over here.
Any help would be greatly appreciated, thank you in advance.
I think your problem is that you're trying to navigate to the wrong URL.
You are trying to navigate to the state name when you should be navigating to the state URL.
There are two ways to do this:
You can continue to use href, and change the URL to #/personalview
You can use ui-sref instead of href and do something like ui-sref="tabs.personalview"
You might check out the following for reference:
https://www.thepolyglotdeveloper.com/2014/11/using-ui-router-navigate-ionicframework/
https://www.thepolyglotdeveloper.com/2014/12/using-nested-states-angularjs-ui-router/
Best,
Related
I am updating angular 1.6 based web application from 'controller-based' to 'component-based app'.
Here is my code snippet:
dashboard-component.js
angular.module('app').component('dashboardComponent' , {
template: '<a>Hello</a>',
controller: function dashboardController() {
var vm = this;
console.log("dashboardController loaded");
}
}
And app-router.js:
angular.module('app').config(function($stateProvider, $urlRouterProvider){
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'framework/src/layout/template.html',
data: {
BreadCrumbLabel: 'Home'
}
})
.state('app.dashboard', {
url: '/dashboard',
component: 'dashboardComponent',
/* templateUrl: 'app/components/pages/dashboard/dashboard.html',
controller: 'dashboardCtrl',
controllerAs: 'dashboardCtrl',*/
})
});
I'd included them in index.html properly:
<script src="app/app.router.js"></script>
<script src="app/components/pages/dashboard/dashboard.component.js"></script>
If I remove the comment in the app.router.js file and recover routing by 'dashboardController', it works correctly, but it doesn't work if I set routing entry to 'component'.
This is just a simple sample, and it seems component is not loaded, even console.log is not working.
Here is a plunkr link: https://plnkr.co/edit/1aZ2aahTfT4AHIraWPCt?p=preview
Is this something you faced before? Would you like to help me?
I'm new angularjs student.
I'm using state provider in my project, i don't want to change this. Because the code is done.
Here is my code:
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.when('/SecondMain', '/SecondMain/OtherPageOne')
.when('/Main', '/Main/PageOne')
.otherwise("/notfound")
$stateProvider
.state('Main', {
abstract: true,
url: "/Main",
templateUrl: "/templates/Common/Main.html"
})
.state('SecondMain', {
abstract: true,
url: "/SecondMain",
templateUrl: "/templates/Common/SecondMain.html"
})
.state('notfound', {
url: "/NotFound",
templateUrl: "/templates/Common/NotFound.html"
})
.state('Main.PageOne', {
url: "/Main/PageOne",
templateUrl: "/templates/Main/PageOne.html"
})
.state('Main.PageTwo', {
url: "/Main/PageTwo",
templateUrl: "/templates/Main/PageTwo.html"
})
.state('SecondMain.OtherPageOne', {
url: "/SecondMain/PageOne",
templateUrl: "/templates/SecondMain/OtherPageOne.html"
})
.state('SecondMain.OtherPageTwo', {
url: "/SecondMain/PageTwo",
templateUrl: "/templates/SecondMain/OtherPageTwo.html"
})
angular
.module('inspinia')
.config(config)
.run(function ($rootScope, $state) {
$rootScope.$state = $state;
});
}
I want a logic like this: If the user put:
/Main/PageThree
This page does not exist, but the user start URL with
/Main
so that he need to go to -> /Main/PageOne
if the user put:
/Ma/PageOne
/Ma does not exist, the user starts URL totally wrong, so that he goes to -> /Notfound Basically if the user put /Main/WRONG_LINK, he go to /Main/PageOne . And if he does not start with /Main, he go to NotFound.
Can anyone help me please?
Thanks a lot!!!
You are missing this configuration
$urlRouterProvider.otherwise('/NotFound');
Just add this line if no matching route is found then it will redirect you to the /NotFound url
This answer is inspired by this answer.
First of all, you will have to make the Main state non-abstract, so that it can be visited. Then, you can write config related to where you want to redirect (for example, I've used redirectTo with the state):
$stateProvider
.state('Main', {
redirectTo: "Main.PageOne",
url: "/Main",
templateUrl: "/templates/Common/Main.html"
})
// ... Rest of code
So, whenever the URL is changed to /Main, this state will get activated. The second config will be to create a listener for $stateChangeStart event as follows:
angular
.module('inspinia')
.config(config)
.run(function ($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(evt, to, params) {
if (to.redirectTo) {
evt.preventDefault();
$state.go(to.redirectTo, params, { location: 'replace' })
}
});
});
Now, if a URL like /Ma/* is hit, it automatically be redirected to /NotFound. And if a URL like /Main is hit, it will redirect to /Main/PageOne.
You can follow up on further discussion on this link for any kind of troubleshooting.
Clearly read the statements below
Why are you using this line?
when('/Main', '/Main/PageOne')
For your redirection problem, have a look at the below state
.state('Main', {
abstract: true,
url: "/Main",
templateUrl: "/templates/Common/Main.html"
})
abstract: true ==> This denotes that this particular state is an abstract which can never be activated without its child.
SOURCE: ui-router js code. Refer the below snippet
Since you have this main state as abstract, you are redirected to the otherwise.
Hope this
What I am trying to do is within the Search controller, once I get the search results back from the server ($http) change view to a different view - the search results view. I am not sure if the approach I am going about it is right, but either-way it doesn't seem to be working. I will need to pass the response as well, so the new view can display the results/response.
My app.js:
.....state('tab.search', {
url: '/search',
views: {
'tab-search': {
templateUrl: 'templates/tab-search.html',
controller: 'SearchCtrl as search'
}
}
})
.state('tab.search-results', {
url: '/results',
views: {
'tab-search-results': {
templateUrl: 'templates/tab-search-results.html',
controller: 'SearchResultsCtrl as searchResults'
}
}
})
Then my search controller has:
.controller('SearchCtrl', function($scope, $state, $location, $ionicPopup, service) {
....
$scope.doSearch = function(state) {
.....
var result = service.doSearch(dataObj);
result.then(function(response) {
console.log("I'm here");
$state.go('tab.search-results');
......
My search results view (tab-search-results.html) has the following basic code at the moment:
<ion-view view-title="Search Results">
<ion-content padding="true">
hello world
</ion-content>
</ion-view>
This basic structure is how all my other pages/views are setup too.
What happens when I perform the search is that the console message gets outputted, and then the URL changes to /results as per the tab.search-results state, but the template/view doesn't change/show.
Interestingly if I change $state.go('tab.search-results'); to point to another app state/view that I know works, it works perfectly - but for whatever reason this state/view isn't working.
Also, if there is a better way of achieving this same thing, then please let me know. I will be needing to eventually pass the "response" from SearchCtrl to SearchResultsCtrl - or rather access it on the search results page in one form or another.
Many thanks.
I think you are looking for $stateParams.
var result = service.doSearch(dataObj);
result.then(function(response) {
$state.go('tab.search-results', {'searchData':response});
}
In your routes file:
.state('tab.search-results', {
url: '/results/:searchData',
views: {
'tab-search-results': {
templateUrl: 'templates/tab-search-results.html',
controller: 'SearchResultsCtrl as searchResults'
}
}
})
And in your SearchResultsCtrl:
.controller($stateParams) {
console.log($stateParams.searchData) // will give you search results
}
NOTE:If you don't want to pass data through the URL you can use params key in the .state() method.
.state('tab.search-results', {
url: '/results',
params: {
'searchData':null
},
views: {
'tab-search-results': {
templateUrl: 'templates/tab-search-results.html',
controller: 'SearchResultsCtrl as searchResults'
}
}
})
I realised why my view wasn't changing properly. The fix was changing the views in the sub-view to reference the parent view.
Fail (sub-view has unique name from parent):
.....state('tab.search', {
url: '/search',
views: {
'tab-search': {
templateUrl: 'templates/tab-search.html',
controller: 'SearchCtrl as search'
}
}
})
.state('tab.search-results', {
url: '/results',
views: {
'tab-search-results': {
templateUrl: 'templates/tab-search-results.html',
controller: 'SearchResultsCtrl as searchResults'
}
}
})
Success (sub-view references parent, 'tab-search'):
.....state('tab.search', {
url: '/search',
views: {
'tab-search': {
templateUrl: 'templates/tab-search.html',
controller: 'SearchCtrl as search'
}
}
})
.state('tab.search-results', {
url: '/results',
views: {
'tab-search': {
templateUrl: 'templates/tab-search-results.html',
controller: 'SearchResultsCtrl as searchResults'
}
}
})
Thanks all, I think I worked out the problem. It was putting the search results page under the tab abstract state. eg: tab.search-results rather than search-results - I am guessing this was the problem as there is no search results tab. When I re-named the state to just search-results (and modified the $state.go to use 'search-results' instead of 'tab.search-results') it worked. Does this seem right?
I having some problems with the the angular-ui-router. When I click on a ui-sref I get the message
"Error: Could not resolve 'X' from state ''
transitionTo#http:/
Where X is the state in site-header that I'm trying to go to.
I think this means that there isn't a default state, but I'm not sure. In any case here are what I think are the relevant file parts:
index.html
<div class="container" ng-cloak>
<a ui-sref="home"></a>
<div ui-view></div>
</div>
app.config.js
angular.module('fTA')
.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
url: '/',
template: '<p>This is home view</p>'
});
$stateProvider.state('login' {
url: '/login',
templateUrl: '/views/login.html',
controller: 'LoginCtrl'
});
});
Where /views/login.html are the path names of the files in my directory.
My understanding is that since urlRouterProvider is '/' then I should see <p>This is home view</p> in at '/'. But I don't. So, what retarded thing have I done so that even hard coded templates don't show up.
I just created a plunker here - and change only one thing: added comma after 'login'
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
url: '/',
templateUrl: 'tpl.html'
});
// $stateProvider.state('login' {
$stateProvider.state('login', {
url: '/login',
templateUrl: 'tpl.html',
controller: 'LoginCtrl'
});
And this is working now:
<a ui-sref="home">home</a>
<a ui-sref="login">login</a>
The working plunker here
WikiApp.config(function config($stateProvider, $urlRouterProvider) {
$stateProvider
.state('revision', {
url: '/wiki',
views: {
"main": {
controller: 'ListCtrl',
templateUrl: 'wiki/wiki.tpl.html'
},
"sidebar-left": {
templateUrl: 'wiki/wiki.sidebar-left.tpl.html'
}
},
data:{ pageTitle: 'List articles' }
})
This is what my Angular bit looks like and this is how I execute it inside of a template (wiki.tpl.html):
<div ui-view="sidebar-left"></div>
Now the main view works fine, but as I try to integrate the sidebar, it doesn't load, what am I doing wrong and how can I use more than one template in a single page like this?
Thank you!
WikiApp.config(function config($stateProvider, $urlRouterProvider) {
$stateProvider
.state('revision', {
url: '/wiki',
views: {
main: {
controller: 'ListCtrl',
templateUrl: 'wiki/wiki.tpl.html'
},
sidebarLeft: {
templateUrl: 'wiki/wiki.sidebar-left.tpl.html'
}
},
data:{ pageTitle: 'List articles' }
})
If you want to use nested templates you should implement that using sub-views. In your current example you are setting both templates as sibling templates.
I suggest you to create 2 states. Abstract view for the main template 'main' and another view 'main.wiki'. Route should be assigned to 'main.wiki' state ant it will inherit parameters from the main view (including template settings).
Hope that's clear.