角url配置没有使用ionic框架

I am trying to get my dashboard view from template folder when I am loading my app. I am using Ionic frame work.

我在加载我的应用程序时，试图从模板文件夹中获取仪表板视图。我正在使用Ionic frame工作。

My index

我的索引

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

My app.js

我app.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');
});

My controller.js

我controller.js

    angular.module('starter.controller',[])

.controller('DashCtrl', function($scope) {
alert("ok");
})

In 'www\templates' I have a file named dash.html.

在“www\模板”中，我有一个名为dash.html的文件。

My dash.html is

我的短跑。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>

But when i hit 'file:///C:/Users/Sanjeev/RechargePlans/www/index.html' in browser then it renders me to 'file:///C:/Users/Sanjeev/RechargePlans/www/index.html#/dash' with a blank view .

但当我点击“文件:///C:/用户/Sanjeev/RechargePlans/www/index”时。在浏览器里的html，然后它呈现给我文件:///C:/用户/Sanjeev/RechargePlans/www/index。一个空白的视图。

What I miss??

我错过什么吗? ?

2 个解决方案

#1

If you are going to name your views with Ionic then your ion-view tab HTML needs to look like this:

如果你想用Ionic命名你的视图，那么你的ion-view标签HTML应该是这样的:

<ion-nav-view name="you-view-name"></ion-nav-view>

Usually with Ionic apps you have a root state and everything stems off that, so:

通常在Ionic应用中，你会有一个根状态，一切都源于此，所以:

app.js file:

app.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');
     });

index.html:

index . html:

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

tabs.html:

<ion-nav-view name="dash"></ion-nav-view>

In any case, if you are naming your views them your ion-view HTML tag needs to have a name attribute with the name of the view in it.

在任何情况下，如果您要为视图命名，那么您的ion-view HTML标记需要有一个名称属性，其中包含视图的名称。

Hope this helps

希望这有助于

#2

you should not run ionic app by "file:///C:/Users/Sanjeev/RechargePlans/www/index.html". you should be using ionic cli tool to run your ionic project. Go to cmd > navigate to your project folder and than run ionic serve and you will be able to see output.

你不应该使用“file:///C:/Users/Sanjeev/RechargePlans/www/index.html”来运行ionic app。您应该使用ionic cli工具来运行您的ionic项目。转到cmd >导航到您的项目文件夹，然后运行ionic服务，您将能够看到输出。

#1