AngularJS la interfaz de usuario del router :No se puede resolver el___ del estado de ___ de Error

Question

Estoy siguiendo a lo largo de este año de edad de la interfaz de usuario del router tutorial http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/ y me da el siguiente error:

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

Yo soy la instalación de este tutorial app en mi Express.JS el programa de instalación y estoy usando Jade para mis plantillas.

Todas las plantillas Jade parece ser la representación correctamente, pero me doy cuenta de que no hay href creado por Opiniones De Los Usuarios (settings/quotes URL) ui-sref enlace.Tal vez hay una pista de allí.Usted puede ver esto en la siguiente captura de pantalla:

Voy a publicar todos los archivos de claves a continuación.

---

AngularJS Archivos

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 Plantillas

diseño.jade

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

los ajustes.jade

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

la configuración de los detalles.jade

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

configuración de comillas.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 Servidor

server.js

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

var env = proceso.env.NODE_ENV = proceso.env.NODE_ENV || 'desarrollo';

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 + '...');

Answer 1

Usted está casi allí, la interfaz de usuario del router necesita este:

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

esto dice ui-sref vaya a estado llamado 'settings.details', en caso de que tendría que pasar parámetros, es muy similar a las de $estado.vaya...

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

si se quiere utilizar una url definida para los estados, que todavía se puede, pero debemos utilizar href

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

si el niño url es una cadena vacía como en nuestro caso

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

Consulte la documentación:

interfaz de usuario de la sref

o nuevo doc (citar)

ui-sref='stateName' - Vaya a estado, no params. 'stateName' puede ser cualquier validez absoluta o relativa del estado, siguiendo las mismas reglas de sintaxis como $estado.go()