离子路由 - 启动视图

Question

我正在尝试学习离子框架，我一直在阅读路由方面的内容，这是我有点卡住了。

我的应用程序正常运行，但现在我想添加更多视图。因此，我首先将我的主页视图置于一个名为 'home' 的状态（抱歉，如果我使用的术语不正确）。

好的，这是我的 html:

    <!DOCTYPE html>

<html ng-app="ionic.example">
  <head>
    <meta charset="utf-8">
    <title>Venues</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>



  </head>
  <body>    




     <ion-pane>

      <ion-header-bar class="bar-positive">
        <div class="buttons">
         <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </div>
        <h1 class="title">Venues</h1>
      </ion-header-bar>  

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

      <ion-view nng-controller="MyCtrl" title="home">
        <ion-content class="has-header">

        <ion-list>
          <ion-item ng-repeat="item in items">
            <a href="#/venue/{{ item[0].id }}">
              <div class="list card">
                <div class="item item-avatar">
                <img src="{{ item[0].profile_pic }}">
                <h2 class="item-venue-title">{{ item[0].name }}</h2>
                <p class="item-location">UK</p>
              </div>
              <div class="item item-body">
                <img class="full-image" src="{{ item[0].heder_img }}">
              </div>
            </a>

            <div class="item tabs tabs-secondary tabs-icon-left">
              <a class="tab-item" href="#">
              <i class="icon ion-thumbsup"></i>
              Like
              </a>
              <a class="tab-item" href="#">
              <i class="icon ion-chatbox"></i>
              Comment
              </a>
              <a class="tab-item" href="#">
              <i class="icon ion-share"></i>
              Share
              </a>
            </div>
          </div>

          </ion-item>
        </ion-list>

      <ion-infinite-scroll on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

    </ion-content>
    </ion-view>




    <nav class="tabs tabs-icon-bottom tabs-positive">
         <a class="tab-item">
          Clean
          <i class="icon ion-waterdrop"></i>
        </a>
        <a class="tab-item">
          Security
          <i class="icon ion-locked"></i>
        </a>
        <a class="tab-item has-badge">
          Light
          <i class="badge">3</i>
          <i class="icon ion-leaf"></i>
        </a>
        <a class="tab-item">
          Clean
          <i class="icon ion-waterdrop"></i>
        </a>
    </nav>




      </ion-pane>


  </body>
</html>

我已将以下内容添加到 .js 文件

var example=angular.module('ionic.example', ['ionic'])


 .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'templates/home.html',
                controller: 'MyCtrl'
            })
           ;
        $urlRouterProvider.otherwise('/home');
    });

我不明白你怎么说这是 'first' 观点。

如有任何建议，我们将不胜感激。

Answer 1

本节

$urlRouterProvider.otherwise('/home');

将定义索引路由，因此在这种情况下 /home 将是第一页。 home.html 的内容在 ion-nav-view 中呈现，见下文

<body ng-app="quote">
  <!-- where the initial view template will be rendered -->
  <div ng-controller="AppCtrl">
    <ion-nav-view></ion-nav-view>
  </div>
</body>

home.html 的内容在 ion-content 标签内，见下文

<ion-view title="your title">
    <ion-content>
        your content here
    </ion-content>
</ion-view>

Answer 2

我完成了

<script type="text/ng-template" id="home.html">
  <ion-view nng-controller="MyCtrl" title="home">
    <!--content here--!>
  </ion-view>
</script>

并在 js 中

.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: 'home.html',
                controller: 'MyCtrl'
            })
           ;
        $urlRouterProvider.otherwise('/');
    });

离子路由 - 启动视图

Ionic Routing - Startup View

angularjs

angular-ui-router

ionic