I use Spring Boot application and #RepositoryRestResource to implement my REST API. For Project entity I got the following output:
{
"_embedded" : {
"projects" : [ {
"name" : "Test project",
"createDate" : "2016-02-13",
"_links" : {
"self" : {
"href" : "http://localhost:8080/projects/1"
},
"project" : {
"href" : "http://localhost:8080/projects/1"
},
"tasks" : {
"href" : "http://localhost:8080/projects/1/tasks"
}
}
} ]
},
"_links" : {
"self" : {
"href" : "http://localhost:8080/projects"
},
"profile" : {
"href" : "http://localhost:8080/profile/projects"
}
}
}
As we have resource self link instead of database identity it becomes a question how to make navigation between states correctly. I had the following setup before:
app.config(function ($stateProvider) {
$stateProvider.state('projects', {
url: '/projects',
templateUrl: 'partials/projects.html',
controller: 'ProjectListController'
}).state('project', {
url: '/project/:id',
templateUrl: 'partials/project-view.html',
controller: 'ProjectViewController'
...
and to open project info page I passed id to the state.go({id:project.id}) or from ui-sref or open URL: http://localhost:8080/index.html#/projects/1
Now I pass _self.href as hidden param to state function
app.config(function ($stateProvider) {
$stateProvider.state('projects', {
url: '/projects',
templateUrl: 'partials/projects.html',
controller: 'ProjectListController'
}).state('viewProject', {
url: '/project',
templateUrl: 'partials/project-view.html',
controller: 'ProjectViewController',
params: {'href':null}
...
And it works. But as the URL doesn't contain id I could not open project info page using old link: http://localhost:8080/index.html#/projects/1
I've seen a lot of examples but niether one helped as most of them has one state only.
Thanks in advance.
Related
It's first time to use Angular1.5.
Here's my source code.
function config(stateHelperProvider, $urlRouterProvider) {
stateHelperProvider
.setNestedState({
name : 'main.browsejobs',
url : '/browse-jobs',
params : {keyword : ""},
data : {
pageTitle: 'Available jobs for Aditjobs',
mastheadClass: 'browse-jobs'
},
children : {
name: 'index',
url: '/',
templateUrl: '/par'
},
views : {
'': {
templateUrl : 'components/browse-jobs/views/browse-jobs.view.html',
controller : "browseJobsController",
controllerAs: 'vm',
resolve: {
jobFilters: jobFilters,
jobPosts : jobPosts,
applyJob : applyJob,
jobPostsPagination: jobPostsPagination,
locationFilters: locationFilters
}
},
// 'testimonial#main.home': {
// templateUrl : 'components/home/views/testimonial.view.html',
// }
}
})
$urlRouterProvider
.otherwise('/404')
}
I wanna get url like 'aditjobs/aaa' (for example) and I think I should use params in setNestedState function but this doesn't work.
How can I do this?
I mixed up with something.
url : '/browse-jobs/:jobid',
I can do it with that.
I want to navigate from one url /projects to url /projects/{name} , but I need to resolve resource by $stateParams.id. How can I do it?
Now I have something like this:
$stateProvider.state('project.detail', {
...
url: '/projekt/{name}/{id}',
...
resolve: {
project: ['$stateParams', 'ProjectService', function($stateParams, ProjectService) {
return ProjectService.get({id : $stateParams.id}).$promise;
}]
}
...;
But when I remove {id} from the url: '...', it does not work.
My front end navigation is :
ui-sref="project.detail({name: project.name, id: project.id})"
And I do not want to have url .../projects/hyperloop/5462
but only .../projects/hyperloop
Thank you!
You can use parameters without specifying them in state URLs. You can specify them in params property in state config:
$stateProvider.state('project.detail', {
...
url: '/projekt/{name}',
params: {
id: null
},
resolve: {
project: ['$stateParams', 'ProjectService', function($stateParams, ProjectService) {
return ProjectService.get({id : $stateParams.id}).$promise;
}]
}
...
})
Please check ui-router docs for more details
I'm trying to provide some initial "partial" views through an abstract state using Angular and Angular UI router but somewhere along the way I'm making a misinterpretation which breaks my implementation...
As you can see I tried some variations with specifying a customLayout.html template to the abstract state. This also didn't work.
What does work (but isn't what I want) is specifying the shared partial templates on each state.
I've implemented that what does and what does not here:
See this: JSBin.
Look at: //REMOVE COMMENT HERE to switch between an "inherited" or "child" state.
$stateProvider
.state("layout", {
abstract: true,
url: "",
//templateUrl: "customLayout.html",
views: {
"header" : {
templateUrl: 'shared/header.html',
}
}
})
//REMOVE COMMENT HERE
//.state("layout.demo")
.state("demo", {
url: "/demo",
views: {
"" : {
templateUrl: 'demo.html',
},
"header" : {
templateUrl: 'shared/header.html'
}
}
});
Edit:
With help of this:
$stateProvider
.state("layout", {
abstract: true,
url: "",
//templateUrl: "customLayout.html",
views: {
"header" : {
templateUrl: 'shared/header.html',
},
//ADDED THIS, ESSENTIALLY PROXYING THE NAMELESS TEMPLATE
'': {
template: '<ui-view />'
}
}
})
Try this:
app.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
console.log("app: states");
$urlRouterProvider
.otherwise('/demo');
$stateProvider
.state("layout", {
abstract: true,
url: "",
//templateUrl: "customLayout.html",
views: {
"" : {
templateUrl: 'demo.html'
},
"header" : {
templateUrl: 'shared/header.html'
}
}
})
//REMOVE COMMENT HERE
//.state("layout.demo")
.state("layout.demo", {
url: "/demo",
});
}
]);
Here is the working link:
http://jsbin.com/zehejovaco/1/edit?html,output
here i have a neatly configured routing pattern in ui.route
'use strict';
var app = angular.module('myApp', [ 'ngAnimate', 'ui.router']);
app.config([ '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('App', {
url : '/',
views : {
'header' : {
templateUrl : 'partials/header.jsp',
controller : 'headerController'
},
'body' : {
templateUrl : 'partials/indexbody.jsp',
controller : 'indexBodyController'
},
'footer' : {
templateUrl : 'partials/footer.jsp'
}
}
}).state('App.Dashboard', {
url : 'Dashboard',
views : {
'body#' : {
templateUrl : 'partials/dashboard.jsp',
controller : 'dashboardController'
},
'dashboardBody#App.Dashboard' : {
templateUrl : 'partials/dashboard_adddeal.jsp'
}
}
}).state('App.Dashboard.AddDeal', {
url : '/AddDeal',
views : {
'dashboardBody#App.Dashboard' : {
templateUrl : 'partials/dashboard_adddeal.jsp'
}
}
}).state('App.Dashboard.Section2', {
url : '/Section2',
views : {
'dashboardBody#App.Dashboard' : {
templateUrl : 'partials/a.html'
}
}
});
} ]);
Everything is working fine, but i want to change the "body-view" in 'App' State After the authentication is successful
to simply put it i want to show a different state after authentication.
im new to angular, so go easy on me ;)
The solution will be dependent on how you have implemented your authentication, but there are a couple of ways to dynamically specify a template.
templateUrl can be a function which takes one parameter,$stateParams, and returns a URL
Alternatively, templateProvider can be a function with injected parameters that returns template HTML.
Detail here: https://github.com/angular-ui/ui-router/wiki#templates
With that said, I would exercise caution with either of these paths. If the user's authentication status changes without a state change, the template in use may not be updated.
You can use the resolve promise on your $stateProvider.state call.
Ex:
.state('App', {
url: '/',
/*some skipped lines*/
resolve: {
/*verify the authentication*/
verify();
$state.go('App.Dashboard');
}
});
More details about you can do in here: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#resolve
I use angular 1.1.5 and ui-router. My Spring-based webapp is reachable at http://mydomain:8080/webapp/app/index.html
All the resource files are loaded, and when angular bootstrap the main module, the URL is changed to http://mydomain:8080/webapp/app/index.html#/index.html and the page is blank.
ui-router is configured as
myapp
.config(function($stateProvider) {
$stateProvider
.state('layout', {
abstract : true,
views : {
"headerView" : {
templateUrl : 'partials/header.html',
controller : 'LoginController'
},
"navigationView" : {
templateUrl : 'partials/navigation.html',
controller : 'NavigationController'
}
}
})
.state(
'layout.home',
{
url : "", // root route
views : {
"contentView#" : {
templateUrl : 'partials/content.html',
controller : function() {
console.log("Root URL");
}
}
}
});
I tried to create a plunker to show the issue but I did not succeed.
Add url:'/' to the base abstract view.
.state('layout', {
abstract : true,
url:'/',
views : {
"headerView" : {
templateUrl : 'partials/header.html',
controller : 'LoginController'
},
"navigationView" : {
templateUrl : 'partials/navigation.html',
controller : 'NavigationController'
}
}
})