practicas - AngularJS ui-router: No se pudo resolver___ del estado___ Error

directivas angularjs

Question

Sigo este tutorial de ui-router de este año http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/ y recibo el siguiente error:

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

Estoy ajustando esta aplicación tutorial en mi configuración de Express.JS y estoy usando Jade para mis plantillas.

Todas las plantillas de Jade parecen estar representándose correctamente, pero estoy notando que no se está creando href para el enlace ui-sref Cotizaciones de usuario (URL de settings/quotes ). Tal vez hay una pista allí. Puedes ver esto en la siguiente captura de pantalla:

Voy a publicar todos los archivos clave a continuación.

Archivos 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!"
};
}]);

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

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

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

Answer 1

Ya casi llegas, ui-router necesita esto:

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

esto dice que ui-sref navega al estado llamado ''settings.details'' , en caso de que necesitemos pasar params, es muy similar a $ state.go ...

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

Si queremos usar la URL definida para los estados, todavía podemos, pero debemos usar href

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

Si la URL del niño 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'',
...
};

Ver documentación:

ui-sref

o nuevo doc (citar)

ui-sref=''stateName'' - Navega al estado, sin parámetros. ''stateName'' puede ser cualquier estado absoluto o relativo válido, siguiendo las mismas reglas de sintaxis que $ state.go ()