ionic 如何添加空白页面作为应用程序的主页?

2024-03-21

我想使用选项卡式菜单将新页面添加到默认离子应用程序中,并将此页面显示为应用程序的默认页面。

我尝试这样做的方法如下:我在 app.js 中添加了新状态

.state('home', {
          url: '/home',
          views: {
              'home': {
                  templateUrl: 'templates/home.html',
                  controller: 'HomeCtrl'
              }
          }
    })

并将默认路由器设置为主页

 $urlRouterProvider.otherwise('/home');

和模板文件:

<ion-view title="Home">
    <ion-content class="padding">
        <h1>Home page</h1>
    </ion-content>
</ion-view>

现在,如果我想去http://myapp.loc/index.html#/home我总是得到没有内容的黑页。

我做错了什么?

谢谢你的帮助。

EDIT:为了错误:[ng:areq] 参数“HomeCtrl”不是函数,未定义我正在添加相关代码。

添加控制器:

angular.module('starter.controllers', [])

.controller('HomeCtrl', function($scope, $location) {

})
.controller('DashCtrl', function($scope) {
})

.controller('FriendsCtrl', function($scope, Friends) {
  $scope.friends = Friends.all();
})

.controller('FriendDetailCtrl', function($scope, $stateParams, Friends) {
  $scope.friend = Friends.get($stateParams.friendId);
});

index.html 中的顺序如下

<script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/controllers/overall_stats.js"></script>
    <script src="js/services.js"></script>

我想说,这里的解决方案应该非常简单:

  • 删除视图name 'home'。事实上将其更改为'' (空字符串)

有一个工作笨蛋 http://plnkr.co/edit/dm52B9Z6n4teOF1e79Ym?p=preview有了这个改变?

.state('home', {
      url: '/home',
      views: {
          // instead of this
          // 'home': {

          // use this
          '': {
              templateUrl: 'tpl.home.html',
              controller: 'HomeCtrl',
          }
      }
}) 

为什么?因为最有可能的是索引.html看起来像这样:

<body ng-app="myApp" >

    ...
    <ion-nav-view></ion-nav-view>

</body>

这意味着视图名称是“”,几乎就像<ion-nav-view name=""></ion-nav-view>

检查是否在行动here http://plnkr.co/edit/dm52B9Z6n4teOF1e79Ym?p=preview

EXTEND 基于问题扩展

如果我们使用类离子的控制器的分离文件和模块的方法:

// inside of the index.html
<script src="js/controllers.js"></script>

// the controller.js
angular.module('starter.controllers', [])

我们必须确定,我们的app.js也包含该模块:

angular.module('myApp', [
   'ionic',
   'starter.controllers' // this is a MUST
])
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ionic 如何添加空白页面作为应用程序的主页? 的相关文章

