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';
Related
I started my first angular application, and am running into an issue where my "home" module isn't working because of a dependency issue. I don't see any dependency missing that I would need. I am using $stateProvider, and $urlProvider, but I am injecting that into the configuration for the home module, so I'm not sure where the problem would lie ?
Config.$inject = ["$stateProvider", "$urlRouterProvider"];
angular.module('home', []).config(Config)
function Config($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/login',
templateUrl: './views/login.html'
})
}
angular.module('home').controller('loginCtrl', function($scope){
$scope.helloWorld = function(){
console.log("This works!")
}
})
The consoled error:
[$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=home&p1=Error%3A%20…
Since "$stateProvider" and "$urlRouterProvider" providers are not part of the core AngularJS module, you need to inject modules, that have this provides into your home module definition. As far as I know, $stateProvider is from ui router module, so
angular.module('home', ['ui.router']).
...
Keep in mind that you also need to include this Javascript in your HTML file. It is in the angular-ui-router file
<script src="js/angular-ui-router.min.js"></script>
I am working on my AngularUI project. I need to implement some logic before state is loaded and configure on the result to move to another module in another state or to load state in current module.
Here is module definition:
angular.module("workPlan", ['damageEvent',
'ui.router',
'geomindCommon',
'templates',
'lookups',
'ngTouch',
'ui.grid',
'ui.grid.expandable',
'ui.grid.selection',
'ui.grid.pinning',
'ui.grid.resizeColumns',
'ui.bootstrap'
])
.config([
"$stateProvider",
"$urlRouterProvider",
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/MainPage");
$stateProvider
.state("workPlan", {
abstract: true,
url: "/",
template: "<ui-view></ui-view>"
})
.state("workPlan.list", {
url: "MainPage?myParam",
templateUrl: "app/workPlan/templates/workPlanList.tmpl.html",
controller: "workPlanListController",
controllerAs: "list",
resolve:{
filterParameters: [filterParametersResolver],
workPlans: ["workPlanServise", workPlanServiseResolver]
}
})
}
]);
At some point if myParam value from URL is true I need to use this service:
$state.go("list.clients");
to load list.clients state.
If myParam value from URL is false I need to load the current state(workPlan.list).
But I don't know were to implement the logic to check myParam value and move or to stay in appropriate state.
I guess it wrong to implement in resolve of the state.
So my question where do I implement described logic above?
Define url path instead of query parameter to determine which state to load.
So you can define url like MainPage/work-plan for 'workPlan.list' state and
MainPage/clients for 'list.clients' state.
I have an Angular-Meteor application working. I would like to package Angular templates and associated controller into a Meteor package, and inject these templates into my main application by adding that package.
What is best approach?
Update 2015-08-26 - I figured out how to add a template, documented below. But how to have a Meteor package inject the template's Angular controller into the base application?
A key tie-in is Angular UI-router.
I have a base application that includes my package named packageprefix:packagename. Inside this package I have my code in the root of the package folder:
myPackagedPage.ng.html - the Angular HTML template
myPackagedPage.js - the associated Angular controller
From my main application, I tried creating a route to my Angular template like so:
angular.module('parentModule',[
'angular-meteor',
'ui.router',
'angularify.semantic.sidebar'
])
.config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider){
console.log("app.js config!");
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: '/',
templateUrl: 'client/views/home/home.ng.html',
controller: 'HomeCtrl'
})
.state('myPackagedPage', {
url: '/myPackagedPage',
templateUrl: 'packageprefix_packagename/myPackagedPage.ng.html',
controller: 'MyPackagedPageCtrl'
})
;
$urlRouterProvider.otherwise('/');
}])
The application successfully finds the myPackagedPage.ng.html file and renders it. But how to add the controller?
I tried adding this in my package but the controller functions does not get called.
console.log("myPackagedPage.js loaded");
angular.module('parentModule')
.controller('MyPackagedPageCtrl', ['$scope',
function($scope){
console.log("MyPackagedPageCtrl");
}])
;
I get an error:
Argument 'MyPackagedPageCtrl' is not a function, got undefined
I have this working now. Here is the approach that works for me, to inject an Angular Controller + template in a Meteor package, into the containing application.
In my package.js, I have this
Package.onUse(function(api) {
api.versionsFrom('1.1.0.3');
api.use('angular:angular#1.4.4', 'client');
api.use("urigo:angular#0.9.3", 'client');
api.use("session#1.1.0", 'client');
//api.use('angularui:angular-ui-router#0.2.15', 'client');
api.addFiles('interests.js', 'client');
api.addFiles('interests.ng.html', 'client');
api.export("InterestsCtrl", "client")
});
Note you must export your controller, so that the parent application may access it.
In my package, called ramshackle:bigd-interests, I have these files at the root level: package.js, interests.ng.html, and interests.js. interests.js injects the Angular controller, the Anguilar UI-router route to the template, and a sidebar link into the parent application. It accomplishes this by using the Meteor Session. I played with other means of doing this but Session was the only thing that worked. Just be careful to properly scope your session variable names.
//add controllers
var controllers = Session.get("BIGD.controllers");
if (!controllers) controllers = {};
var interestsCtrlSpec = "'$scope', InterestsCtrl";
InterestsCtrl = function($scope){
console.log("InterestsCtrl running");
};
controllers.InterestsCtrl = interestsCtrlSpec;
Session.set("BIGD.controllers", controllers);
//add routes
var routes = Session.get("BIGD.routes");
if (!routes) routes = {};
routes.interests = {
url: '/interests',
templateUrl: 'ramshackle_bigd-interests_interests.ng.html',
controller: 'InterestsCtrl'
};
Session.set("BIGD.routes", routes);
//add sidebar links
//the key determines sorting order
var sidebar = Session.get("BIGD.sidebar");
if (!sidebar) sidebar = {};
sidebar["interests"] = {
url: '/interests',
templateUrl: 'ramshackle_bigd-interests_interests.ng.html',
controller: 'InterestsCtrl',
rank: 5
};
Session.set("BIGD.sidebar", sidebar);
var interestsItem = {label: 'Interests', link: '/interests', icon: "rocket"};
In my parent application's app.js , I dynamically loaded the controllers and routes from the session like this:
angular.module('bigdam',[
'angular-meteor',
'ui.router',
'angularify.semantic.sidebar',
'nvd3',
'leaflet-directive',
'ui.router.history'
])
.config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider){
//console.log("app.js config!");
$locationProvider.html5Mode(true);
//add a static state
$stateProvider
.state('home', {
url: '/',
templateUrl: 'client/views/home/home.ng.html',
controller: 'HomeCtrl'
});
//add the dynamic routes/states from other Meteor packages
for (var stateId in routes) {
var route = routes[stateId];
$stateProvider
.state(stateId, route);
}
$urlRouterProvider.otherwise('/');
}])
;
//Declare the controllers from plugins
for (var controllerId in controllers) {
var controllerSpec = controllers[controllerId];
var controllerSpecArray = eval("[" + controllerSpec + "]")
angular.module('bigdam').controller(controllerId, controllerSpecArray);
}
So now, when I create a new Meteor package, and follow the convention described above, its controllers, routes, and sidebar links get loaded into the main application.
Here is my code:
var app = angular.module('todoApp', ['ui.router', 'ngResource', 'ui.bootstrap']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: "/",
templateUrl: '/templates/index.html',
})
.state('signup', {
url: "/signup",
templateUrl: '',
})
}
]);
module.exports = app;
When i'm running in in browser, it show me an error:
ReferenceError: module is not defined
What i'm doing wrong ? How to properly define module ?
The console error message a few lines below the module is not defined gives a hint where the problem is:
Module 'ui.router' is not available! You either misspelled the module name or forgot to load it.
Check if you have included the file containing ui.router into your page (i.e. HTML template) so that Angular can load it.
Add the references to ui-router and bootstrap to make it work.
here is the working app
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