title: AngularJS ui-router : Could not resolve___ from state ___ Error
body: <p>I am following along on this year old ui-router tutorial <a href="http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/" rel="noreferrer">http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/</a> and I'm getting the following error:</p>
  
  <pre><code>Error: Could not resolve 'settings/quotes' from state 'settings'
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/LpbXU.png" alt="enter image description here"></p>
  
  <p>I am fitting this tutorial app into my Express.JS setup and I'm using Jade for my templates. </p>
  
  <p>All the Jade templates seem to be rendering properly but I am noticing that there is no <code>href</code> being created for the <strong>User Quotes</strong> (<code>settings/quotes</code> URL) <code>ui-sref</code> link. Maybe there is a clue there. You can see this in the below screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/wTQLC.png" alt="enter image description here"></p>
  
  <p>I will post all key files below. </p>
  
  <hr>
  
  <h2>AngularJS Files</h2>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>'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!"
      };
  }]);
  </code></pre>
  
  <h2>Jade Templates</h2>
  
  <p><strong>layout.jade</strong></p>
  
  <pre><code>doctype html 
  html
      include head
      body(ng-app='app')
          p From the layout.jade file
          &lt;div ui-view&gt;&lt;/div&gt;
          include scripts
  </code></pre>
  
  <p><strong>settings.jade</strong></p>
  
  <pre><code>ul
      li Settings
      li 
          a(ui-sref="settings") User Details
      li 
          a(ui-sref="settings/quotes") User Quotes
      div(ui-view="")
  </code></pre>
  
  <p><strong>settings-details.jade</strong></p>
  
  <pre><code>h3 {{user.name}}\'s Quotes
  hr
  div
      label Quotes
          textarea(type="text", ng-model="user.quotes")
  button(ng-click="done()") Save
  </code></pre>
  
  <p><strong>settings-quotes.jade</strong></p>
  
  <pre><code>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
  </code></pre>
  
  <h2>ExpressJS Server</h2>
  
  <p><strong>server.js</strong></p>
  
  <pre><code>var express = require('express'),
  mongoose = require('mongoose'),
  morgan = require('morgan'),
  bodyParser = require('body-parser'),
  path = require('path');
  </code></pre>
  
  <p>var env = process.env.NODE_ENV = process.env.NODE_ENV || 'development';</p>
  
  <p>var app = express();</p>
  
  <pre><code>// 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 + '...');
  </code></pre>