随机推荐

  • 隐藏键盘ios [重复]

    这个问题在这里已经有答案了 我有一些文本输入 每当我触摸背景时 我都可以隐藏键盘 但只有当我输入第一个文本框名称 textField1 时 现在这段代码应该很简单 但我似乎无法理解它 IBAction backgroundTouched i
  • 如何在Python中将词云保存为.png?

    我正在尝试基于字符串创建词云 然后将其导入到报告文档中 我正在使用 python docx matplotlib 和词云 这是我的一个简短的总结 from wordcloud import WordCloud import matplotl
  • 获取 Flask 中的当前用户 ID

    我对 Python 还很陌生 老实说 我对一般编程也很陌生 我目前正在制定一种待办事项列表 我需要它将待办事项放入适当的课程中 所有这些都与教育内容相关 所以 问题很简单 我将其作为 Flask 驱动的路线 app route add co
  • 方案单词列表 eq?

    我有一个问题 我需要查找列表是否等于第二个列表 例如 set eq 1 2 3 1 2 3 gt t set eq 1 2 3 2 3 4 gt f 这些例子在我的程序中是正确的 但这个例子不是 set eq quote quote one
  • 如何使用GridView从服务器获取JSON数据--Flutter

    我参考过食谱 https flutter dev docs cookbook networking fetch data https flutter dev docs cookbook networking fetch data 示例代码是
  • VueJS 自定义 Props 验证功能

    我是 VueJS 的新手 所以我一直在关注他们的官方指南 https v2 vuejs org v2 guide components html Prop Validation 我能够触发前 5 个属性验证器 但我似乎无法触发最后一个示例
  • 在 Firefox 中读取多行内容可编辑文本

    让我们读取一个 contenteditable 元素 span This is editable br Yes it is span 就在您在文本末尾手动添加两个空格之后 I get textContent gt This is edita
  • C++ 中的“new”运算符何时调用构造函数

    自从我开始学习 C 以来 我一直读到 new 运算符在返回指向分配内存的指针之前调用对象的构造函数 因此 出于好奇 我检查了 new 的源代码 并在以下位置找到了以下内容 GLIBCXX WEAK DEFINITION void opera
  • 使用一组字符而不是一个字符的序列对齐算法

    Summary 我从一些有关对齐算法的细节开始 最后我提出了我的问题 如果您了解对齐算法 请从头开始 考虑我们有两个字符串 例如 ACCGAATCGA ACCGGTATTAAC 有一些算法 例如 史密斯 沃特曼 https en wikip
  • R 绘图自定义数据格式变体

    我正在尝试访问customdata通过javascrit分配给每个数据点 例如为每个点分配一个超链接 然而 我注意到数据格式从一个图变为另一个图 这看起来很奇怪 这在本例中完美运行 基于this https stackoverflow co
  • WordPress:single.php 不显示 the_content()

    我正在创建一个自定义 WordPress 主题 但我似乎无法让 single php 模板正常工作 下面是我写的代码 标题出现了 但内容没有出现 有什么想法为什么不是吗 div div id post gt h2 a href title
  • 为什么要对 List< 进行泛型转换?将 Set..> 扩展为 List 在 Sun JDK 6 上成功,但在 Oracle JDK 7 上编译失败?

    下面的代码 class GenericCompilationFailureDemo List
  • 类型 IUserStore`1 没有可访问的构造函数

    我想使用 Unity 3 设置 MVC5 应用程序 我从标准模板创建了一个默认的 Web mvc5 应用程序 然后添加了 unity 当我访问 AccountController 中的注册操作时 出现以下异常 类型 IUserStore 1
  • 使用对象元素作为参数的 Firestore 查询

    我在项目中使用 Firestore 作为数据库 并且我有一个表 我需要在对象内执行查询 foo data bar data exObject dataToQuery value 这是一个结构示例 我想在对象内部进行查询 一个如下所示的查询
  • 具有定向光正交投影的 OpenGL 3+

    我目前遇到来自移动 类似太阳 光源的定向光阴影贴图的问题 当我最初实现时 光投影矩阵被计算为 3D 并且阴影贴图看起来很漂亮 然后我了解到 对于我想要做的事情 正交投影效果会更好 但我很难替换正确的投影矩阵 正如人们所期望的那样 每次滴答声
  • 包含 unistd.h 的 write() 包装例程会导致错误

    我正在编写一个包装例程write 要覆盖原始系统功能 并在其中我需要通过执行另一个程序execve 我为其添加了头文件unistd h 我收到错误conflicting types for write usr include unistd
  • 如何让Three.js全屏显示?

    我想用 Three js 制作游戏 但如何使其全屏显示 我看见本文 http learningthreejs com blog 2011 11 17 lets make a 3d game make it fullscreen 并且我在代码
  • Hibernate,更改标识符/主键

    当我尝试更改我的设置时 我收到以下异常 ID in an Entity identifier of an instance of com google search pagerank ItemEntity was altered from
  • 无法创建 Laravel 项目,因为缺少 mcrypt 扩展

    好吧 我看过很多关于这个问题的帖子 我花了一整天的时间来解决这个问题 但没有成功 我正在尝试创建一个 Laravel 项目 我使用的是 Mac Yosemite 运行 PHP 5 5 14 机器上还有旧版本的 PHP 当我尝试使用 lara
  • ionic 如何添加空白页面作为应用程序的主页?

    我想使用选项卡式菜单将新页面添加到默认离子应用程序中 并将此页面显示为应用程序的默认页面 我尝试这样做的方法如下 我在 app js 中添加了新状态 state home url home views home templateUrl te