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.
Related
I want to use parentController like the below code, is it possible?
$stateProvider
.state('main.base', {
abstract : true,
views : {
'left#main' : {
templateUrl: '',
controller : ''
},
'content-head#main': {
templateUrl: '',
controller: ''
},
'content-body#main': {
template : '<div>init page</div>'
}
},
params : {
},
controller: 'ParentController as parentCtrl'
})
Yeah it is, but you need a parent state. Eg;
$stateProvider
.state('main', {
template: '<ui-view/>',
controller: 'ParentController as parentCtrl'
})
.state('main.base', {
// your views
});
If you have views, you can't have a controller on the same state, but you can always add a state in your hierarchy to achieve the same result.
How to design a state with UI-Router that replaces the CONTENT ONLY of index.html with two files and two controllers.
i have views/dishDetail.html & views/comment.html and
I`m trying this:
.state('app.dishDetail',{
url: 'menu/:id',
views: {
'content#' : {
'disComment': {
templateUrl : 'views/dishDetail.html',
controller : 'DishDetailController'
},
'myComment': {
templateUrl : 'views/comment.html',
controller : 'DishCommentController'
}
}
}
});
please help
This should be the way
.state('app.dishDetail', {
url: 'menu/:id',
views: {
'content#': {
template: '<div ui-view="disComment" /></div>' +
'<div ui-view="myComment" /></div>',
},
'disComment#app.dishDetail': {
templateUrl: 'views/dishDetail.html',
controller: 'DishDetailController'
},
'myComment#app.dishDetail': {
templateUrl: 'views/comment.html',
controller: 'DishCommentController'
}
}
There is a working plunker
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.
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'
}
}
})