我正在使用Angular的ui-route开发一个作为家庭作业的应用程序。 它就像一个议程,用户将存储按类别分组的联系人以及更多...联系人视图与此类似,plaxo。
我使用Angular和ui-router以及nodejs。
联系人将在里面有三个不同的列或div:
联系信息将根据用户想要执行的操作类型进行更改。联系信息:
当我点击导航栏ui-sref链接时:
错误:无法解决' home'来自州'
angular.module("appAgenda", ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('index.home');
$stateProvider
.state("index",{
url: "",
templateUrl: "index",
abstract: true,
})
.state("index.home", {
url: "home",
templateUrl: "index-home",
})
.state("index.contacts", {
url: "contacts",
templateUrl: "index-contacts",
abstract: true
})
.state("index.contacts.info", {
url: "contactsInfo",
templateUrl: "index-contacts-info"
})
.state("index.contacts.edit", {
url: "contactsEdit",
templateUrl: "index-contacts-edit"
})
.state("index.contacts.new", {
url: "contactsEdit", //uses the same template as contactsEdit
templateUrl: "index-contacts-new"
})
.state('index.reminders', {
url: "/reminders",
templateUrl: "index-reminders"
});
})
;

module.exports = function(express, app){
app.set('views', __dirname + "/client/views/");
app.set('view engine', 'jade');
app.get("/", function(req, res){
res.render("index");
});
app.get("/home", function(req, res){
res.render("index-home");
});
app.get("/contacts", function(req, res){
res.render("index-contacts");
});
app.get("/contactsInfo", function(req, res){
res.render("index-contacts-info");
});
app.get("/contactsEdit", function(req, res){
res.render("index-contacts-edit");
});
app.get("/contactsEdit", function(req, res){
res.render("index-contacts-new");
});
app.get("/reminders", function(req, res){
res.render("index-reminders");
});
app.use(express.static(__dirname + '/client'));
};

doctype html
html(lang="es")
head
meta(name="viewport" content="width=device-width, initial-scale=1")
//bootstrap
link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous")
link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous")
//style.js
link(rel="stylesheet" href="../css/style.css")
body(ng-app="appAgenda")
nav.navbar.navbar-inverted.navbar-fixed-top
div.container
ul.nav.navbar-nav
li(ui-sref="home") Inicio
li(ui-sref="contacts") Contactos
li(ui-sref="reminders") Recordatorios
li(ui-sref="logout") Logout
div(ui-view)
//jquery
script(src="https://code.jquery.com/jquery-1.12.0.min.js")
script(src="https://code.jquery.com/jquery-migrate-1.2.1.min.js")
//font-awesome
link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css")
//angular.js
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js")
script(src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js")
script(src="https://cdn.rawgit.com/marklagendijk/ui-router.stateHelper/master/statehelper.min.js")
script(src="../js/stormpath-sdk-angularjs.min.js")
script(src="../js/stormpath-sdk-angularjs.tpls.min.js")
//angular.src
script(src="../js/app.js")
script(src="../js/config.js")
script(src="../js/routes.js")
script(src="../js/services.js")
script(src="../js/filters.js")
script(src="../js/controllers.js")

很高兴听到一些评论家或其他不同的路线嵌套代码方法可能会有用。