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 ()