AngularJS ui-router : Could not resolve___ from state ___ Error

匿名 (未验证) 提交于 2019-12-03 02:50:02

问题:

I am following along on this year old ui-router tutorial http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/ and I'm getting the following error:

Error: Could not resolve 'settings/quotes' from state 'settings' 

I am fitting this tutorial app into my Express.JS setup and I'm using Jade for my templates.

All the Jade templates seem to be rendering properly but I am noticing that there is no href being created for the User Quotes (settings/quotes URL) ui-sref link. Maybe there is a clue there. You can see this in the below screenshot:

I will post all key files below.


AngularJS Files

app.js

'use strict';  var app = angular.module('app', ['ui.router']);  app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {        $urlRouterProvider.otherwise('/');              var settings = {                 name: 'settings',                 url: '/settings',                 abstract: true,                 templateUrl: '/partials/settings',                 controller: 'SettingsController'             };              var details = {                 name: 'settings.details',                 parent: settings,                 url: '',                 templateUrl: '/partials/settings-details'             };              var quotes = {                 name: 'settings.quotes',                 parent: settings,                 url: '/quotes',                 templateUrl: '/partials/settings-quotes'             };              $stateProvider                 .state(settings)                 .state(details)                 .state(quotes); }]) .controller('SettingsController', ['$scope', function($scope) {     $scope.user = {         name: "Bob Loblaw",         email: "boblaw.bob@loblaw.org",         password: "semi secret",         quotes: "I am making it happen now!"     }; }]); 

Jade Templates

layout.jade

doctype html  html     include head     body(ng-app='app')         p From the layout.jade file         <div ui-view></div>         include scripts 

settings.jade

ul     li Settings     li          a(ui-sref="settings") User Details     li          a(ui-sref="settings/quotes") User Quotes     div(ui-view="") 

settings-details.jade

h3 {{user.name}}\'s Quotes hr div     label Quotes         textarea(type="text", ng-model="user.quotes") button(ng-click="done()") Save 

settings-quotes.jade

h3 {{user.name}}\'s Details hr div     label Name         input(type="text", ng-model="user.name") div     label Email         input(type="text", ng-model="user.email") button(ng-click="done()") Save 

ExpressJS Server

server.js

var express = require('express'), mongoose = require('mongoose'), morgan = require('morgan'), bodyParser = require('body-parser'), path = require('path'); 

var env = process.env.NODE_ENV = process.env.NODE_ENV || 'development';

var app = express();

// configuration app.set('views', path.join(__dirname, '/app/views')); app.set('view engine', 'jade'); app.use(morgan('dev')); // logs every request to console app.use(bodyParser()); // pull information from html in POST app.use(express.static(__dirname + '/public'));  // connect to mongodb via mongoose if(env === 'development') {   mongoose.connect('mongodb://localhost/3lf'); } else {   mongoose.connect('mongodb://maxmythic:mongolab3lf@ds033307.mongolab.com:33307/3lf'); }  var db = mongoose.connection; db.on('error', console.error.bind(console, 'connection error ...')); db.once('open', function(callback) {   console.log('3lf db is open for business ...'); });  // create mongoose schema and retrieve data var messageSchema = mongoose.Schema({message: String}); var Message = mongoose.model('Message', messageSchema); var mongoMessage; Message.findOne().exec(function(err, messageDoc){   mongoMessage = messageDoc.message; });  // define routes // make sure to coordinate client side and server side routes app.get('/partials/:partialPath', function(req, res) {   res.render('partials/' + req.params.partialPath);  });  app.get('*', function(req, res) {   res.render('index', {     mongoMessage: mongoMessage   }); });   var port = process.env.PORT || 3030; app.listen(port); console.log('Listening on port ' + port + '...'); 

回答1:

You are almost there, ui-router needs this:

<a ui-sref="settings.details">... 

this says ui-sref navigate to state named 'settings.details', in case we would need to pass params, it is very similar like $state.go...

<a ui-sref="settings.details({param1:value1, param2:value2})">... 

if we want to use url defined for states, we still can, but we must use href

<a href="#/settings">...to get to details <a href="#/settings/quotes">...to get to quotes 

if the child url is empty string like in our case

     var settings = {             name: 'settings',             url: '/settings',             abstract: true,             ...         };       var details = {             name: 'settings.details',             parent: settings,             url: '',             ...         };      var quotes = {             name: 'settings.quotes',             parent: settings,             url: '/quotes',             ...         }; 

See documentation:

ui-sref

or new doc (cite)

ui-sref='stateName' - Navigate to state, no params. 'stateName' can be any valid absolute or relative state, following the same syntax rules as $state.go()



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!