OnsenUI와 NiftyCloud와 AnglarJs를 결합해 보았습니다. (Monaca)

17740 단어 온 등봉NiftyCloudmonacaangularjs

OnsenUI와 NiftyCloud와 AnglarJs를 결합해 보았습니다. (Monaca)


  • 결론부터 말하면 Model=NiftyCloud,Controller = AnglarJS,View = OnsenUI라는 구성으로 만들어 보았습니다.
  • 만드는 것에서 보면, 대부분 간단한 화면이므로, 간편하게 하고 싶었던 것이, 무학으로 흠뻑 빠르면 의외로 귀찮았다.
  • OnsenUI만으로는, 복수 페이지로 JavaScript를 분할하는 것이 어렵다. . 아무래도 AnglarJS와의 조합이 된다. (OnsenUI는 AnglarJS를 기반으로 하고 있는 것 같기 때문에, 다른 프레임워크 넣을 수 있는 것도..)
  • NiftyCloud를 사용하면, 앱 사이드에서도 서버로부터도 SQL이 발행 가능. Monaca가 서포트 노래하고 있고, 그대로 Model로서 사용하고 싶다. Rest로 만드는 것도 귀찮아 (웃음)
  • 쵸코쵸코 어느 라이브러리도 사용법이 바뀌고 있었다. 날짜에 조심하십시오.


    • 1. 파일 구성은 다음과 같이 했다.

    tree.txt
    ├── config.xml
├── platforms
  〜中略〜
└── www
    ├── README.md
    ├── components
    │   ├── loader.css
    │   ├── loader.js
    │   ├── monaca-cordova-loader
    │   │   ├── bower.json
    │   │   └── cordova-loader.js
    │   ├── monaca-core-utils
    │   │   ├── bower.json
    │   │   └── monaca-core-utils.js
    │   └── numb   ★NiftyCloudのライブラリ
    │       ├── LICENSE
    │       ├── README.md
    │       ├── bower.json
    │       └── ncmb.min.js
    ├── css
    │   └── style.css
    ├── img
    │   ├── xxx.png
    ├── index.html
    ├── js
    │   ├── controller
    │   │   └── TestController.js ★今回作るAnglarJSのコントローラ
    │   └── model
    │       ├── base.js　★ 今回作るNiftyCloudのBaseModel
    │       └── test.js　★ 今回作るNiftyCloudのModel
    ├── lib ★ MonacaでOnenUI+angularで作成。
    │   ├── angular
    │   │   ├── angular-animate.js
    │   │   ├── angular-animate.min.js
  〜中略〜
    │   └── onsenui
    │       ├── CHANGELOG.md
  〜中略〜
    └── test.html　★今回作成するファイル。
  • Model을 작성한다. 이번에는 우선 검색만.

    • base.js
    window.APP_KEY = "XXXX1111"; ★NiftyCloudで取得したKey
window.CLIENT_KEY = "XXXXXXXX222";

var ncmb = new NCMB(APP_KEY, CLIENT_KEY);

    test.js
    var TestDataController = {
    init : function() {
        $(function() {
            TestDataController.prepare();
        });
    },
    prepare : function() {
    },
  getTest : function() {
    return new Promise(function(resolve, reject) { ★非同期にするためPromiseで返す。
    var tt = ncmb.DataStore("T_TEST");
    tt.equalTo("type", "001")
             .order("no",true)
             .fetchAll()
             .then(function(results){
                var tests = new Array();
                for (var i = 0; i < results.length; i++) {
                  var object = results[i];
                  tests.push({"val":object.objectId,"test":object.get("test")});
                }
                resolve(tests);　★resolveをする必要がある。
              })
             .catch(function(error){　★catchは必須っぽい。
                relative(error);　★relativeをする必要がある。
              });
            });
          }
};

    3.Controller를 만듭니다.

    TestController.js
    // Testページのコントローラ
module.controller('TestController', function($scope) {

  TestDataController.prepare();
  var pro = TestDataController.getTest();
  // Promise Success!!
  pro.then(function(value) {
    // Scope内のCtrlの変数を上書きする。
    $scope.testCtrl.messages = value; ★コールバックの中なので、ViewでAsでつけた名前で指定する必要がある。
    // scopeの変更を明示的に通知する。 ★非同期の場合は、$html,$timeoutなどでなければ必須。
    $scope.$apply();
  });
  // Promise Error!!　★これも必須っぽい。
  pro.catch(function(error) {
    console.log(error);
  });
});

    4.View를 만듭니다.

    index.html
    <!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/onsenui/js/onsenui.min.js"></script>
    <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
    <script>var module = ons.bootstrap('myApp', ['onsen']);</script>
    <script src="components/ncmb/ncmb.min.js"></script>
    <script src="js/model/base.js"></script>
    <script src="js/model/test.js"></script>
    <script>TestDateController.init();</script>
    <script src="js/controller/TestController.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components-cus.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        module.controller('AppController', function($scope) {
            $scope.load = function(page) {
              $scope.mySplitterContent.load(page) ★ここは使うテンプレート次第。
            }
            $scope.open = function() {
              $scope.mySplitterSide.open();　★ここは使うテンプレート次第。
            }
          });

        ons.ready(function() {
            console.log("Onsen UI is ready!");
        });
    </script>
</head>
<body ng-controller="AppController as app">
★ここは使うテンプレート次第。
</body>
</html>

    test.html
     <ons-page ng-controller="TestController as testCtrl" id="TestPage">
 <ons-list>
    <ons-list-item>
      <div class="prop-desc">
        <label for="select-native-1">メッセージ</label>
            <select id="ms_status_sel1">
                <option ng-repeat="tc in testCtrl.states" value="{{tc.val}}">{{tc.test}}</option>
            </select>
      </div>
    </ons-list-item>
 </ons-list>
 </ons-page>

    주의사항

    비동기의 경우는 $html,$timeout을 사용하라고 쓰고 있는 사이트가 많지만, $scope.$apply(); 사용하는 것이 추천과 공식에 있었다.
    콜백 안에서 $scope.messages this.messages 라도 효과가 없기 때문에 주의.
    Promise 패턴을 작성하는 방법에 유의하십시오.
    Onsen Theme Roller에서 만든 Theme을 Monaca에서 만든 앱으로 가져 오는 방법.
    Monaca에서 Wikitude SDK를 사용할 때의 주의점(Android)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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