Develop Reference

angular uirouter opens wrong url

I'm new to Angular 1 and have to implement a new feature on an existing webapp. The app uses jhipster to generate some parts of the backend and frontend (Angular 1 and uirouter).
So I tried to use my own route and state like this which is mostly copy and pasted from existing components of the webapp:
(function() {
'use strict';
angular
.module('artemisApp')
.config(stateConfig);
stateConfig.$inject = ['$stateProvider'];
function stateConfig($stateProvider) {
$stateProvider
.state('model-comparison-exercise-for-course', {
parent: 'entity',
url: '/course/{courseid}/model-comparison-exercise',
data: {
authorities: ['ROLE_ADMIN', 'ROLE_TA'],
pageTitle: 'artemisApp.modelComparisonExercise.home.title'
},
views: {
'content#': {
templateUrl: 'app/entities/model-comparison-exercise/model-comparison-exercise.html',
controller: 'ModelComparisonExerciseController',
controllerAs: 'vm'
}
},
resolve: {
translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
$translatePartialLoader.addPart('modelComparisonExercise');
$translatePartialLoader.addPart('exercise');
$translatePartialLoader.addPart('global');
return $translate.refresh();
}],
courseEntity: ['$stateParams', 'Course', function ($stateParams, Course) {
return Course.get({id: $stateParams.courseid}).$promise;
}]
}
});
}
})();
Then I try to open this route with the following code:
<a ui-sref="model-comparison-exercise-for-course({courseid:course.id})"
data-translate="artemisApp.course.modelComparisonExercises"></a>
By clicking on that link a http get request is fired which returns a http status code 404: http://localhost:8080/app/entities/model-comparison-exercise/model-comparison-exercise.html
Actually, the url that should be opened is http://localhost:8080/#/course/1/model-comparison-exercise
Any idea what I could have configured wrong?

Please try changing 'content#' to 'content#artemisApp'.
As explained here:
The symbol before the # is the name of the view you want to match, and the symbol after the # is a reference to the state in which the template the ui-view directive should exist in.
And the <a> tag is not being closed:
<a ui-sref="model-comparison-exercise-for-course({courseid:course.id})"
data-translate="artemisApp.course.modelComparisonExercises"></a>
Searching through the code, I found that model-comparison-exercise.html does not exist in folder model-comparison-exercise. Besides model-comparison-exercises.html exist.

How to use aliases in ui-router?

I am using angular ui for routing in angular js.
I have a url like http://servername/#/news/14.But I want to use aliases and have url like http://servername/#/news/news_title. Is it possible in angular ui??
Here is my config
angular.module('News', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('news', {
url: "/news",
templateUrl: "modules/news/views/news.html",
controller: 'NewsCtrl'
})
.state('news.detail', {
url: '^/news/:id',
views: {
'#': {
templateUrl: 'modules/news/views/news_detail.html',
controller: 'NewsDetailCtrl'
}
},
});
})

Of course it is possible. But to make it happen, you need to somehow map the news_title to 14 which i guess is an id. You can write something like:
$stateProvider
.state('news', {
url: "/news/:news_title",
templateUrl: 'news.html',
...
})
in this case, you can type url like http://http://servername/#/news/latest_bbc_news, in your controller you can get the :news_title by using $stateParams
how you gonna map the news_title to 14 depends on your model.
update
For example you probably can write something like this:
$stateProvider
.state('news', {
url: "/news/:news_title",
templateUrl: 'news.html',
resolve : {
news_item: function(NewsService, $stateParams) {
return NewsService.getByTitle($stateParams.news_title);
},
},
controller:['$scope','$state','news_item',
function ( $scope , $state , news_item){
$scope.news_item= news_item;
}]
})
then in your NewsService you need to implement the method getByTitle to either get the news by title from backend directly, or you fetch all news from backend and cache it in a variable like
var news = [
{ID: 1, Title : 'A', Content : 'XXXXXXXXXXXXXXXXXXXX',},
{ID: 2, Title : 'B', Content : 'YYYYYYYYYYYYYYYYYYYY',},
];
and you have to write your own code to loop through it and find the news you need by title.
Again, ui-router is just setting up the routing rules for you, it is always your responsibility to serve the correct content. I mean ui-router have no idea which news have id 14 and the corresponding title, it can only be fetched from backend and processed by you.

