我在加载应用程序时尝试从模板文件夹获取仪表板视图。我正在使用离子框架工作。
我的索引
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar bar-header bar-dark main-header">
<h1 class="title main-header-title"><strong>Recharge Plans</strong></h1>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
我的应用.js
angular.module('starter', ['ionic','starter.controller','starter.service'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('dash', {
url: '/dash',
views: {
'dash': {
templateUrl: '/templates/dash.html',
controller: 'DashCtrl'
}
}
});
$urlRouterProvider.otherwise('/dash');
});
我的控制器.js
angular.module('starter.controller',[])
.controller('DashCtrl', function($scope) {
alert("ok");
})
在"www\templates"中,我有一个名为dash.html的文件。
我的破折号.html是
<ion-view ng-controller="DashCtrl">
<ion-content>
<div class="list searc-panel">
<label class="item item-input item-select">
<div class="input-label">
Select Operator
</div>
<select>
<option>Select</option>
<option>Airtel</option>
<option>Vodafone</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
Select State
</div>
<select>
<option>Select</option>
<option>West bengal</option>
<option>Kolkata</option>
</select>
</label>
<button class="button button-full button-positive">
Search My Plans
</button>
</div>
</ion-content>
</ion-view>
但是当我在浏览器中点击"file:///C:/Users/Sanjeev/RechargePlans/www/index.html"时,它会将我渲染为空白视图的"file:///C:/Users/Sanjeev/RechargePlans/www/index.html#/dash"。
我想念什么??
如果你打算用Ionic命名你的视图,那么你的ion-view选项卡HTML需要看起来像这样:
<ion-nav-view name="you-view-name"></ion-nav-view>
通常使用Ionic应用程序,您有一个根状态,并且一切都源于此,因此:
应用程序.js文件:
angular.module('starter', ['ionic','starter.controller','starter.service'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('root', {
url: '/',
templateUrl: '/templates/tabs.html',
controller: 'rootCtrl'
}
});
.state('root.dash', {
url: '/dash',
views: {
'dash': {
templateUrl: '/templates/dash.html',
controller: 'DashCtrl'
}
}
});
$urlRouterProvider.otherwise('/dash');
});
索引.html:
<ion-nav-view></ion-nav-view>
选项卡.html:
<ion-nav-view name="dash"></ion-nav-view>
在任何情况下,如果要命名视图,则ion-view HTML标记需要具有包含视图名称的name属性。
希望这有帮助
你不应该通过"file:///C:/Users/Sanjeev/RechargePlans/www/index.html"运行Ionic App。 您应该使用Ionic CLI工具来运行Ionic Project。转到cmd>导航到您的项目文件夹,然后运行ionic serve
您将能够看到输出。