I am trying to configure the app so that after logging in, it goes to a custom component with its own views, controllers, services and routes instead of going directly to my moodle site ("My Courses" page). How can I configure app to do this?
My initial approach was to make a new directory in www/core/components called "custom," make my views, routes, controllers and services, and reroute the app so that it goes from the "login" component to my "custom" component.
The flow of the app should look like this:
1. Login Component --> 2. My Custom Component --> 3. Courses Component
Is there a central routes.js or app.js file where I can change the flow of the app to go from the Login component to my custom component, and then from my custom component to the Courses component, instead of directly from Login to Courses?
Thank you for your help.
Hi Jason,
do you want your custom component to have the side menu visible or it will be an isolated component like login?
Daniel,
It will be an isolated component with no sidebar. I am integrating another ionic app onto the moodle app, as a custom layer/component, so that users must go through my custom component before they are redirected to the courses component.
Thanks for your help.
Hi Jason,
we use this function to navigate from the login component to the Home view:
$mmLoginHelper.goToSiteInitialPage();
I suggest you to search for the usage of this function and replace it with a function to navigate to your own state in the cases you want. When you want to navigate from your component to the courses component you just need to call this function.
Kind regards,
Dani
I have the states defined in my custom component's main.js. How to route to it? I have tried using $state.go('my_component_state_name'), much like in $mmLoginHelper.goToSiteInitialPage(), but that fails with the message that it cannot resolve the state:
'Could not resolve 'my_component_state_name' from state 'mm_login.credentials'
Where is the configuration done to include my component's paths to the list of core component paths? Thanks again
Hi Jason,
that's weird, if the state is registered in the stateProvider they should work. If you're going from mm_login.credentials to, for example, 'mycomponent.index' then I think the state 'mycomponent' needs to exist, but I'm not sure about that. I'm not sure if that's the case for you.
Also, now I just remembered that you'll have to change something else. In here we are limitating the navigation to make sure the user stays in the 'site' states when he is logged in, and that he stays in the login states when he isn't. You will have to add your states as an exception, just like we do with redirect and mm_contentlinks.
Kind regards,
Dani
Thanks for your suggestion. Unfortunately I still have the same issue. I am fairly certain my states are registered in the stateProvider, as shown in the code snippet below. What could be the reason the states are not registering?
My component 'abcd' main.js
angular.module('mm.core.abcd', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('abcd', {
url: '/abcd',
templateUrl: 'core/components/abcd/templates/courses.html',
controller: 'CoursesCtrl'
})
.state('abcd.course-detail', {
url: '/abcd/{CourseID}',
templateUrl: 'core/components/abcd/templates/course-detail.html',
controller: 'CourseDetailCtrl'
})
.state('abcd.course-sessions', {
url: '/abcd/{CourseID}/sessions',
templateUrl: 'core/components/abcd/templates/course-sessions.html',
controller: 'SessionsCtrl'
})
.state('abcd.course-online', {
url: '/abcd/{CourseID}/online',
templateUrl: 'core/components/abcd/templates/course-online.html',
controller: 'OnlineCtrl'
});
$urlRouterProvider.otherwise('/abcd');
});
I've also done what you suggested and added 'abcd' as an exception
if (toState.name.substr(0, 8) === 'redirect' || toState.name.substr(0, 15) === 'mm_contentlinks'
|| toState.name.substr(0, 4) === 'abcd') {
return;
Following is the directory structure for my custom component, under 'core,' in case this has something to do with the state registration issue.
Thanks
Hi Jason,
I just tested and the error I got was about ionNavBar directive not found, and it's required for ion-nav-title. So to fix it I changed the states a bit:
$stateProvider
.state('abcd', {
url: '/abcd',
templateUrl: 'core/components/abcd/templates/base.html',
abstract: true
})
.state('abcd.courses', {
url: '/abcd/courses',
templateUrl: 'core/components/abcd/templates/courses.html',
controller: 'CoursesCtrl'
})
.state('abcd.course-detail', {
url: '/abcd/{CourseID}',
templateUrl: 'core/components/abcd/templates/course-detail.html',
controller: 'CourseDetailCtrl'
})
...As you can see, I moved your 'abcd' state to 'abcd.courses' , and created a new abstract state 'abcd'. The template of this abstract state is exactly the same as core/components/login/templates/base.html.
With this it worked fine for me.
Hi,
Thank you for letting me know of the ionNavBar directive not found error. I've fixed my states to look like yours.
However the error I am getting currently is:
Error: Could not resolve 'abcd.courses' from state 'mm_login.credentials'
So I still have the issue where my state 'abcd' is not being registered in the app at all. It will not work when I try to navigate from the login to 'abcd' because of this error. Here is how I am calling $state.go(), in login/controllers/credentials.js:
return $mmSitesManager.getUserToken(siteurl, username, password).then(function(data) {
return $mmSitesManager.newSite(data.siteurl, data.token).then(function() {
delete $scope.credentials; // Delete username and password from the scope.
$ionicHistory.nextViewOptions({disableBack: true});
if (urlToOpen) {
// There's a content link to open.
return $mmContentLinksDelegate.getActionsFor(urlToOpen, undefined, username).then(function(actions) {
action = $mmContentLinksHelper.getFirstValidAction(actions);
if (action && action.sites.length) {
// Action should only have 1 site because we're filtering by username.
action.action(action.sites[0]);
} else {
// return $mmLoginHelper.goToSiteInitialPage();
return $state.go('abcd.courses');
}
});
} // ...
It also won't work even if I type the URL out directly in the browser in ionic serve: http://localhost:8100/#/abcd/courses
Do you have any ideas about this? Thanks again
Hi Jason,
that's weird. Please make sure there are no errors thrown when running gulp or when the app starts.
Also, to verify if your states are registered you can open the app with ionic serve, open the console and run the following lines:
var $state = angular.element(document.querySelector('[ng-app]')).injector().get('$state');
$state.get('abcd.courses');If $state.get returns a null it means your state is not registered and you need to search why. If it returns an object then I don't know what the problem might be :S
Kind regards,
Dani
I got the states to register by putting them in the app's top level app.js:
angular.module('mm', ['ionic', 'ngCordova', 'angular-md5', 'pascalprecht.translate', 'ngAria', 'oc.lazyLoad', 'ngIOS9UIWebViewPatch'])This is the only way I could get the states to register. Why is this? Why does putting the state provider configuration in core/components/abcd/main.js not register the states? Does it have something to do with how the app binds everything into mm.bundle.js?
.config(function($stateProvider) {
$stateProvider
.state('abcd', {
url: '/abcd',
templateUrl: 'core/components/abcd/templates/base.html',
abstract: true
})
.state('abcd.courses', {
url: '/courses',
templateUrl: 'core/components/abcd/templates/courses.html',
controller: 'CoursesCtrl'
})
.state('abcd.course-detail', {
url: '/{CourseID}',
templateUrl: 'core/components/abcd/templates/course-detail.html',
controller: 'CourseDetailCtrl'
})
.state('abcd.course-sessions', {
url: '/{CourseID}/sessions',
templateUrl: 'core/components/abcd/templates/course-sessions.html',
controller: 'SessionsCtrl'
})
.state('abcd.course-online', {
url: '/{CourseID}/online',
templateUrl: 'core/components/abcd/templates/course-online.html',
controller: 'OnlineCtrl'
});
//$urlRouterProvider.otherwise('/abcd/courses');
})
Hi Jason,
it should work by adding them in your main.js, that's what I did when I did my test and it worked ok for me. Are you sure your code in main.js is executed?
Kind regards,
Dani