I have a problem between my template and controller. When i hit the refresh button on the web browser my controller is getting destroyed and not getting created again. So view doesnt function. Is there any way to avoid this error ?
UPDATE :
It was an other service which caused ctrl not the work. I solved the problem but still i couldnt figure out how to manipulate the URL when a person presses refresh in the browser..
Try this:
.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
// For unmatched routes
$urlRouterProvider
.when('', '/home')
.otherwise('/errorPage');
// Application routes
$stateProvider
.state('someState', {
url: '/somePage',
controller: 'SomeCtrl',
templateUrl: 'any.html',
})
.state('otherOne', {
url: '/otherPage',
templateUrl: 'other.html',
})
}
And to shitch between states use <a ui-sref="someState">cLick Me</a>
Related
Following is my code:
var app = angular
.module('moviesApp', ['ui.router'])
.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/SignIn');
$stateProvider
.state("SignIn", {
url: "/SignIn",
templateUrl: "Pages/SignIn.html"
})
.state("SignUp", {
url: "/SignUp",
templateUrl: "Pages/SignUp.html"
});
$locationProvider.html5Mode(true);
});
When I load the state - '/SignIn' it loads the contents of 'Pages/SignIn.html' in ui-view as expected. Similarly, when I load the other state - '/SignUp' it loads the contents of 'Pages/SignUp.html' in ui-view.
What is my requirement?
I want 'Pages/SignIn.html' or 'Pages/SignUp.html' to be loaded only through states in ui-view. They should not be loaded through direct URL navigation in browser.
In other words, when I type '/Pages/SignIn.html' directly in the browser's address bar, it should be redirected to the state '/SignIn'.
The contents of html files under 'Pages' folder should not get displayed over direct url navigation.
How can I achieve this? Please advise.
To prevent it from showing in the address bar use name instead of url
$stateProvider.state('default', {
url:'',
templateUrl: ctx + '/jsp/home/dashboard.jsp'
}).state({
name:'/test',
templateUrl: ctx + '/jsp/home/testview.jsp'
});
In the html page give as below
<a ui-sref="test">test view</a></li>
I am currently working on a web development project and I am having a problem in implementing UI-router (AngularJS).
I want to set a default state when the page loads and also default state for the child view.
If I use abstract:true method that is not the solution because when I want to again active that state it won't be possible.
Hope this will give you answer to your Question
var App = angular.module('TechdefeatApp',['ui.router']);
App.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /business
$urlRouterProvider.otherwise("/")
$stateProvider
.state('/', {
url: "/",
templateUrl: "app/components/home/homeView.html",
controller:"homeController"
})
.state('member', {
url: "/member/:seo_url",
templateUrl: "app/components/member/memberView.html",
controller:"memberController"
})
.state('category', {
url: "/category/:seo_url",
templateUrl: "app/components/category/categoryView.html",
controller:"categoryController"
})
}]);
you need to use at $urlRouterProvider service,
first inject this service, after that write
$urlRouterProvider.otherwise('/otherwise').
Pay attention that the /otherwise url must be defined on a state as usual:
$stateProvider
.state("otherwise", { url : '/otherwise'...})
good luck!
I am using AngularJS ui-Router and node js.Response is coming as JSON. Normally, the page was rendered properly. If I refresh the same page manually, it displays JSON Data instead of HTML.
Kindly, help me to fix this issue.
angular.module('app.routes',[])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider){
$locationProvider
.html5Mode({
enabled:true,
requireBase:false
})
.hashPrefix('');
}])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider.state('/', {
templateUrl: '/views/login.html'
})
.state('admin', {
url: '/admin',
templateUrl: 'views/index.html',
controller: 'AdmCtrl',
})
.state('admin1', {
templateUrl: 'views/index1.html',
controller: 'AdmCtrl1',
})
You have turned on html5Mode routing.
This is a declaration that your internal angular route URLs are the same as your server's URLs.
In practise, it looks like you have actually configured the server to send the data as JSON instead.
You need to change your server side code to serve up HTML documents for those URLs instead of JSON.
Alternatively, turn off html5Mode and go back to hashbangs.
The sample demo of the angular ui router has this link for the start page:
full url of 'ui-router' is / or http://angular-ui.github.io/ui-router/sample/#/
full url of 'about' is /about or http://angular-ui.github.io/ui-router/sample/#/about
When I was using durandalJS there was a limitation that the default url is just "/" there can be no "/ui-router".
Has the angular ui router plugin the same limitation?
The default route for ui-router can be whatever you want it to be, there is no limitaion like in DurandalJS. Just use:
$stateProvider
.state("otherwise", { url : '/otherwise'...})
This is the official documentaion of ui-router, however I could not find the otherwise technique in there: https://github.com/angular-ui/ui-router/wiki
#apohi: ui-router is not angular-route. Your reply is adressing the wrong module.
You can do it this way:
angular.module('MyApp', ['ui.router']).config([
'$stateProvider', function ($stateProvider) {
$stateProvider.state('default', {
controller: 'MyController',
templateUrl: 'path/to/index.html',
url:''
})
)];
That way whenever the url is on the root of your site ui-router will capture it on a state that matches, in this case, 'default'.
use the $urlRouterProvider and its otherwise function:
angular.module('MyApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('default', {
controller: 'MyController',
templateUrl: 'path/to/template.ng.html',
url:'/default'
})
$urlRouterProvider.otherwise('/default')
})];
See here there is an "otherwise" option for a default route.
If you are talking about default route PARAMETERS, then there is an answer here.
You can use $urlRouterProvide.otherwise. This will work if you try to navigate to a route url that has not been defined.
Taken from here.
function configurUIRoutes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('myhomepage',
{
abstract: false,
url: '/myhomepageurl',
templateUrl: "some-path/staff-admin.html",
controller: 'HomeController'
});
$urlRouterProvider.otherwise('/myhomepageurl'); // User will be taken to /myhomepageurl if they enter a non-matched entry into URL
}
The simplest way of all
add $urlRouterProvider service in config(function($urlRouterProvider))
and then
app.config(function ($stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('employeesState'); //default route
$stateProvider.state('employeesState', function(){
//state configuration here
}) //employees state
$stateProvider.state('cutomersState', function(){
//state configuration here
})
}
name any of the state in otherwise function to which you want as your default state/route
Essentially how can I detect whether a specific route has been linked to from within an Angular application or accessed directly from a user typing that URL into the address bar from within the configuration phase?
I know I can listen for the $locationChangeSuccess event like follows:
$Scope.$on('$locationChangeSuccess', function(evt, newUrl, oldUrl) {
// -- do something with oldUrl --
});
on either $Scope or $rootScope but these instances are not available during the configuration phase.
Maybe I am making this more complicated than it needs to be but any help would be much appreciated.
Update
To give some context. Some of the routes in my application load the associated template into a modal window instead of into a standard view. I am using ui-router with the basic configuration below:
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'index.html'
});
$stateProvider.state('foo', {
url: '/foo',
views: {
'': {
template: '='
},
modal: {
templateUrl: 'modal.html'
}
}
});
}
]);
And the main template:
<div class="main" ui-view></div>
<div ui-view="modal"></div>
This works fine if the user accessed /foo via a link (ui-sref="foo") however the problem I have is that if the /foo route is entered directly into the address bar the underlying template does not exist obviously. I could manually set it if the page is accessed in this way instead. So if I can tell where the request has come from then I can set the template accordingly but it needs to be done in the configuration phase above (at least I think it does).
Note that if I were set the template explicitly it would be reloaded on each request to /foo which is not the desired result.
I can propose a solution, but i'm not sure it will make sense in the context of your application.
You could have the foo route be a sub route of the index route:
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'index.html'
});
$stateProvider.state('index.foo', {
url: '/foo',
views: {
'modal#': {
templateUrl: 'modal.html'
}
}
});
});
<div ui-view></div>
<div ui-view="modal"></div>
The 'downside' of this method is that if you need to reuse the modal in any other part of the application, you need to redefine the state declaration for each of the top level state you need them in.
If you find a better solution, please ping this answer, as i'm trying to solve a very similar problem.