ionic 如何将空白页添加为应用程序的主页? [英] ionic how to add blank page as home page of the app?
问题描述
我想将新页面添加到带有选项卡式菜单的默认 ionic 应用程序中，并将此页面显示为应用程序的默认页面.
I would like to add new page into default ionic app with tabbed menu and display this page as the default page of the app.
这是我尝试这样做的方法:我在 app.js 中添加了新状态
Here is how I tried to do that: I added new state into app.js
.state('home', {
url: '/home',
views: {
'home': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}
}
})
并将默认路由器设置为主页
and set default router to home page
$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 我总是得到没有内容的黑页.
Now, if I am trying to go to http://myapp.loc/index.html#/home I got always black page without content.
我做错了什么?
感谢您的帮助.
为了 Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined我正在添加相关代码.
In order to Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined I'm adding related code.
添加的控制器:
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>
推荐答案
我想说，这里的解决方案应该非常简单:
I would say, that solution here should be surprisingly simple:
- 移除视图name
'home'.实际上把它改成''(empty string)
- Remove the view name
'home'. In fact change it to''(empty string)
有一个工作plunker有这个变化吗?
.state('home', {
url: '/home',
views: {
// instead of this
// 'home': {
// use this
'': {
templateUrl: 'tpl.home.html',
controller: 'HomeCtrl',
}
}
})
为什么?因为很可能 index.html 看起来像这样:
Why? Because most likely the index.html would look like this:
<body ng-app="myApp" >
...
<ion-nav-view></ion-nav-view>
</body>
这意味着视图名称是"，几乎就像
And that means that the view name is "", almost like <ion-nav-view name=""></ion-nav-view>
在此处
基于问题扩展的EXTEND
EXTEND based on the question extension
如果我们使用 ionic-like 方法，将文件和模块分开用于控制器:
if we use ionic-like approach with separated file and module for controllers:
// inside of the index.html
<script src="js/controllers.js"></script>
// the controller.js
angular.module('starter.controllers', [])
我们必须确定，我们的 app.js 确实也包含该模块:
We must be sure, that our app.js does contain that module as well:
angular.module('myApp', [
'ionic',
'starter.controllers' // this is a MUST
])
这篇关于ionic 如何将空白页添加为应用程序的主页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
