离子路由和模板不工作 [英] Ionic Routing and Template not working
问题描述
我是新来的离子和角度也UI。我试图使用模板来加载我的第一页我离子应用程序。我的文件夹结构如下。
I am new to Ionic and Angular UI also. I am trying to use templates to load my first page in my Ionic app. My folder structure is as following.
我想用我的 index.html的为我的所有模板的容器。我试图用 list.html 为模板加载到 index.html的时，我的应用程序首次加载。我曾尝试以下code和我卡住了。
I want to use my index.html as the container for all my templates. I am trying to use list.html as the template the loads into the index.html when my app first loads. I have tried the following code and I am stuck.
.config(function($urlRouterProvider, $stateProvider){
$stateProvider
.state('index', {
url: '/',
abstract: true,
templateUrl: 'index.html'
})
.state('index.list', {
url: '/list',
views: {
'list-index' : {
templateUrl: 'list.html',
controller: 'ListCtrl'
}
}
})
$urlRouterProvider.otherwise('/list');
})
我的 index.html的的不过是一种＆LT;离子导航视图名称='名单指数'＆GT;＆LT; /离子导航视图方式＆gt; body标签内
My index.html has nothing but an
<ion-nav-view name='list-index'></ion-nav-view> inside the body tag.
的 list.html 有一些code，通过使用conotroller获取一些JSON内容的ListCtrl 。
The list.html has some code that loads a list by fetching some JSON content using conotroller ListCtrl.
应用程序加载空白。
我需要在正确的方向指向。我认为我太接近正确的解决方案。任何帮助是非常AP preciated。谢谢你。
I need to be pointed in the right direction. I think that I am too close to the correct solution. Any help is highly appreciated. Thanks.
添加code为 index.html的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.2.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view name='list-index'></ion-nav-view>
</body>
</html>
链接 app.js - HTTP：//$c$cpen.io/anon/pen/RPVJao
推荐答案
您可以请描述你的应用程序离子目录结构。
Can you please describe your ionic app directory structure.
这应是：
PROJECT
- hooks
- platforms
- www
- js <=== this dir includes all your js in ionic structure.
- templates/ <== this is a dir that includes all html templates in ionic structure
- index.html <== THIS IS THE STARTING POINT OF YOUR PROJECT, CONTAINING angularJS script and ng-app for exemple
到您的模板目录，你可以有的index.html＆安培; list.html
into your template directory, you can have "index.html & list.html"
但是这将更新你的路由为：
but this shall update your routing as :
$stateProvider
.state('index', {
url: '/',
abstract: true,
templateUrl: 'templates/index.html'
})
.state('index.list', {
url: '/list',
views: {
'list-index' : {
templateUrl: 'templates/list.html',
controller: 'ListCtrl'
}
}
})
如果你保持你的templateURl为 templateUrl：index.html的那么，我认为你会成为你的主要的index.html冲突....糟糕的主意。
if you keep your templateURl as templateUrl: 'index.html' then, I assume that you 'll be in conflict with your main index.html .... bad idea.
这篇关于离子路由和模板不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
