2016-01-09 36 views
0

我正在與Ionic第一次合作,並且遇到了一些小問題。我已閱讀文檔和教程,但我無法弄清楚我做錯了什麼。無法使用Ionic渲染視圖

首先,這裏是我的代碼(我從一個空白項目開始)。

代碼

app.js(我剛加入一個狀態):

// Ionic Starter App 

// angular.module is a global place for creating, registering and retrieving Angular modules 
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) 
// the 2nd parameter is an array of 'requires' 
angular.module('starter', ['ionic']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
     // for form inputs) 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

     // Don't remove this line unless you know what you are doing. It stops the viewport 
     // from snapping when text inputs are focused. Ionic handles this internally for 
     // a much nicer keyboard experience. 
     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

.config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider.state('home', { 
    url: '/', 
    views: { 
     templateUrl: 'templates/home.html' 
    } 
    }) 

    $urlRouterProvider.otherwise('/'); 

}); 

的index.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 


    <!-- compiled css output --> 
    <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 ng-app="starter"> 

    <ion-side-menus> 
     <ion-side-menu-content> 
     <ion-nav-bar class="bar-positive"> 
      <ion-nav-back-button></ion-nav-back-button> 
     </ion-nav-bar> 
     </ion-side-menu-content> 

     <ion-side-menu side="left"> 
     <ion-list> 
      <ion-item menu-close ui-sref="home"> 
      Home 
      </ion-item> 
     </ion-list> 
     </ion-side-menu> 
    </ion-side-menus> 

    </body> 
</html> 

而且我認爲(在/www/templates/home.html):

<ion-view view-title="Home"> 
    <ion-content> 
     <div> 
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae inventore quod nihil quia, provident porro! Nulla ad libero deserunt, ullam soluta voluptates quidem dolore harum hic consequatur quas suscipit, ab.</div> 
      <div>Rerum, eum. Doloribus ullam voluptas repudiandae corrupti ipsa modi magnam, odit perferendis quam reprehenderit sapiente. Rerum impedit sequi voluptatibus porro ducimus dolor animi atque cupiditate similique praesentium. Beatae, suscipit, dolor.</div> 
      <div>Quasi natus cupiditate dignissimos non sed quaerat dolorem assumenda minima consectetur, quibusdam nostrum odio molestias voluptate eaque ut fugit atque quia totam laudantium? Repellendus ad, voluptatem itaque ut dolor placeat!</div> 
      <div>Quidem illo, molestias pariatur dolor laudantium et doloribus nostrum, hic quae consequuntur, nesciunt explicabo temporibus tempore possimus. Sint dolor, suscipit, iure, dolorem maiores veniam est cum eligendi iusto dolorum praesentium?</div> 
      <div>Dicta nihil amet, sapiente deserunt, facilis autem. Est debitis voluptate velit dicta explicabo alias culpa laborum nesciunt mollitia delectus, quos ut eius, itaque qui temporibus laudantium iusto reprehenderit omnis incidunt.</div> 
    </ion-content> 
</ion-view> 

T他問

好吧,所以基本上,我只想有一個視圖(並在稍後添加一些其他視圖)。此時,應在我提供應用程序時呈現我的主視圖,但標題(導航欄)和內容均顯示爲而不是。我已經嘗試了很多東西(我的app.js中的語法,緩存等)。但沒有任何工作。

你有什麼想法嗎? :) 謝謝 !

回答

0

下面我複製你的代碼,我所做的這些更改:

  • 介紹了管理方菜單的結構抽象的視圖(app)(相關觀點是menu.html)
  • 改變家庭視圖爲 「應用程序」

// Ionic Starter App 
 

 
// angular.module is a global place for creating, registering and retrieving Angular modules 
 
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) 
 
// the 2nd parameter is an array of 'requires' 
 
angular.module('starter', ['ionic']) 
 

 
.run(function($ionicPlatform) { 
 
    console.log('run'); 
 
    $ionicPlatform.ready(function() { 
 
    if (window.cordova && window.cordova.plugins.Keyboard) { 
 
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
 
     // for form inputs) 
 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
 

 
     // Don't remove this line unless you know what you are doing. It stops the viewport 
 
     // from snapping when text inputs are focused. Ionic handles this internally for 
 
     // a much nicer keyboard experience. 
 
     cordova.plugins.Keyboard.disableScroll(true); 
 
    } 
 
    if (window.StatusBar) { 
 
     StatusBar.styleDefault(); 
 
    } 
 
    }); 
 
}) 
 

 
.config(function($stateProvider, $urlRouterProvider) { 
 
    console.log('config'); 
 
    $stateProvider.state('app', { 
 
    url: "/app", 
 
    abstract: true, 
 
    templateUrl: "menu.html", 
 
    controller: 'AppController' 
 
    }) 
 
    .state('app.home', { 
 
    url: "/home", 
 
    views: { 
 
     'menuContent': { 
 
     templateUrl: "home.html" 
 
     } 
 
    } 
 
    }); 
 

 
    $urlRouterProvider.otherwise('/app/home'); 
 

 
}) 
 

 
.controller('AppController', function($scope) { 
 
    console.log('AppController'); 
 
});
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" /> 
 
    <title></title> 
 
    <link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
    <script src="http://code.ionicframework.com/nightly/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="app.js"></script> 
 
</head> 
 

 
<body ng-app="starter"> 
 
    <ion-nav-view></ion-nav-view> 
 
    
 
    <script id="menu.html" type="text/ng-template"> 
 
<ion-side-menus> 
 
    <ion-pane ion-side-menu-content> 
 
    <ion-nav-bar class="bar-positive"> 
 
     <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button> 
 
    </ion-nav-bar> 
 
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view> 
 
    </ion-pane> 
 

 
    <ion-side-menu side="left"> 
 
    <header class="bar bar-header bar-positive"> 
 
     <h1 class="title">Left</h1> 
 
    </header> 
 
    <ion-content class="has-header"> 
 
     <ion-list> 
 
     <ion-item nav-clear menu-close ui-sref="home"> 
 
      Home 
 
     </ion-item> 
 
     </ion-list> 
 
    </ion-content> 
 
    </ion-side-menu> 
 
</ion-side-menus> 
 
    </script> 
 
    
 
    <script id="home.html" type="text/ng-template"> 
 
<ion-view view-title="Home"> 
 
    <ion-nav-buttons side="left"> 
 
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> 
 
    </ion-nav-buttons> 
 
    <ion-content> 
 
    <div> 
 
     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae inventore quod nihil quia, provident porro! Nulla ad libero deserunt, ullam soluta voluptates quidem dolore harum hic consequatur quas suscipit, ab.</div> 
 
     <div>Rerum, eum. Doloribus ullam voluptas repudiandae corrupti ipsa modi magnam, odit perferendis quam reprehenderit sapiente. Rerum impedit sequi voluptatibus porro ducimus dolor animi atque cupiditate similique praesentium. Beatae, suscipit, dolor.</div> 
 
     <div>Quasi natus cupiditate dignissimos non sed quaerat dolorem assumenda minima consectetur, quibusdam nostrum odio molestias voluptate eaque ut fugit atque quia totam laudantium? Repellendus ad, voluptatem itaque ut dolor placeat!</div> 
 
     <div>Quidem illo, molestias pariatur dolor laudantium et doloribus nostrum, hic quae consequuntur, nesciunt explicabo temporibus tempore possimus. Sint dolor, suscipit, iure, dolorem maiores veniam est cum eligendi iusto dolorum praesentium?</div> 
 
     <div>Dicta nihil amet, sapiente deserunt, facilis autem. Est debitis voluptate velit dicta explicabo alias culpa laborum nesciunt mollitia delectus, quos ut eius, itaque qui temporibus laudantium iusto reprehenderit omnis incidunt.</div> 
 
    </div> 
 
    </ion-content> 
 
</ion-view> 
 
    </script> 
 
</body> 
 

 
</html>

的副視