monaca에서 스마트 폰 앱을 만들자 #6

페이지 전환

일반적으로 앱은 여러 페이지로 구성됩니다. 목록 페이지와 상세 페이지.
그런 이유로 monaca에서도 페이지 전환을 시도합니다.

하는 것은 간단하고 마지막으로 만든 page1.html의 ons-list-item에 ng-click를 추가하기 만하면됩니다.

    <ons-list-item modifier="chevron" ng-repeat="os in oss" ng-if="os.kind == 'android'" ng-click="myNavigator.pushPage('page2.html');">

myNavigator 가 키모로 페이지 전환을 제어하고 있습니다. 페이지의 스택을 관리하고 있습니다.
덧붙여서 myNavigator 는 index.html 로 정의되고 있습니다.

index.html

...
<body>
    <ons-navigator var="myNavigator" page="page1.html">
    </ons-navigator> 
</body>
...

이거야.

덧붙여서 페이지 전환의 애니메이션은 변경할 수 있습니다.

아래에서 위로 스루와 나타나는 패턴

<ons-list-item modifier="chevron" ng-repeat="os in oss" ng-if="os.kind == 'osx'" ng-click="myNavigator.pushPage('page2.html',{animation:'lift'});">

모얀과 바뀌는 패턴

<ons-list-item modifier="chevron" ng-repeat="os in oss" ng-if="os.kind == 'osx'" ng-click="myNavigator.pushPage('page2.html',{animation:'fade'});">

자세한 내용은 Onsen UI 설명서를 참조하십시오.

다음 페이지로 데이터 전달

페이지가 전환되면 다음은 데이터.
동적 데이터를 처리하려면 Controller가있는 것이 더 좋으므로 page2.html도 Controller로 설정하십시오.

js/controller/page2controller.js

// This is a JavaScript file
app.controller('Page2Ctrl',function($scope, OSService){

    var searchCallback = function(os){
　　　　//受け取ったosをviewに渡す
       $scope.os = os;
    }

    // navigator経由でpage1.htmlで設定されたオプションを取得
    var page = myNavigator.getCurrentPage();
    var osname = page.options.osname;   

　　//osnameに一致するOSを取得。検索結果は例によってcallbackで受け取る
    OSService.getOS(searchCallback,osname);
}) ;

service에 osname 지정으로 os 오브젝트를 취득하는 메소드 추가

js/service/osservice.js

...
   /**
     * osnameとnameが一致するosのオブジェクトを返す
     */
    service.getOS = function(callback,osname){
        for(var i=0; i<oss.length; i++){
            if(oss[i].name == osname){
                callback(oss[i]);
            }
        }
    }
...

page1.html에 선택된 행의 정보를 page2에 전달하는 처리 추가

page1.html

...
    <ons-list-item modifier="chevron" ng-repeat="os in oss" ng-if="os.kind == 'android'" ng-click="myNavigator.pushPage('page2.html',{osname:os.name});">
...

page2.html 다시 쓰기

page2.html

<ons-page>
    <div ng-controller="Page2Ctrl">
        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">Page 2</div>
        </ons-toolbar>
        <div style="text-align: center">
            <h1>Page 2</h1>

            <p>{{os.name}}</p>
            <p>{{os.kind}}</p>
            <p>{{os.desc}}</p>

            <ons-button onclick="myNavigator.popPage()"> Pop Page </ons-button>
        </div>
    </div>
</ons-page>

index.html `에 추가한 컨트롤러 로딩 추가

index.html

...
    <script src="js/controller/page2controller.js"></script> <!-- 追加 -->
...

무사히 page2에 선택한 OS의 정보가 건네졌습니다.

이것으로 monaca로 스마트 폰 앱을 만들자 시리즈는 일단 완료입니다.
만약 요청이 있으면 코멘트 해 주시면 써 버릴지도! ?

Reference

이 문제에 관하여(monaca에서 스마트 폰 앱을 만들자 #6), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/furu8ma/items/8ab9dd333e2497a0a6f3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다