Problems with deep linking to URL with AngularJS ui-router

I've just encountered a problem which seems to have occurred due to me changing the folder structure of my app (but I think this is a "red herring"). I have a small AngularJS application and to tidy things up I moved one section of functionality to its own folder. I updated all <script> tag references, all view templateUrl values in my $stateProvider section... I don't get an 404 errors, all controllers and views are loaded but I have noticed that in my app I can't directly link to a specific URL (I could before). The URL I wish to directly/deep link to is http://myapp.com/an/membership
When I type this into the browser I get a GET http://myapp.com/an/membership/ 403 (Forbidden) error. The route has 4 child states / urls. I can deep link to all these. To make things worse if I have a link in my app (using ui-sref) I can link to my state / url with no problems... here is my state / routing code... I have added some comments to explain my problem...
/* This is the parent state of my membership state !! */
.state('sfm.in', {
abstract: true,
url: '/an/',
templateUrl: '/an/views/member-home/member-home-wrapper.html'
})
/* here the url is http://myapp.com/an/membership - I can link to it using ui-sref but can't deep link, I get a "403 forbidden", everything loads as expected (not sure if I need the abstract). */
.state('sfm.in.membership', {
url: 'membership',
templateUrl: '/an/membership/views/membership.html',
controller: 'MembershipCtrl',
abstract: true
})
/* this child state is a default and has the same URL as the parent - http://myapp.com/an/membership*/
.state('sfm.in.membership.advantages', {
url: '',
templateUrl: '/an/membership/views/membership-advantages.html'
})
/* No problem with deeplinking - http://myapp.com/an/membership/payment */
.state('sfm.in.membership.payment', {
url: '/payment',
controller: 'MembershipPaymentCtrl',
templateUrl: '/an/membership/views/membership-payment.html'
})
/* No problem with deeplinking http://myapp.com/an/membership/account */
.state('sfm.in.membership.account', {
url: '/account',
controller: 'MembershipAccountCtrl',
templateUrl: '/an/membership/views/membership-account.html'
})
/* No problem with deeplinking http://myapp.com/an/membership/data */
.state('sfm.in.membership.data', {
url: 'data',
controller: 'MembershipDataCtrl',
templateUrl: '/an/membership/views/membership-data.html'
});
I have correctly set up the $locationProvider.html5Mode in my app (as I can deeplink, type the url in the browser for other URLS).
Can anyone see a problem here? * UPDATE * I have added the parent state in the routing example, please see my comment from the first answer!

You forgot '/' in your first state:
.state('sfm.in.membership', {
url: '/membership',
templateUrl: '/an/membership/views/membership.html',
controller: 'MembershipCtrl',
abstract: true
})

This seems strange but I think the problem was the browser prepending the url when I type it in. I finally changed the code thus... but there is no real change here... I think the browser was the problem . In the meantime I changed the URL but cleaning the history / cache would have also solved the problem.
.state('sfm.in.membership', {
abstract: true,
url: 'member-ship',
templateUrl: '/an/membership/views/membership.html'
})
.state('sfm.in.membership.advantages', {
url: '',
templateUrl: '/an/membership/views/membership-advantages.html'
})
.state('sfm.in.membership.payment', {
url: '/payment',
controller: 'MembershipPaymentCtrl',
templateUrl: '/an/membership/views/membership-payment.html'
})
.state('sfm.in.membership.account', {
url: '/account',
controller: 'MembershipAccountCtrl',
templateUrl: '/an/membership/views/membership-account.html'
})
.state('sfm.in.membership.data', {
url: '/data',
controller: 'MembershipDataCtrl',
templateUrl: '/an/membership/views/membership-data.html'
})

Can you switch between ui-router views without switching tabs?

