web-dev-qa-db-fra.com

AngularJS ui-router: Impossible de résoudre___ à partir de l'état ___ Erreur

Je suis le long de ce tutoriel ui-router de cet an http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/ et je reçois l'erreur suivante:

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

enter image description here

J'installe cette application de didacticiel dans ma configuration Express.JS et j'utilise Jade pour mes modèles.

Tous les modèles Jade semblent fonctionner correctement, mais je remarque qu'il n'y a pas de href en cours de création pour les Citations utilisateur (settings/quotes URL) ui-sref lien. Peut-être y a-t-il un indice. Vous pouvez le voir dans la capture d'écran ci-dessous:

enter image description here

Je publierai tous les fichiers clés ci-dessous.

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

Modèles 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

Serveur 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 || 'développement';

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 + '...');
angularjspugangular-ui-routermean-stack
26
user883807

Vous y êtes presque, ui-router a besoin de ceci:

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

cela dit ui-sref accédez à l'état nommé 'settings.details', au cas où nous aurions besoin de passer des paramètres, c'est très similaire à $ state.go ...

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

si nous voulons utiliser l'URL définie pour les états, nous pouvons toujours, mais nous devons utiliser href

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

si l'URL de l'enfant est une chaîne vide comme dans notre cas

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

Voir documentation:

i-sref

ou nouveau document (citer)

ui-sref='stateName' - Accédez à l'état, pas de paramètres. 'stateName' peut être n'importe quel état absolu ou relatif valide, suivant les mêmes règles de syntaxe que $ state.go ()

38
Radim Köhler