离子如何将空白页面添加为应用程序的主页？答案

【问题标题】：ionic how to add blank page as home page of the app?离子如何将空白页面添加为应用程序的主页？
【发布时间】：2014-09-13 18:40:31
【问题描述】：

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

这是我尝试这样做的方法： 我在 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，我总是得到没有内容的黑页。

我做错了什么？

感谢您的帮助。

编辑： 为了Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined 我正在添加相关代码。

添加的控制器：

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>

【问题讨论】：

您需要一个包含标签的抽象状态，并带有一个命名视图。
有一个抽象状态叫做标签，但是我的主页视图不包含任何包含的标签栏或其他东西。我想显示带有标题的简单页面。

标签： javascript angularjs angular-ui-router ionic-framework

【解决方案1】：

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

删除视图名称 'home'。其实改成''(空字符串)

有 working plunker 进行此更改吗？

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

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

为什么？因为 index.html 很可能看起来像这样：

<body ng-app="myApp" >

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

</body>

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

检查实际情况here

基于问题扩展扩展

如果我们使用 ionic-like 方法来分离控制器的文件和模块：

// 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
])

【讨论】：

你好，它工作一半，页面正确显示，但控制台调试器抛出以下错误：错误：[ng:areq] 参数“HomeCtrl”不是函数，未定义我检查了我的控制器和HomeCtrl 已经在那里定义了。
它在哪里抛出错误？在我的 plunker 或您的本地代码中？因为在我的 plunker 中它应该按原样工作。原因是：我确实有这部分代码：.controller('HomeCtrl', function($scope, $location) {})。你也有吗？ HomeCtrl 是在状态定义中声明的控制器名称 - 所以它也必须注入我们的模块中
谢谢，问题是我还有另一个包含 angular.module('starter.controllers', []) 的独立控制器。所以现在看起来没问题，但这次我不能使用分离的控制器。非常感谢！
很高兴看到这一点；）享受惊人的ui-router