I am using Ionic and Angular 1 (with ui-router). Let's say I have 2 tabs:
+----+ +-------+
|HOME| |PROFILE|
+----+ +-------+
This is the important part: there's a link within the HOME tab to /profile... but, I do not want it to automatically switch to the PROFILE tab when I click that link... I want to continue with the navigation stack within the HOME tab.
The usual approach using ui-router to have multiple nested states is something like this (some unnecessary things for this example purposefully omitted):
$stateProvider
.state('app', {
abstract: true,
template: require('templates/app.html'),
})
.state('app.home', {
template: require('templates/home.html'),
url: '/home',
controller: 'HomeCtrl',
views: {
// a bunch of child views that can only belong to this state
}
})
.state('app.profile', {
template: require('templates/profile.html'),
url: '/profile',
controller: 'ProfileCtrl',
views: {
// a bunch of child views that can only belong to this state
}
});
But what if I want to navigate to app.profile inside of app.home, instead of being forced to change tabs?
One options is to make all my tabs abstract and then declare <tab>.<state> for every possible state (using a loop), but this seems like it requires a lot of possibly unnecessary overhead:
var abstractStates = [
{
name: 'home',
url: '/home',
controller: 'HomeCtrl',
template: require('templates/home.html')
},
{
name: 'profile',
url: '/profile',
controller: 'ProfileCtrl',
template: require('templates/profile.html')
}
];
abstractStates.forEach(function(state) {
$stateProvider.state(state.name, _.omit(state, ['name']);
abstractStates.forEach(function(nestedState) {
$stateProvider.state([state.name, nestedState.name].join('.'), _.omit(nestedStates, ['abstract', 'name']));
});
});
Is there a better way to accomplish this?

Angular Js + Ionic: How to add additional view?

This is the situation:
I am using Angular Js into Ionic framework to make a mobile app.
I start up the project using the tabs boilerplate. I have three tabs right now: Login - Friends - Map.
I want to add an additional view, named 'member area', that is accessible after the login pass succesfully, but i am not able to do.
In the initial setup of the ionic tabs project, each view is defined as state.
This is the code:
angular.module('starter', ['ionic','AngularGM', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform){
$ionicPlatform.ready(function(){
if(window.StatusBar){
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab',{
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.login', {
url: '/login',
views: {
'tab-login': {
templateUrl: 'templates/tab-login.html',
controller: 'LoginController'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'templates/friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tab.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'mapController'
}
}
});
$urlRouterProvider
// if none of the above states are matched, use this as the fallback
.otherwise('/tab/login');
});
This is what have tried to do:
1. Adding memberArea as .when
$urlRouterProvider
.when('/memberArea', {
templateUrl: 'main/memberArea',
controller: 'memberAreaController'
})
// if none of the above states are matched, use this as the fallback
.otherwise('/tab/login');
});
But in doing this the app crash with this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: invalid 'handler' in when()
2. Adding memberArea as a state:
.state('memberArea', {
url: '/memberArea',
views: {
'memberArea': {
templateUrl: 'templates/memberArea.html',
controller: 'memberAreaController'
}
}
});
But is not working, accessing the url #/memberArea gives a blank page (no error in console)
3. Add memberArea as a tab:
.state('tab.memberArea', {
url: '/memberArea',
views: {
'tab-memberArea': {
templateUrl: 'templates/memberArea.html',
controller: 'memberAreaController'
}
}
});
and add the tab itself:
<!-- memberArea -->
<ion-tab title="memberArea" icon="icon ion-home" href="#/tab/memberArea">
<ion-nav-view name="tab-memberArea"></ion-nav-view>
</ion-tab>
In this way is working.. but is a tab and shouldn't be there the view.
If i remove this HTML for the tab menu, then the view is not accessible anymore from the URL address.
This is the question:
How can i properly define an additional view in Angular js + Ionic (with tabs) ?
Thank you very much!

If you don't want to handle the MemberArea as a tab, you should use the following syntax:
.state('memberArea', {
url: '/memberArea',
templateUrl: 'templates/memberArea.html'
}
);

If you place a . before the item in the states, you are saying it should inherit the parent.
For example tab.member will mean member inherits from tab.
Also if you use a stateProvider, you can no longer write the format as a urlProvider as per your example 1. It would have to be like your last line, otherwise. ....etc.
I would think a controller is still required, regardless if its on tab or not. (Correct me if Im wrong).

If u want to properly define an additional view not as a tab, then you should follow option 2, adding memberArea as a state:
.state('memberArea', {
url: '/memberArea',
templateUrl: 'templates/memberArea.html'
}
);
Use ui-sref='memberArea' instead of href in the element, on clicking of which you will show MemberArea.
And just check if this view location is available to the app.