我想制作一个底部有导航栏的简单Ionic应用程序。经过大量的研究,我得到了它的工作。但是,我不明白两件事:
#1。在我的routes.js文件中,选项卡状态是什么,为什么我需要在我的home状态前加上?
// Why do I need the tabs. part in my state?
$stateProvider.state('tabs.home', {
url: '/home',
views: {
"home-tab": {
templateUrl: 'templates/home/index.html'
}
}
})
// Why do I even need this state?
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
#2。每当我创建一个锚链接或一个离子选项卡链接时,我总是必须在/ tab /前面添加哈希值。为什么?
<!-- Why do I need the /tab/ part in the href? -->
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
我会承认:我还没有真正研究过离子和$ stateProvider。如果有人可以为离子或$ stateProvider的教程添加链接,我将非常感激。
答案 0 :(得分:2)
您需要一个抽象状态,因为您正在处理嵌套视图。 (你有一个导航栏和视图回家)。
你使用/ tab / home是因为你要进入状态tabs.home。如果您有另一个带有选项卡和列表的状态,您将使用/ tab / list访问它。您正在渲染两个模板,即选项卡和索引。
阅读本文:
http://learn.ionicframework.com/formulas/navigation-and-routing-part-2/
有更多观点的示例:
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "templates/facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'home-tab': {
templateUrl: "templates/facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "templates/about.html"
}
}
})
.state('tabs.navstack', {
url: "/navstack",
views: {
'about-tab': {
templateUrl: "templates/nav-stack.html"
}
}
})
.state('tabs.contact', {
url: "/contact",
views: {
'contact-tab': {
templateUrl: "templates/contact.html"
}
}
});
与一个链接:
<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>