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
    

      

     

    效果:

  • 相关阅读:
    Loadrunner自带协议分析工具:Protocol Advisor
    selenium+python学习总结
    第三篇 HTML 表单及表格
    第二篇 HTML 常用元素及属性值
    第一篇 HTML 认识HTML
    int 问号的使用
    uploadify 上传文件插件
    poj3728 The merchant
    最大公约数
    Bzoj1529/POI2005 ska Piggy banks
  • 原文地址:https://www.cnblogs.com/lihaozhou/p/4694483.html
Copyright © 2011-2022 走看看