AngularJS-UI-Router:Konnte ___ aus Status ___ nicht auflösen. Fehler
-
21-12-2019 - |
Frage
Ich folge diesem ein Jahr alten UI-Router-Tutorial http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/ und ich erhalte die folgende Fehlermeldung:
Error: Could not resolve 'settings/quotes' from state 'settings'
Ich füge diese Tutorial-App in mein Express.JS-Setup ein und verwende Jade für meine Vorlagen.
Alle Jade-Vorlagen scheinen ordnungsgemäß gerendert zu werden, aber ich stelle fest, dass dies nicht der Fall ist href
erstellt für die Benutzerzitate (settings/quotes
URL) ui-sref
Verknüpfung.Vielleicht gibt es da einen Hinweis.Sie können dies im folgenden Screenshot sehen:
Ich werde alle wichtigen Dateien unten veröffentlichen.
AngularJS-Dateien
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-Vorlagen
layout.jade
doctype html
html
include head
body(ng-app='app')
p From the layout.jade file
<div ui-view></div>
include scripts
Einstellungen.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
Einstellungen-Zitate.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 || 'Entwicklung';
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 + '...');
Lösung
Sie haben es fast geschafft, der UI-Router benötigt Folgendes:
<a ui-sref="settings.details">...
das sagt ui-sref
Navigieren Sie zum genannten Bundesstaat 'settings.details'
, Falls wir Parameter übergeben müssten, ist es sehr ähnlich wie $state.go ...
<a ui-sref="settings.details({param1:value1, param2:value2})">...
Wenn wir für Staaten definierte URLs verwenden möchten, können wir dies immer noch tun, müssen aber href verwenden
<a href="#/settings">...to get to details
<a href="#/settings/quotes">...to get to quotes
wenn die untergeordnete URL wie in unserem Fall eine leere Zeichenfolge ist
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',
...
};
Siehe Dokumentation:
ui-sref
oder neues Dokument (zitieren)
ui-sref='stateName'
- Navigieren Sie zum Status, keine Parameter.'stateName'
kann jeder gültige absolute oder relative Zustand sein und den gleichen Syntaxregeln wie $state.go() folgen