AngularJS ui-router:无法解决___从状态___错误

前端之家收集整理的这篇文章主要介绍了AngularJS ui-router:无法解决___从状态___错误前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我跟着在今年的老ui路由器教程 http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/和我得到以下错误
  1. Error: Could not resolve 'settings/quotes' from state 'settings'

我将这个教程应用程序适合我的Express.JS设置,我使用Jade的我的模板。

所有的Jade模板似乎是正确的渲染,但我注意到没有为用户报价(设置/报价URL)ui-sref链接创建href。也许有一个线索。您可以在下面的屏幕截图中看到这一点:

我会把所有的关键文件下面。

AngularJS文件

app.js

  1. 'use strict';
  2.  
  3. var app = angular.module('app',['ui.router']);
  4.  
  5. app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
  6.  
  7. $urlRouterProvider.otherwise('/');
  8.  
  9. var settings = {
  10. name: 'settings',url: '/settings',abstract: true,templateUrl: '/partials/settings',controller: 'SettingsController'
  11. };
  12.  
  13. var details = {
  14. name: 'settings.details',parent: settings,url: '',templateUrl: '/partials/settings-details'
  15. };
  16.  
  17. var quotes = {
  18. name: 'settings.quotes',url: '/quotes',templateUrl: '/partials/settings-quotes'
  19. };
  20.  
  21. $stateProvider
  22. .state(settings)
  23. .state(details)
  24. .state(quotes);
  25. }])
  26. .controller('SettingsController',['$scope',function($scope) {
  27. $scope.user = {
  28. name: "Bob Loblaw",email: "boblaw.bob@loblaw.org",password: "semi secret",quotes: "I am making it happen now!"
  29. };
  30. }]);

玉模板

layout.jade

  1. doctype html
  2. html
  3. include head
  4. body(ng-app='app')
  5. p From the layout.jade file
  6. <div ui-view></div>
  7. include scripts

settings.jade

  1. ul
  2. li Settings
  3. li
  4. a(ui-sref="settings") User Details
  5. li
  6. a(ui-sref="settings/quotes") User Quotes
  7. div(ui-view="")

settings-details.jade

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

settings-quotes.jade

  1. h3 {{user.name}}\'s Details
  2. hr
  3. div
  4. label Name
  5. input(type="text",ng-model="user.name")
  6. div
  7. label Email
  8. input(type="text",ng-model="user.email")
  9. button(ng-click="done()") Save

ExpressJS服务器

server.js

  1. 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 || “发展”

var app = express();

  1. // configuration
  2. app.set('views',path.join(__dirname,'/app/views'));
  3. app.set('view engine','jade');
  4. app.use(morgan('dev')); // logs every request to console
  5. app.use(bodyParser()); // pull information from html in POST
  6. app.use(express.static(__dirname + '/public'));
  7.  
  8. // connect to mongodb via mongoose
  9. if(env === 'development') {
  10. mongoose.connect('mongodb://localhost/3lf');
  11. } else {
  12. mongoose.connect('mongodb://maxmythic:mongolab3lf@ds033307.mongolab.com:33307/3lf');
  13. }
  14.  
  15. var db = mongoose.connection;
  16. db.on('error',console.error.bind(console,'connection error ...'));
  17. db.once('open',function(callback) {
  18. console.log('3lf db is open for business ...');
  19. });
  20.  
  21. // create mongoose schema and retrieve data
  22. var messageSchema = mongoose.Schema({message: String});
  23. var Message = mongoose.model('Message',messageSchema);
  24. var mongoMessage;
  25. Message.findOne().exec(function(err,messageDoc){
  26. mongoMessage = messageDoc.message;
  27. });
  28.  
  29. // define routes
  30. // make sure to coordinate client side and server side routes
  31. app.get('/partials/:partialPath',function(req,res) {
  32. res.render('partials/' + req.params.partialPath);
  33. });
  34.  
  35. app.get('*',res) {
  36. res.render('index',{
  37. mongoMessage: mongoMessage
  38. });
  39. });
  40.  
  41.  
  42. var port = process.env.PORT || 3030;
  43. app.listen(port);
  44. console.log('Listening on port ' + port + '...');
你几乎在那里,ui路由器需要这:
  1. <a ui-sref="settings.details">...

这说ui-sref导航到名为“settings.details”的状态,以防万一我们需要传递参数,它非常类似于$ state.go …

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

如果我们想使用为状态定义的url,我们仍然可以,但是我们必须使用href

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

如果子url是空字符串,就像在我们的case

  1. var settings = {
  2. name: 'settings',...
  3. };
  4.  
  5. var details = {
  6. name: 'settings.details',...
  7. };
  8. var quotes = {
  9. name: 'settings.quotes',...
  10. };

参见文档:

ui-sref

new doc(引用)

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相关文章