2015-05-11 2 views
0

Я пытаюсь изучить ионный каркас, и я читал маршрутную сторону вещей, и это было, если я немного застрял.Ionic Routing - Startup View

У меня было приложение, но теперь я хочу добавить больше просмотров. Итак, я начал с того, что поставил свой домашний взгляд в состояние, называемое «дом» (извините, если я не использую правильную терминологию).

Ok вот мой 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'); 
    }); 

То, что я не понимаю, как вы говорите, что это «первый 'так сказать.

Любые советы будут оценены.

ответ

0

секция

$urlRouterProvider.otherwise('/home'); 

будет определять маршрут индекса, так как в этом случае/дома будет на первой странице. Содержание home.html оказывается внутри ионно-нав-зрения, смотри ниже

<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-view title="your title"> 
    <ion-content> 
     your content here 
    </ion-content> 
</ion-view> 
+0

Нужно ли обертывать его следующими тегами:

0

Я сделал это по

<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('/'); 
    }); 
Смежные вопросы