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'
}
}
})
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.
Here is my ui-router configuration:
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url : '/',
views : {
'' : {
templateUrl : 'partials/default.ejs',
controller : 'DefaultCtrl'
},
'defaultView#home' : {
templateUrl : 'partials/table.ejs',
controller : 'TenderAppCtrl'
},
'detailView#home' : {
templateUrl : 'templates/viewtender.ejs',
controller : 'TenderDetailCtrl'
}
}
})
.state('about', {
url : '/about',
templateUrl : 'partials/about.ejs',
controller : 'AboutCtrl'
})
.state('settings', {
url : '/settings',
templateUrl : 'partials/settings.ejs',
controller : 'SettingsCtrl'
})
//dummy state used for browser back button functionality only
.state('home.detail', {
url : ':id'
});
No matter where I refresh my browser, the page goes back to '/' state. For eg. if my current state is '/settings' and if I hit browser refresh, I expect the page to reload the state 'settings' but it jumps back to '/'. It seems like $urlRouterProvider.otherwise('/') is triggered eveytime I refresh the page. I tried setting HTMLmode to false but that didn't work either.
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 am currently working on an Angular app and facing some issues with URLs.
Problem:
My application has the main page which has multiple sections and all sections fetch data from backend. There is an animated scroller on each section, e.g. If I am at section1 and select Section3, it scrolls me to Section3 in a nice animated way. I have few pages which also are fetched from backend but totally changes the view. This is the hierarchy of views:
Page1:
Section1, Section2, Section3, Section4, Section5 (Will be visible in whole application aka HEADER)
Section5:
Link1, Link2 (Each link is totally a separate view)
If I am on Link1 and click any of the Section, it appends # to the URL relatively and doesn't redirect me to the actual section.
Question(s):
I do not want to use # anywhere at all, how can I get rid of it?
I do not want to remove animation from my home page.
If I am on some other view and click on any section (HEADER), it should take me to that particular position, how can I achieve this?
This is my routes.js file:
var webApp = angular.module('webApp', ['ngRoute','ngSanitize']);
webApp.config(function($routeProvider, $locationProvider) {
if(window.history && window.history.pushState) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
$routeProvider
.when('/', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
//section2
.when('/section2', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section3', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section4', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section5', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section7', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section8', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/Link1', {
templateUrl : 'application/link1.jsp',
controller : 'link1Controller'
})
.when('/Link2', {
templateUrl : 'application/link2.jsp',
controller : 'link2Controller'
})
.when('/Link3', {
templateUrl : 'application/link3.jsp',
controller : 'link3Controller'
});
});
Any help will be greatly appreciated or if anything is missing or required, please do let me know.