Подтвердить что ты не робот

Угловой JS-маршрутизатор: не удалось разрешить___ из состояния ___ Ошибка

Я следую этому учебнику ui-router в этом году http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/, и я получаю следующую ошибку:

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

enter image description here

Я устраиваю это учебное приложение в моей настройке Express.JS, и я использую Jade для своих шаблонов.

Все шаблоны Jade, похоже, правильно отображаются, но я замечаю, что для User Quotes (settings/quotes URL) ui-sref не создано href). Может быть, там есть ключ. Вы можете увидеть это на следующем скриншоте:

enter image description here

Я напишу все ключевые файлы ниже.


Файлы AngularJS

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: "[email protected]",
        password: "semi secret",
        quotes: "I am making it happen now!"
    };
}]);

Шаблоны Jade

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="")

Настройки-details.jade

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

Настройки-quotes.jade

h3 {{user.name}}\ 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.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 || 'Развитие';

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:[email protected]: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 + '...');
4b9b3361

Ответ 1

Вы почти там, ui-router нуждается в этом:

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

это говорит ui-sref перейти к состоянию с именем 'settings.details', в случае, если нам потребуется передать параметры, это очень похоже на $state.go...

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

если мы хотим использовать url, определенный для состояний, мы все еще можем, но мы должны использовать href

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

если дочерний url - пустая строка, как в нашем случае

     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',
            ...
        };

См. документацию:

ui-sref

или новый документ (cite)

ui-sref='stateName' - Перейдите к состоянию, без параметров. 'stateName' может быть любым действительным абсолютным или относительным состоянием, следуя тем же синтаксическим правилам, что и $state.go()