离子型如何空白页添加为应用程序的主页？ [英] ionic how to add blank page as home page of the app?
问题描述
我想新的页面添加到默认离子应用与选项卡式菜单，并显示此页的应用程序的默认页。
这里是我如何试图做到这一点：
我添加了新的状态进入app.js
.STATE（'家'，{
网址：'/家，
观点：{
家：{
templateUrl：'模板/ home.html做为'，
控制器：'HomeCtrl
}
}
}）
和设置默认路由器首页
$ urlRouterProvider.otherwise（'/家）;
与模板文件：
＆LT;离子视图标题=家＆GT;
＆LT;离子内容类=填充＆GT;
＆LT; H1＆GT;主页＆LT; / H1＆GT;
＆LT; /离子含量＆GT;
＆LT; /离子视图＆gt;
现在，如果我试图去 HTTP：//myapp.loc/index.html#/home 我总是黑色页面没有内容。
我在做什么错了？
感谢您的帮助。
编辑：
为了错误：[NG：AREQ]参数'HomeCtrl不是一个函数，得到了不确定
我添加相关code。
添加控制器：
angular.module（'starter.controllers'，[]）.controller（'HomeCtrl'，函数（$范围，$位置）{}）
.controller（'DashCtrl'，函数（$范围）{
}）.controller（'FriendsCtrl'，函数（$范围，友）{
$ scope.friends = Friends.all（）;
}）.controller（'FriendDetailCtrl'，函数（$范围，$ stateParams，友）{
$ scope.friend = Friends.get（$ stateParams.friendId）;
}）;
index.html中订单是继
＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / controllers.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /控制器/ overall_stats.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / services.js＆GT;＆LT; / SCRIPT＆GT;
我要说，这里的解决方案应该是出奇的简单：
- 删除视图的名称的
'家'。事实上，它更改为的（空字符串）的
有一个工作plunker 这种变化？
.STATE（'家'，{
网址：'/家，
观点：{
//代替本
//家：{ // 用这个
''：{
templateUrl：tpl.home.html'，
控制器：'HomeCtrl'，
}
}
}）
为什么呢？因为最有可能的 index.html的的是这样的：
＆LT;机身NG-应用=对myApp＆GT; ...
＆LT;离子NAV-视图＆gt;＆LT; /离子NAV-视图＆gt;＆LT; /身体GT;
这意味着，视图名称为，简直就像＆LT;离子导航视图名称=＆GT;＆LT; /离子NAV-视图＆gt;
检查行动 rel=\"nofollow\">
扩展基于问题的扩展
如果我们使用的离子样的带独立的文件和模块控制器的方法：
//里面的index.html
＆LT;脚本SRC =JS / controllers.js＆GT;＆LT; / SCRIPT＆GT;//将controller.js
angular.module（'starter.controllers'，[]）
我们必须确信，我们的 app.js 确实包含该模块，以及：
angular.module（'对myApp'，[
离子，
starter.controllers'//这是一个必须
]）
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.
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');
And template file:
<ion-view title="Home">
<ion-content class="padding">
<h1>Home page</h1>
</ion-content>
</ion-view>
Now, if I am trying to go to http://myapp.loc/index.html#/home I got always black page without content.
What I'm doing wrong?
Thanks for any help.
EDIT: In order to Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined I'm adding related code.
Added controllers:
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);
});
Order in index.html is following
<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:
- Remove the view name
'home'. In fact change it to''(empty string)
There is a working plunker with this change?
.state('home', {
url: '/home',
views: {
// instead of this
// 'home': {
// use this
'': {
templateUrl: 'tpl.home.html',
controller: 'HomeCtrl',
}
}
})
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>
Check that in action here
EXTEND based on the question extension
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', [])
We must be sure, that our app.js does contain that module as well:
angular.module('myApp', [
'ionic',
'starter.controllers' // this is a MUST
])
这篇关于离子型如何空白页添加为应用程序的主页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
