I have a function like this, supposed to load some routes.
.config(function($stateProvider, $urlRouterProvider){
$stateProvider.state('app', {
abstract: true,
templateUrl: "index.html",
})
$stateProvider.state('index', {
url: '/',
views: { "index" : { templateUrl: "index.html" } },
parent: "app",
});
$stateProvider.state('register', {
url: "/register",
views: { "register" : { templateUrl: "templates/register.html", } },
parent: "app",
});
$urlRouterProvider.otherwise("/");
})
But i am getting
Error: Could not resolve 'register' from state ''
exception. From all other examples i checked, that route config look fine. But it's not working some reason.
I suspect that my routes are not loaded, i put console.log, debugger and alert functions inside my .config function but none of them are executed.
Is there any way to list all loaded routes from ui-router?
Disclaimer: I would like to give you a hint. If this answer would not suite, let me know, will delete that. Because obviously, my previous answser is not working for you: Could not resolve '...' from state ''
What could be the source of the error message like this?
Could not resolve 'register' from state ''
There are only two options.
File with the state definition is not loaded. (Could be checked with some console.log stuff)
File represents module which is properly loaded, but not referenced by the root ng-app="myApp"
I would strongly expect, that the second case is the issue. Here is a BROKEN example, which will (after button click) show the error: Could not resolve 'register' from state ''
What happened. There is a file called "otherStates.js", which is loaded into index.html
...
// see the scripts loaded above
// below is the root module name "myApp"
...
The "otherStates.js" declares module "myStates", which contains all the states:
// will always be in a console
// because file is loaded
console.log("file is accessed");
angular
.module('myStates', ['ionic'])
.config(function($stateProvider, $urlRouterProvider){
// never reach console, because this module is not used
console.log("module myStates is not referenced in myApp ");
console.log("these lines will never be trigerred");
$stateProvider
.state('app', {
abstract: true,
...
})
....
So Why we do get that error? How to fix that?
Simply, in script.js, (where is our root module) we have this declaration:
var app = angular.module('myApp', ['ionic'])
And that is not enough. We need to also reference the myStates. So we must change it like this and all will work
var app = angular.module('myApp', ['ionic', 'myStates'])
Check this broken example
Related
I have looked at the other solutions. They basically state that you should be sure to include a call to the x.state.js file from the index.html file. I have that.
When I change the name of the state the error gets updated. So if I had a state called "mystate" and called it from a button's ui-sref it would say "Could not resolve 'mystate' from state 'home'. If I changed the ui-sref and the state name to "yourstate" the error message changes to "Could not resolve 'yourstate' from state 'home'. So I don't know where else to look.
Update with some code that I really just took from a website tutorial to test this out but here goes:
myupload.state.js
'use strict';
angular.module('myApp')
.config(function ($stateProvider){
$stateProvider
.state('upload',{
parent: 'home',
url: 'upload',
data: {
roles: [],
pageTitle: 'Upload Your Files',
displayName: 'Upload Your Files'
},
views: {
'content#': {
templateURL: 'my/path/myupload/upload.html',
controller: 'UploadController'
}
},
resolve: {}
})
}
);
There is a upload.directive.js file in the same directory. A uploadcontroller.js file in that same directory. And a upload.html file.
In the 'home' page HTML file I have a button with the following syntax. When clicked it is supposed to route you to the above page for a file upload.
<button class='btn' ui-sref='upload()'>
There are no other errors to troubleshoot with.
I have a couple of other states to look at and this one looks just like those.
Those buttons/states work.
Where else should I be looking?
My problem turned out to be needed security code specific to the application I am working on (inherited) in the resolve: section of the state clause. Once I added that the button worked just fine.
How can I get the ui router in angular to resolve to the correct state?
I'm trying to run an angular application inside a subdirectory of my site but can't get the app.route.js to properly route the request. I set the "otherwise" directive to "dang" so that it's obvious to me if it misses.
I'm trying to reach the application at a URL like:
example.us/search
I'm landing at the proper directory in the url because I get routed to example.us/search/#!/dang
The file location for the content (ie app/partials/search.html) is a subfolder of the search folder, which is inside the root folder.
angular.module('example.usApp')
.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$urlRouterProvider.otherwise('dang');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/partials/search.html',
controller: 'searchController',
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
insertBefore: '#ng_load_plugins_before',
files: [
'app/services/searchService.js',
'app/controllers/searchController.js',
'css/home.css'
]
});
}]
}
})...
EDIT:
The files[] array above does not get loaded obviously because the url doesn't match. I'm having hard time loading any change because the browser thinks I'm trying to angular route and is not reloading the page at the URL I specify. When I type a change in the url bar and hit enter the URL is rewritten without making a request to the server.
EDIT2:
In answer to a question, yes oclazyload.js is loaded. From the developer tools you can see that all of the following are loaded in this order:
search/
bootstrap.min.css
style.css
angular.min.js
angular-ui-router.min.js
angular-local-storage.min.js
ocLazyLoad.min.js
angular-cookies.min.js
jquery.easing.1.3.js
angular-payments.min.js
app.js
app.constants.js
LoginService.js
app.route.js
bootstrap.min.js
app.constants.js
LoginService.js
app.route.js
bootstrap.min.js
This state is abstract so you will never hit it. I am assuming your main single page is Index.html right? If so change to this:
angular.module('example.usApp')
.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$urlRouterProvider.otherwise('dang');
$stateProvider
.state('home', {
url: '/search',
templateUrl: 'app/partials/search.html',
controller: 'searchController',
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
insertBefore: '#ng_load_plugins_before',
files: [
'app/services/HomeService.js',
'app/controllers/HomeMainController.js',
'css/home.css'
]
});
}]
}
})...
The url should be example.us/#/search.
I need some help. I am new with angular.
I want to go to another state in another folder from current folder.
For example :
I have two different folder , A and B. They have config.ui-routing
But the problem is , how to $state.go to Folder A when i declared the $state.go in folder B.
Here is my code:
//UI routing config in folder B
$stateProvider
.state('login',{
url:"/login",
views:{
"main":{templateUrl: prefixPath+"login.html"}
},
resolve: loadSequence('loginController')
})
while my controller location folder is in folder A.
Here is my controller code:
// state in folder A Controller
$state.go('login');
The errors said:
Error: Could not login' from state
Can you guys help me ?
This very often happens if we declare two modules without creating dependency.
There is a broken example
The login module in login.js:
var app = angular
.module('MyLoginPart', [
'ui.router'
])
.config(['$stateProvider',
function ($stateProvider) {
// States
$stateProvider
.state('login', {
url: "/login",
templateUrl: 'tpl.html',
})
}
])
And this is the main module (used as ng-app)
var app = angular
.module('MyApp', [
// missing dependency on above
'ui.router'
])
when we navigate to the 'login' state, we get:
Error: Could not resolve 'login' from state ''
There is a fixed, working example, where we declare dependency:
var app = angular
.module('MyApp', [
'MyLoginPart',
'ui.router'
])
And this is working:
<a ui-sref="login">
i do not have any idea, actually i do not understand Sir Radin's answer, so i try to make the hardcode,
window.location.href = '../admin/login';
I am trying to create a link in my template angularjs by doing something like:
<a ng-href="/#!/content/[[value.id]]">[[key]]</a>
But I am wondering myself if is possible do something like symfony2 does, example:
routing.yml
home_redirect:
path: /
defaults:
_controller: FrontendBundle:Controller:function
path: /home
permanent: true
options:
expose: true
And using it in your twig template by doing:
one link to home
That is really, really helpful because I don't have to "hardcode" all my routes.
To ensure a proper routing, you can use ui-router.
Here is an exemple on plunker
How this works :
1 - Follow the installation guide on their github
2 - Write your state definition :
app.config(function($stateProvider, $urlRouterProvider){
//If no route match, you'll go to /index
$urlRouterProvider.otherwise('/index');
//my index state
$stateProvider
.state('index', {
url: '/index',
templateUrl: 'index2.html',
controller: 'IndexCtrl'
})
//the variable state depending on an url element
.state('hello', {
//you will be able to get name with $stateParams.name
url: '/hello/:name',
templateUrl: 'hello.html',
controller: 'HelloCtrl'
})
});
3 - Write links by their state name :
//add this directive to an html element
//This will go to /index
ui-sref="index"
//This will go to /hello/
ui-sref="hello"
//This will go to /hello/ben
ui-sref="hello({name:'ben'})"
//This will go to /hello/{myname}
ui-sref="hello({name:myname})"
4 - Get the param into your controller :
//inject $stateParams
app.controller('HelloCtrl', function($scope, $stateParams){
$scope.controller = "IndexCtrl";
//get the param name like this
$scope.name = $stateParams.name;
});
Hope it helped. Also keep in mind the ui-router got some really powerful tools such as resolve and nested state/view. You'll probably need theses now or later.
PS : If the plunker don't work, just fork it and save again.
You could do this :
'use strict';
angular.module('AngularModule')
.config(function ($stateProvider) {
$stateProvider
.state('YourStateName', {
url: '/your/url',
views: {
'aViewName': {
templateUrl:'views/components/templates/yourTemplate.html',
controller: 'YourController'
}
},
resolve: {
}
});
});
// then in your controller
angular.module('AngularModule')
.controller('MyController',function($scope, $state){
$scope.goTo = function(){
$state.go('YourStateName');
}
}
);
//in your html make sure the <a> tag is in scope with the 'MyController'
<a ng-click='goTo'>[[key]]</a>
or
you can just do this :
<a ng-href="/your/url"></a>
that way you bypass the controller you can still put logic in the controller that was specified in the state
I'm working on multiple angular apps that I have to nest (like a web portal). My main app got a router where I define some states.
$stateProvider
.state('state1', {
url: "/state1",
views: {
"area": { templateUrl: "area1.html"}
}
});
And my other apps work like this too. I'd like to make a specific script that would be called if the state called in the main app is unknown by the main router, so I could to get the url and views in another router.
For example, if the main app call the state state2 that is unknown by my first router, it will look for it in a second router which define it.
I looked for a solution using the resolve option of ui-router but I'm not sure it could work this way.
Feel free to ask for more details. I did my best to make it short and understandable :)
Documentation on Otherwise()
app.config(function($urlRouterProvider){
// if the path doesn't match any of the urls you configured
// otherwise will take care of routing the user to the specified url
$urlRouterProvider.otherwise('/index');
// Example of using function rule as param
$urlRouterProvider.otherwise(function($injector, $location){
... some advanced code...
});
})
Hope this code help you as your need:
var myApp = angular.module('myApp', []);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/state1');
$urlRouterProvider.when("", "/state1");
$stateProvider
.state('state1', {
url: '/state1',
templateUrl: 'state1.php'
}
})
.state("state2", {
url: "/state2",
templateUrl: 'state2.php'
});
});