zoukankan      html  css  js  c++  java
  • use ngCordova in ionic

    1 以使用ActionSheet为例子,虽然ionic已经有类似的directive,但是试一下ngcordova的也不防

    2 download ionic seed 熟悉使用nodejs的朋友,可以使用nodejs工具去下载

    1 sudo npm install -g cordova ionic
    2 新建工程目录,在cmd命令下进入到该目录。
    3 下载工程:ionic start myApp tabs
    4 cd myApp
    5 下载iOS的platform : ionic platform add ios
    6 build ios: ionic build ios
    7 运行工程( 需要ios系统才可以): ionic emulate ios
    

    3 在myapp目录下面 

    bower install ngCordova
    

    4  把ActionSheet plugin下载到plugins是目录

    cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-actionsheet.git
    

    5 代码部分

       5.1 把ng-cordova.js添加到index.html

       <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="lib/ngCordova/dist/ng-cordova.js"></script>
        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>
    

      5.2 html 代码

    <button data-ng-click="testDeleteSheet()">test actionsheet</button>
    

      5.3 js代码

    $scope.testDeleteSheet = function () {
            var options = {
              addCancelButtonWithLabel: 'Cancel',
              addDestructiveButtonWithLabel : 'Delete it'
            };
            window.plugins.actionsheet.show(options);
          }
    

      5.3 在config.xml添加下面代码

    <feature name="ActionSheet">
        <param name="ios-package" value="ActionSheet" />
      </feature>
    

      

    运行:记得要build在emulate

    ionic build ios
    ionic emulate ios
    

      

     

    效果:

  • 相关阅读:
    flask之Blueprint蓝图
    flask之Flask、config配置
    flask之路由route
    flask之request
    flask之response
    pyhton中的深浅copy
    jQuery选择器
    Html常用标签
    python中的字典dict
    python基础知识
  • 原文地址:https://www.cnblogs.com/lihaozhou/p/4694483.html
Copyright © 2011-2022 走看看