AngularJS UI路由器：无法从状态resolve___ ___错误 [英] AngularJS ui-router : Could not resolve___ from state ___ Error

查看：4655
本文介绍了AngularJS UI路由器：无法从状态resolve___ ___错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对这个岁的UI路由器教程沿如下<一个href=\"http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/\">http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/而我得到了以下错误：

 错误：无法从国家的设置解决设置/引号'

我配合本教程的应用程序到我的前妻press.JS设置，我用玉为我的模板。

所有翡翠模板似乎是正确的渲染，但我注意到，没有的href 为用户行情正在创建（设置/报价 URL） UI-SREF 链接。也许有一个线索那里。您可以在下面的截图中看到这一点：

下面我会发布所有重要文件。

AngularJS文件

app.js 

 使用严格的;VAR应用= angular.module（'应用'，['ui.router']）;的app.config（['$ stateProvider'，'$ urlRouterProvider'，函数（$ stateProvider，$ urlRouterProvider）{      $ urlRouterProvider.otherwise（'/'）;            VAR设置= {
                名称：设置，
                网址：/设置
                摘要：真实，
                templateUrl：'/谐音/设置
                控制器：'SettingsController
            };            VAR细节= {
                名称：'settings.details'，
                父：设置，
                网址：''，
                templateUrl：'/谐音/设置的细节
            };            VAR报价= {
                名称：'settings.quotes'，
                父：设置，
                网址：'/引号'，
                templateUrl：'/谐音/设置引号
            };            $ stateProvider
                .STATE（设置）
                .STATE（详细信息）
                .STATE（引号）;
}]）
.controller（'SettingsController'，['$范围'，函数（$范围）{
    $ scope.user = {
        名称：鲍勃Loblaw
        电子邮件：boblaw.bob@loblaw.org
        密码：半秘密，
        引述：我现在做它发生！
    };
}]）;

玉模板

layout.jade 

  DOCTYPE HTML
HTML
    包括头
    体（NG-应用='应用'）
        p从layout.jade文件
        ＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;
        包括脚本

settings.jade 

  UL
    李设置
    里
        一个（UI-SREF =设置）用户详细信息
    里
        一个（UI-SREF =设置/引号）用户行情
    DIV（UI视图=）

设置 - details.jade 

  H3 {{user.name}} \\的行情
小时
DIV
    标签行情
        textarea的（类型=文本，NG-模型=user.quotes）
按钮（NG-点击=完成（））保存

设置 - quotes.jade 

  H3 {{user.name}} \\'s详情
小时
DIV
    标签名称
        输入（类型=文本，NG-模型=user.name）
DIV
    标签电子邮件
        输入（类型=文本，NG-模型=user.email）
按钮（NG-点击=完成（））保存

防爆pressJS服务器

server.js 

  VAR前preSS =要求（'前preSS），
猫鼬=要求（'猫鼬'），
摩根=要求（'摩根'），
bodyParser =要求（'身体解析器），
PATH =要求（'路径'）;

变种的env = process.env.NODE_ENV = process.env.NODE_ENV || 发展;

VAR应用=前preSS（）; 

  //配置
app.set（'意见'，path.join（__目录名，'/应用/视图'））;
app.set（视图引擎'，'玉'）;
app.use（摩根（'开发'））; //记录每个请求安慰
app.use（bodyParser（））; //在POST从HTML提取信息
app.use（如press.static（__目录名称+'/公'））;//通过连接到猫鼬的MongoDB
如果（ENV ===发展）{
  mongoose.connect（'的MongoDB：//本地主机/ 3LF'）;
}其他{
  mongoose.connect（'的MongoDB：// maxmythic：mongolab3lf@ds033307.mongolab.com：33307 / 3LF'）;
}变种DB = mongoose.connection;
db.on（'错误'，console.error.bind（控制台，连接错误......'））;
db.once（开放，函数（回调）{
  的console.log（'3LF db是营业...'）;
}）;//创建猫鼬架构和检索数据
VAR messageSchema = mongoose.Schema（{消息：字符串}）;
VAR消息= mongoose.model（'信息'，messageSchema）;
VAR mongoMessage;
Message.findOne（）。EXEC（函数（ERR，messageDoc）{
  mongoMessage = messageDoc.message;
}）;//定义路线
//确保协调客户端和服务器端的路由
app.get（'/谐音/：partialPath'，函数（REQ，RES）{
  res.render（'谐音/+ req.params.partialPath）;
}）;app.get（'*'，函数（REQ，RES）{
  res.render（'指数'，{
    mongoMessage：mongoMessage
  }）;
}）;
VAR端口= process.env.PORT || 3030;
app.listen（端口）;
的console.log（'侦听端口+端口+'...'）;


解决方案

您是几乎没有，UI的路由器需要这样的：

 ＆LT;一个UI的SREF =settings.details＆GT; ...

这是 UI-SREF 导航到国家命名为'settings.details ，在情况下，我们需要通过参数，可以是像$ state.go ...

非常相似

 ＆LT;一个UI的SREF =settings.details（{参数1：值1，参数2：值2}）＆GT; ...

如果我们要使用的状态，我们仍然可以定义URL，但我们必须HREF使用

 ＆LT; A HREF =＃/设置＆GT; ...得到细节
＆LT; A HREF =＃/设置/引号＆GT; ...去报价

如果孩子url为空字符串，就像在我们的案例

  VAR设置= {
            名称：设置，
            网址：/设置
            摘要：真实，
            ...
        };     VAR细节= {
            名称：'settings.details'，
            父：设置，
            网址：''，
            ...
        };
     VAR报价= {
            名称：'settings.quotes'，
            父：设置，
            网址：'/引号'，
            ...
        };

请参阅文档：

UI的SREF

或新文件的（引用）的


  

UI-SREF ='Statename的 - 导航到状态，没有PARAMS。 'Statename的可以是任何有效的绝对或相对的状态，遵循相同的语法规则$ state.go（）


I am following along on this year old ui-router tutorial http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/ and I'm getting the following error:

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

I am fitting this tutorial app into my Express.JS setup and I'm using Jade for my templates.

All the Jade templates seem to be rendering properly but I am noticing that there is no href being created for the User Quotes (settings/quotes URL) ui-sref link. Maybe there is a clue there. You can see this in the below screenshot:

I will post all key files below.

AngularJS Files

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 Templates

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

ExpressJS Server

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 || 'development';

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

解决方案

You are almost there, ui-router needs this:

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

this says ui-sref navigate to state named 'settings.details', in case we would need to pass params, it is very similar like $state.go...

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

if we want to use url defined for states, we still can, but we must use href

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

if the child url is empty string like in our case

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

See documentation:

ui-sref

or new doc (cite)

ui-sref='stateName' - Navigate to state, no params. 'stateName' can be any valid absolute or relative state, following the same syntax rules as $state.go()

这篇关于AngularJS UI路由器：无法从状态resolve___ ___错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