Question

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

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

我做错了什么？

感谢您的帮助。

修改为了错误：[ng：areq]参数＆＃39; HomeCtrl＆＃39;不是一个功能，未定义 我正在添加相关代码。

添加了控制器：

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>

Answer 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>

这意味着视图名称是＆＃34;＆＃34;，几乎像<ion-nav-view name=""></ion-nav-view>

检查行动here

根据问题扩展程序扩展

如果我们对控制器使用离子式方法和分离文件和模块：

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

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

1 个答案: