2015-01-27 1 views
1

저는 이른 프레임 워크를 위해 일찍부터 이온이 포함 된 모바일 앱을 만들려고합니다.

나는 꽤 < A HREF하여 웹 사이트를 만드는 경우,하지만 어떻게 작동하는지 이온 성에서,> = "#"을 전체 모양을 변경하는 방법 궁금

는 (?)

나는 몇 가지를 추가하기 위해 노력하고있어 코드 app.js :

config(function($stateProvider) { 
$stateProvider 

    .state('expense', { 
    url: "/app/expense", 
    templateUrl: 'templates/add-expense.html' 
    }) 
}); 

이 내 코드 index.html을 :

<body ng-app="starter"> 
    <ion-side-menus> 
    <ion-side-menu-content> 
    <ion-header-bar class="bar-header bar-dark"> 
    <button class="button button-clear button-positive">Edit</button> 
    <div class="h1 title">23 Desember 20014</div> 
    <button class="button button-icon icon ion-navicon" menu-toggle="right"> </button> 
    </ion-header-bar> 

<ion-content> 
    <div class="row green"> 
    <div class="col">Income</div> 
    <div class="col price">3,550,000</div> 
    </div> 
    <div class="row expense orange"> 
    <a class="col" href="#/app/expense">New Expense</a> <!-- try to link templates/add-expense.html --> 
    </div> 
</ion-content> 
</ion-side-menu-content> 

<ion-side-menu side="right"> 
    <a menu-close href="#" class="item">Home</a> 
</ion-side-menu> 
</ion-side-menus> 
<body> 

누구든지 나를 도울 수 있습니까? 미리 감사드립니다.

+0

는이 예를, 응답을 plunker에 내 작품 http://plnkr.co/edit/FHBTQJJDXNwX3kmlqNgJ?p=preview, 회신 – virender

+0

덕분에 프로젝트를 추가 할 수 그것은 내가 가지고있는 경우 내가 태그를 (?) 때문에 모든 페이지는 항상 다른 색상 –

답변

0

updated working plunker입니다. 나는 이오니아의 전문가가 아니므로 단지 기본이 고정/향상되어 있습니다.

하나의 문제는 설정이 무언가의 방법이 될해야한다 :

// wrong 
config(function($stateProvider) { 
... 

이 앱은 데 설정 방법 또한

var app = angular.module('starter', ['ionic']) 
... 
app.config(function($stateProvider) { 
    $stateProvider 

    .state('expense', { 
     url: "/app/expense", 
     templateUrl: 'add-expense.html', 
    })  
}); 

, 나는 자리로, <ion-nav-view>와 내용을 포장 expenses의 경우 (일부 앵커에 ui-view="" - 이름이 지정되지 않은 앵커에 주입해야 함)

그러나 이것들을 실행하기위한 조정은 거의하지 않으며, 이온 성을 자세히 조사하고, 그것에 대해 읽고, 개념을 이해해야합니다. 추가 expsenses.html는

는, 그것을 here

+0

감사 을 –

+0

되지 않음을 포함해야한다 각 페이지에 있는지 앱 페이지의 많은에 대한, 다시 요청할 수 있습니다 (이 경우에) 사용할 수 있습니다 ionic의 전문가 ... 그래서 기본적인 것들. 한 페이지, 머리와 스타일이있는 index.html이 하나 있어야합니다. 그것이 SPA의 개념입니다. 보기 (HTML의 일부)는 UI-Router로 바뀌어 이온 원소로 감싸였습니다. 하지만 실제로는 –

+0

을 통해 읽을 시간을 보내십시오. 또한, 하나의 이온 플 런커 http://plnkr.co/edit/I5bvIN3F6yNZg799ig6i?p=preview에 대한 링크가 있습니다. 그것은 조직 구성 방법을 보는 것을 도울 수 있습니다. –

0

당신은 설정 부분에 문제가 확인이 방법을 사용해야합니다 ... 방법이 아니다.

그리고 html로도 사용하십시오. 그리고 "add-expense.html"에서 사용하지 않는 코드를 삭제하십시오. 보여줄 필요가있는 템플릿을 추가해야합니다. 내가 방법을 이해하기 시작 OKE

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

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

.config(function($stateProvider) { 
    $stateProvider 

    .state('expense', { 
     url: "/app/expense", 
     templateUrl: 'add-expense.html' 
    }) 

}); 


function ContentController($scope, $ionicSideMenuDelegate) { 
    $scope.toggleLeft = function() { 
    $ionicSideMenuDelegate.toggleLeft(); 
    }; 
}