我跟着在今年的老ui路由器教程
http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/和我得到以下错误:
- Error: Could not resolve 'settings/quotes' from state 'settings'
我将这个教程应用程序适合我的Express.JS设置,我使用Jade的我的模板。
所有的Jade模板似乎是正确的渲染,但我注意到没有为用户报价(设置/报价URL)ui-sref链接创建href。也许有一个线索。您可以在下面的屏幕截图中看到这一点:
我会把所有的关键文件下面。
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',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!"
- };
- }]);
玉模板
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.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 || “发展”
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('*',res) {
- res.render('index',{
- mongoMessage: mongoMessage
- });
- });
- var port = process.env.PORT || 3030;
- app.listen(port);
- console.log('Listening on port ' + port + '...');
你几乎在那里,ui路由器需要这:
- <a ui-sref="settings.details">...
这说ui-sref导航到名为“settings.details”的状态,以防万一我们需要传递参数,它非常类似于$ state.go …
- <a ui-sref="settings.details({param1:value1,param2:value2})">...
如果我们想使用为状态定义的url,我们仍然可以,但是我们必须使用href
- <a href="#/settings">...to get to details
- <a href="#/settings/quotes">...to get to quotes
如果子url是空字符串,就像在我们的case
- var settings = {
- name: 'settings',...
- };
- var details = {
- name: 'settings.details',...
- };
- var quotes = {
- name: 'settings.quotes',...
- };
参见文档:
或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()