I have my index.php page with a ui-sref link as follows
<a ui-sref="storysolo({ storyId: headline.nid })">
I have my main js file loading the angular code as follows
var rebelFleet = angular.module("CougsApp", ["ui.router","ngAnimate", "ui.bootstrap", "ngSanitize", "slick","CougsApp.headlines","CougsApp.story","CougsApp.recentstories" ]);
rebelFleet.config(function($stateProvider) {
// For any unmatched url, redirect to /state1
$stateProvider
.state('index', {
url: "",
views: {
"navViewPort": { templateUrl: '/components/nav/nav.html'
},
"contentViewPort": {
templateUrl: '/components/headlines/headlines.html',
controller: "headlinesCtrl"
},
"eventsViewPort": { templateUrl: '/components/scroller/scroller.html' },
"bottomContentViewPort": { templateUrl: '/components/recentstories/recentstories.html',
controller: "recentstoriesCtrl"
},
"rightsideViewPort": { templateUrl: '/components/social/social.html' },
"footerViewPort": { templateUrl: '/components/footer/footer.html' }
}
})
Then I have my story.js file trying to load with it's own routing. as follows
var ywing = angular.module('CougsApp.story', ["ui.router"]);
ywing.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('storySolo', {
url: '/story/:storyId',
views: {
"navViewPort": { templateUrl: '/components/nav/nav.html'
},
"contentViewPort": {
templateUrl: '/components/story/story.html',
controller: "storyCtrl"
},
"footerViewPort": { templateUrl: '/components/footer/footer.html' }
}
})
});
So when I load my page and click on the ui-sref link I get this error
Could not resolve 'storysolo' from state 'index'
my order of files being loaded is as follows
angular.js,
angular-sanitize.js,
angular-ui-router.js,
rebelFleet.js, (the main js file)
story.js
I'm guessing I'm doing something wrong with the way the routes are being loaded and UI-Router hates it. Any help would be much appreciated.
There is a working example
Believe or not, it is very simple - it is about case sensitivity. State names must fit on the 1) definition as well on the 2) call side
// small solo
<a ui-sref="storysolo({ storyId: headline.nid })">
// capitalized Solo
$stateProvider.state('storySolo', {...
so just use one or the other, e.g.:
// not small solo
<a ui-sref="storySolo({ storyId: headline.nid })">
// the same name here
$stateProvider.state('storySolo', {...
Check the example here
Related
I am using angularjs ui-router for a cordova app. I am trying to reuse a ui-view template (left-panel) for multiple states. This ui-view is for almost all the states except one state. I tried to refer many tutorials but still not able to implement what I want. Here is my code in app.js:
var angularApp = angular.module('angularApp', [
'ui.router',
]);
angularApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('root', {
abstract: true,
views: {
'left-panel': {
templateUrl: 'templates/common-left-panel.html',
},
}
})
.state('root.home', {
url: '/',
views: {
'container#': {
templateUrl: 'templates/home.html',
}
}
})
.state('root.settings', {
url: 'settings',
views: {
'container#': {
templateUrl: 'templates/settings.html',
}
}
})
.state('root.category', {
url: 'category/:catId',
views: {
'container#': {
templateUrl: 'templates/category-nodes.html',
controller: 'ListCatNodesCtrl'
}
}
})
});
This is in index.html
<div ui-view="left-panel"></div>
<a ui-sref="root.settings">Settings</a>
<div ui-view="container"></div>
With this code, the home page is rendered properly. But when I click on the settings link, there isn't any change in screen or url. In rendered DOM, I get <a ui-sref="root.settings" href="#settings">Settings</a>. The same holds for category page as well. Basically I am developing an android app using cordova and angularjs. Loads of thanks in advance.
I am trying to use ui-router on my project.
Core module:
var core = angular.module('muhamo.core', ['angular-loading-bar', 'anguFixedHeaderTable', 'ui.router']);
Tracking module:
var app = angular.module(TRACKING_MODULE_NAME, ['muhamo.core']);
app.config(Configure);
Configure.$inject = ['$stateProvider', '$urlRouterProvider'];
function Configure($stateProvider, $urlRouterProvider) {
$stateProvider.state('contacts', {
templateUrl: '/static/partials/employee/employee-edit',
controller: function () {
this.title = 'My Contacts';
},
controllerAs: 'contact'
});
$urlRouterProvider.otherwise("/contacts");
console.log($stateProvider);
}
and the html definition :
<div ui-view></div>
It works fine if i click to a ui-sref link. But on page load it does not load the default view "/contacts". Am I missing something here?
UPDATE
It works after adding missing "url" property. But now I've another problem, if I extend my implementation like that :
function Configure($stateProvider, $urlRouterProvider) {
$stateProvider.state('employees', {
abstract: true,
url: "/employees"
/* Various other settings common to both child states */
}).state('employees.list', {
url: "", // Note the empty URL
templateUrl: '/static/partials/employee/employee-list'
});
$urlRouterProvider.otherwise("/employees");
console.log($stateProvider);
}
also with more states, ui-view is not rendering.
There are two fishy things in your implementation. You out an empty url and your default route is abstract. Try my changes below.
function Configure($stateProvider, $urlRouterProvider) {
$stateProvider.state('employees', {
abstract: true,
url: "/employees"
/* Various other settings common to both child states */
}).state('employees.list', {
url: "/list", // Note the empty URL
templateUrl: '/static/partials/employee/employee-list'
});
$urlRouterProvider.otherwise("/employees/list");
console.log($stateProvider);
Cheers
Yes. You need to set the state.url to '/contacts'
$stateProvider.state('contacts', {
url: '/contacts',
templateUrl: '/static/partials/employee/employee-edit',
controller: function () {
this.title = 'My Contacts';
},
controllerAs: 'contact'
});
It seems you forgot to set the url parameter, e.g.:
$stateProvider.state('contacts', {
url: "/contacts",
...
}
I try to create an app with angular, and somehow the child state in not loading.
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url : "/",
templateUrl: "/admin/home/"
})
.state('users', {
url : "/users/",
templateUrl: "/admin/users",
controller : function ($stateParams) {
console.log($stateParams);
console.log("users");
}
})
.state('users.new', {
url : "^/users/user/",
templateUrl: "/admin/users/new",
controller : function () {
console.log("users.new");
}
})
.state('users.user', {
url : "^/users/user/:uuid",
templateUrl: function ($stateParams) {
console.log($stateParams);
return "/admin/users/" + $stateParams.uuid
},
controller : function () {
console.log("users.user");
}
});
When I visiting the page
/users/user/55d8b1c706387b11480d60c1
I see the request to load the page, but only the "users" controller got executed.
This problem appears only with child states, switching between parent state working without problems.
I Using the latest versions of angular and ui-routes.
any ideas?
Please read this DOC
You mistake is in hierarchy. Child states use parent template as root and try find nested <ui-view>
You may add abstract state user without url, with empty template <ui-view></ui-view>, for nested viws. Then rename user, to E.G. user.index, it works for me
1st (It may works)
$stateProvider
.state('home', {
url : "/",
templateUrl: "/admin/home/"
})
.state('users', {
template: "<ui-view></ui-view>",
})
.state('users.index', {
url : "/users/",
templateUrl: "/admin/users",
controller : function ($stateParams) {
console.log($stateParams);
console.log("users");
}
})
.state('users.new', {
url : "^/users/user/",
templateUrl: "/admin/users/new",
controller : function () {
console.log("users.new");
}
})
.state('users.user', {
url : "^/users/user/:uuid",
templateUrl: function ($stateParams) {
console.log($stateParams);
return "/admin/users/" + $stateParams.uuid
},
controller : function () {
console.log("users.user");
}
});
2nd way is USE absulutly named views E.G.
views: {
"": { templateUrl: 'pages/menu.html' }, // relative noName view
"header": { templateUrl: "pages/header.html"}, //relative named view
"content#": { // Absolute name
template: "<ui-view></ui-view>",
controller: 'AuthController'}
}
I am creating a web app to help students in science, history and math. When you first land on the site I have a home/landing page. When you click get started I route to /exam/instructions. Each of my steps instructions, math and science our templates that I load into the ui-view="exam-detail". Currently the whole ui-view loads when I navigate to and from instructions through sciences. Ideally I simply want an area for pagination and an area for the subject matter and only want the ui-view="exam-detail" to update with the correct template.
I have not used UI-Router at all and any assistance would be greatly appreciated.
index.html
<div ui-view></div>
state-exam>exam.html
<div class="state-exam">
<nav ui-view="exam-pagination"></nav>
<section ui-view="exam-detail"></section>
</div>
route.js
(function() {
'use strict';
angular
.module('studentPortal')
.config(routeConfig);
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.state('exam', {
url: '/exam/:step',
abstract: true,
templateUrl: 'app/state-exam/exam.html',
controller: 'ExamController',
controllerAs: 'examController',
})
.state('exam.instructions', {
url: '/instructions',
views: {
'exam-pagination':{
templateUrl: 'app/state-exam/exam-pagination.html'
},
'exam-detail' : {
templateUrl: 'app/state-exam/exam-instructions.html'
}
}
})
.state('exam.math', {
url: '/math',
views: {
'exam-pagination':{
templateUrl: 'app/state-exam/exam-pagination.html'
},
'exam-detail' : {
templateUrl: 'app/state-exam/exam-math.html'
}
}
});
$urlRouterProvider.otherwise('/');
}
})();
There is a working plunker
There is a similar Q & A in fact, with working plunker:
Angular UI Router - Nested States with multiple layouts
Solution here, is to move the static view from child to parent. It won't be reloaded for each child (view is reloaded only if parent state is changed). We will use absolute naming (see included links for more details)
So this is the code adjustment
.state('exam', {
url: '/exam/:step',
abstract: true,
// the root view and the static pagination view
// will be defined here, so we need views : {}
views: {
'':{
templateUrl: 'app/state-exam/exam.html',
controller: 'ExamController',
controllerAs: 'examController',
},
// absolute naming targets the view defined above
'exam-pagination#exam':{
templateUrl: 'app/state-exam/exam-pagination.html'
},
}
})
.state('exam.instructions', {
url: '/instructions',
views: {
// 'exam-pagination':{}, // defined in parent
'exam-detail' : {
templateUrl: 'app/state-exam/exam-instructions.html'
}
}
})
.state('exam.math', {
url: '/math',
views: {
// 'exam-pagination':{}, // defined in parent
'exam-detail' : {
templateUrl: 'app/state-exam/exam-math.html'
}
}
});
Also check this to get more details about absolute view naming
Angular UI router nested views
Angular-UI Router: Nested Views Not Working
The working example is here
I know it sounds counter-intuitive, but please hear my situation out. I have a "topbar" view and a "main" view. The topbar has no specific data associated with any one particular view, but it can change depending on the user's login status. This really helps to keep that part of my website robust, however it comes at a terrible cost: When I want to use "resolve", the topbar goes completely missing. I understand the logic behind this, but I am wondering if there is anyway to target which view to actually block with resolve?
If I could only block my "main" view, but allow my "topbar" view to render, then that would be perfect. I also don't want to avoid using resolve to avoid the main view flashing nonsense when the view is first loaded.
What my routes look like:
$stateProvider..state("about", {
url: "/about",
views: {
"topbar": {
templateUrl: "/app/templates/topnav.html"
},
"main": {
templateUrl: "/app/home/about.html",
controller: ["$rootScope", function ($rootScope) {
$rootScope.pageTitle = "About";
}]
}
}
}).state("courses", {
url: "/courses",
views: {
"topbar": {
templateUrl: "/app/templates/topnav-loggedin.html"
},
"main": {
templateUrl: "/app/courses/courses.html",
controller: "coursesController"
}
},
resolve: {
currentCourse: ["$http", function($http) {
// load course
}]
}
});
I'd probably make a parent, abstract state for all states requiring the logged-in topbar template. For example
.state('loggedin', {
abstract: true,
views: {
topbar: {
templateUrl: '/app/templates/topnav-loggedin.html'
}
}
}).state('courses', {
parent: 'loggedin', // or name the state 'loggedin.courses'
url: '/courses',
views: {
'main#': { // the "main" view in the root state
templateUrl: '/app/courses/courses.html',
controller: 'coursesController'
}
},
resolve: { ... }
});