ionic-framework离子框架入门


备注

Ionic是一个使用HTML,CSS和JavaScript开发移动应用程序的框架。离子应用程序作为本机应用程序运行,并具有本机“外观和感觉”。

Ionic构建于AngularJS框架之上,为设计,构建和打包移动应用程序提供了完整的解决方案。使用一组模板工具和一个自定义图标库完成设计。 Ionic提供自定义CSS / SASS组件以及Javascript UI Extensions 。可以使用命令行界面(CLI)构建,模拟和打包离子应用程序。

离子模板具有动态性和响应性,可适应其环境,提供原生的“外观和感觉”。这种改编包括布局,风格和图标。 Ionic也提供独立的平台定制 。由于Ionic应用程序使用前端Web技术,因此也可以在浏览器中查看它们以加快开发速度。

默认情况下,Ionic应用程序基于Apache Cordova构建。他们可以访问所有可以使用本机功能的Cordova插件 ,例如推送通知,相机,加速度计等.Cordova应用程序可以在多个平台和设备(手机,平板电脑等)上工作,而且只需要很少的额外工作。可以使用其他跨平台技术 (如trigger.io)切换Cordova。

版本

发布日期
1.3.1“萨尔瓦多” 2016年5月12日
1.3.0“德里” 2016年4月21日
1.2.0“锆 - zeren” 2015年12月9日
1.1.0“xenon-xerus” 2015年8月13日
1.0.0“铀 - 独角兽” 2015年5月12日

安装或设置

1.使用npm(节点包管理器)安装Ionic Framework和Cordova(因为Ionic应用程序基于Cordova):

确保您的系统上安装了最新版本的Node.js.如果您没有安装Node.js,可以从此处安装。

此外,对于Mac用户,在系统上安装了最新的Xcode版本, 可以在此处下载命令行工具和iOs Simulator。

打开终端窗口(Mac)或命令窗口(Windows),然后安装Cordova和Ionic:

$ npm install -g cordova ionic
 

在Mac上,您可能必须使用sudo,具体取决于您的系统配置:

$ sudo npm install -g cordova ionic
 

如果您的计算机上已安装Cordova和Ionic,请确保更新到最新版本:

$ npm update -g cordova ionic
 

要么

$ sudo npm update -g cordova ionic
 

按照AndroidiOS平台指南安装所需的平台依赖项。

注意:iOS开发需要Mac OS X.通过Ionic CLI的iOS模拟器需要ios-sim npm软件包,可以使用以下命令安装:

$ sudo npm -g install ios-sim
 

2.开始一个新的离子项目:

使用现成的应用程序模板之一创建一个Ionic项目,或者使用空白模板创建一个新的。

$ ionic start myApp blank
 

要么

$ ionic start myApp tabs
 

要么

$ ionic start myApp sidemenu
 

3.测试Ionic应用程序:

要在iOS和Android平台上的桌面浏览器中测试您的Ionic应用程序:

$ ionic serve --lab
 

虽然ionic serve --lab 非常适合在多个平台上测试应用程序UI,但它可能会导致Javascript控制台或元素检查出现一些问题,在这种情况下您可能更喜欢:

$ ionic serve
 

要在模拟器中测试您的Ionic应用程序:

$ cd myApp
$ ionic platform add ios android
$ ionic build ios
$ ionic emulate ios
 

用android代替ios进行Android模拟器测试:

$ ionic build android
$ ionic emulate android
 

要在通过USB连接的Android设备中测试您的Ionic应用:

$ ionic run android
 

要在通过USB连接的iOS设备中测试您的Ionic应用程序:

$ ionic run ios --device
 

Ionic Framework Hello World App

完成所有设置后,制作Hello World App

  • 要创建简单空白应用程序,请在终端上运行以下命令:
ionic start HelloWorld blank  // create new project

cd HelloWorld                 // get into HelloWorld directory
 
  • 在subline / webstrome IDE中打开HelloWorld项目:
    • 在www / ditectory中编辑index.html
 <body ng-app="starter">
   <ion-pane>
     <ion-header-bar class="bar-stable">
       <h1 class="title">Ionic Hello World App</h1>
     </ion-header-bar>
     <ion-content>
        <div class="center">Hello World..!</div>
     </ion-content>
    </ion-pane>
 </body>
 
  • 要从终端在浏览器中运行:
ionic serve                  // run the app in browser
 
  • 要添加平台:
ionic platform add android   // add android platform
ionic platform add ios       // add ios platform
 
  • 要在设备上运行:
adb devices                  // to check devices is connected
ionic run android            // to run on android devices
ionic run ios                // to run on ios devices
 
  • 要在livereload中运行:
ionic run android -c -s -l    // to check app in live reload with console. 
 

离子框架简介和安装与设置

离子框架

使用Angular JS和前端Web技术的跨平台移动应用程序开发框架。

官方网站http//ionicframework.com/

文档http//ionicframework.com/docs/

安装和设置

安装离子需要NPM(节点包管理器)和Cordova。

您可以从这里下载并安装Npde JS,它带有NPM开箱即用。

要下载Apache Cordova,您可以从命令行使用NPM

npm install -g cordova
 

如果您已经拥有NPM和Cordova,则可以使用以下命令从命令行安装离子框架。

npm install -g ionic
 

这将安装和设置离子框架,以便您从命令行使用它。

注意*根据您的系统环境,您可能需要使用管理员权限执行。

开始一个新项目

要启动新的Ionic Framework项目,您可以使用以下命令

ionic start myproject
 

要么

ionic start myproject [template_name]
 

模板:

Ionic允许您使用一些内置模板创建项目

tabs (默认):这将创建一个带标签视图的简单应用程序。

sidemenu :这将创建带侧边菜单的离子应用程序。

blank :这将创建一个空白离子应用程序。

这将创建一个名为myproject 的新文件夹,其中包含所有离子项目文件。

要在浏览器中测试项目,可以使用以下命令

ionic serve --lab
 

要么

ionic serve
 

运行模拟要首先在模拟器或手机上执行或测试应用程序,您必须添加平台,您可以使用以下命令

ionic platform [Platform Name]
ionic build [Platform Name]
ionic emulate [platform name]
 

平台名称你可以直接提到各个平台的android和ios,你可以提到多个平台名称,也用空格分隔。

要运行您的应用程序,您可以使用

ionic run [platform name]
 

如需帮助,请使用

ionic --help
 

要么

ionic help
 

有关离子cli的详细说明,请参阅此链接

有关离子中可用的CSS组件,请参阅此链接

有关离子的Javascript API参考,请参阅此链接

为了更快地开发离子,您也可以尝试使用离子Playground

离子框架好运...

Yo(Yeoman)离子项目的离子平台(Ionic Cloud)

离子平台

以简单的方式构建,推送,部署和扩展您的Ionic应用程序。


标题描述:

Ionic平台是一个用于管理和扩展跨平台移动应用程序的云平台。集成服务使您和您的团队能够有效地构建,部署和发展您的应用程序。

文件目标:
Ionic Platform适用于标准的离子项目。但是,遵循任何非标准目录结构的项目可能会面临一些障碍。本文档提供了在使用Yeoman创建的Ionic项目中使用Ionic Platform的步骤。

文件范围:
本文档介绍了使用Yeoman创建Ionic项目并使用Ionic Platform Web Client将其与Ionic Platform集成的基本步骤。本文档介绍了使用Ionic Deploy,Ionic Analytics和Ionic Push的基本步骤。

目标受众:
本文档的目标读者是具有初学者和专家级专业知识的Web /移动应用程序开发人员,他们熟悉以下先决条件。

先决条件:
在尝试本文档之前,您应该熟悉以下框架/工具。


离子框架生成器

Yeoman的Ionic Framework生成器,是用于现代webapps的Web的Scaffolding工具

Node.js是一个基于Chrome的V8 JavaScript引擎构建的JavaScript运行时。 npm是JavaScript的包管理器。从http://nodejs.org下载并安装Node(和npm)

$ npm install npm –g
$ npm install -g yo
 

Yeoman帮助您启动新项目,规定最佳实践和工具,帮助您保持工作效率。

$ yo ionic [app-name]
 

package.json中 ,在devDependencies中包含以下内容

"grunt-string-replace": "^1.2.1"
 

bower.json中包含以下依赖项

"ionic-platform-web-client": "^0.7.1"
 

Gruntfile.js中,脚本文件夹更改为“js” 。如果需要,也可以更改index.html

grunt.initConfig({   yeoman: {…………
    scripts: 'js',
    ………… } })
 

然后跑

$ bower install && npm install
$ grunt
$ grunt serve

$ cordova platform add android 
$ grunt build:android --debug
 

离子平台的Web客户端

提供与Ionic平台交互的Web客户端。

我们需要一些代码让您的应用与Ionic平台对话。我们需要为Ionic应用程序添加Ionic平台Web客户端,以便与插件和Ionic.io平台连接。

$ ionic io init
 

在你的app.js中添加'ionic.service.core'模块依赖项。在Gruntfile.js中添加grunt任务'ionicSettings' ,如下所示。

grunt.initConfig({
ionicSettings: JSON.stringify(grunt.file.readJSON('./.io-config.json')),

ionicIoBundlePath: 'www/bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js',

'string-replace': {
  ionicSettings: {
    files: {
      '<%= ionicIoBundlePath %>': '<%= ionicIoBundlePath %>',
    },
    options: {
      replacements: [
        {
          pattern: 
        '"IONIC_SETTINGS_STRING_START";"IONIC_SETTINGS_STRING_END"',
          replacement: 
        '"IONIC_SETTINGS_STRING_START";var settings =<%= ionicSettings %>; return { get: function(setting) { if (settings[setting]) { return settings[setting]; } return null; } };"IONIC_SETTINGS_STRING_END";'
        }
      ]
    }
  }
},
       copy: {
    ionicPlatform:{
                expand: true,
                cwd: 'app/bower_components/ionic-platform-web-client/dist/',
                src: ['**'],
                dest: 'www/bower_components/ionic-platform-web-client/dist'
               }
    }
});

grunt.registerTask('ionicSettings', ['copy:ionicPlatform','string-replace:ionicSettings']);
 

复制后在init压缩任务中添加'ionicSettings' 。在index.html中 ,在所有标记声明后移动下面的标记。

<script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
 

然后跑

$ Grunt serve
 

离子部署

将实时更新推送到您的生产应用程序,并管理版本历史记录。

Ionic Deploy允许您按需更新应用程序,以进行任何不需要二进制修改的更改,从而节省数天或甚至数周的等待时间。按照以下过程为您的应用程序配置Ionic Deploy。

Gruntfile.js中添加grunt任务'deploy' ,如下所示。

grunt.registerTask('deploy', function () {
  return grunt.task.run(['init', 'ionic:upload' + this.args.join()]);
});
 

然后运行

$ ionic plugin add ionic-plugin-deploy
 

离子部署代码:

var deploy = new Ionic.Deploy();

// Check Ionic Deploy for new code
deploy.check().then(function(hasUpdate) {
}, function(err) {
});

// Update app code with new release from Ionic Deploy
deploy.update().then(function(result) {
}, function(error) {
}, function(progress) {
});
 

部署更新:

为您的应用发送新代码。

创建一个apk并安装您的应用程序。在代码中进行少量更改并使用“ grunt deploy ”部署更改。然后从您的应用更新它。

您也可以从apps.ionic.io仪表板部署它。您可以在没有deploy参数的情况下部署应用程序。然后,在仪表板中,您可以添加元数据和版本控制详细信息,并从那里部署应用程序。

$ grunt build:android --debug

$ grunt deploy --note "release notes"
$ grunt deploy --note "release notes" --deploy=production
 

离子分析

查看事件的实时源或一段时间内原始/唯一的事件/用户数。

您的应用目前有多少用户?有多少人会在明天或下周使用你的应用程序?如果没有信息,您无法确定您的应用是否以您期望的方式使用。按照以下过程为您的应用配置Ionic Analytics。

在您的app.jsionic.service.core后添加“ionic.service.analytics”模块依赖运行分析注册在我们的模块的运行功能的方法。

$ionicAnalytics.register();
 

在Ionic Analytics中,用户在您的应用中执行的每个跟踪操作都由事件对象表示。事件是在特定时间点完成的单个操作。要跟踪您自己的事件,请在发生操作时调用$ionicAnalytics.track(eventType, eventData)

$ionicAnalytics.track('User Login', {
  user: $scope.user
});
 

ion-track-tap指令在轻触其主机元素时发送事件。相关的ion-track-data指令附加事件数据。

<button ion-track-tap="eventType" ion-track-data="expression"></button>
 

apps.ionic.io仪表板中,您可以查看以下分析数据,

事件:查看一段时间内的原始事件数,或完成事件的唯一用户数。事件可以是从加载应用程序的用户到确认购买的任何事件。

渠道:渠道是您希望用户在您的应用中采取的一系列操作,从而达到既定目标。周到使用渠道可以帮助您提高转化率。

细分:查看一段时间内按特定属性分组的事件。或者,计算与给定属性匹配的事件的百分比。细分可帮助您了解用户群,并了解属性如何随时间变化。

保留:跟踪用户在停止使用之前对您的应用有多长时间。或者,确定用户达到既定目标所需的时间,例如已完成的销售。

Pulse:来自用户的活动的实时源。


离子推

向您的用户发送有针对性的自动推送通知。

Ionic Push允许您通过简单的仪表板创建有针对性的推送通知,该仪表板将在用户符合特定条件时自动发送,并提供简单的API以从您自己的服务器发送推送通知。

Android推送配置文件:

Android推送通知使用Google Cloud Messaging (GCM)服务。打开Google Developers Console并创建一个项目。复制您的项目编号 。这将是GCM发件人IDGCM项目编号

API Manager部分中,启用Google Cloud Messaging API 。然后导航到Credentials部分并选择Create credentials,然后选择API Key,然后选择Server Key。为您的API密钥命名,并将Accept requests from ...字段留空,然后单击Create 。保存您的API密钥

验证:

转到Ionic平台上的应用程序仪表板,然后导航到设置 - >证书 。如果您还没有,请创建一个新的安全配置文件,然后点击编辑 。记下配置文件标签

现在,点击Android标签,找到标记为Google Cloud Messaging的部分,输入您在Google Developer Console上生成的API密钥 ,然后点击保存 。转到设置 - > API密钥 。在API令牌下 ,创建一个新令牌并复制它。这将是您的API令牌

$ ionic plugin add phonegap-plugin-push --variable SENDER_ID="GCM_PROJECT_NUMBER"
$ ionic config set gcm_key <your-gcm-project-number>
$ ionic config set dev_push false
$ ionic io init
 

注意:phonegap-plugin-push需要Android支持存储库版本32+

app.js中,ionic.service.core之后添加' ionic.service.push '模块依赖

离子推送代码:

初始化服务并在模块的运行功能中注册您的设备。您需要用户注册的设备令牌才能向用户发送通知。

$ionicPush.init({
  debug: true,
  onNotification: function (notification) {
    console.log'token:', notification.payload);
  },
  onRegister: function (token) {
    console.log('Device Token:', token);
    $ionicPush.saveToken(token); // persist the token in the Ionic Platform
  }
});

$ionicPush.register();
 

然后运行

$ grunt build:android --debug
 

Ionic Push允许您通过仪表板创建有针对性的推送通知。您还可以使用以下格式从服务器发送通知。

curl -X POST -H "Authorization: Bearer API_TOKEN" -H "Content-Type: application/json" -d '{
    "tokens": ["DEVICE_TOKEN"],
        "profile": "PROFILE_TAG",
        "notification": {
                "message": "Hello World!"
        "android": {
                  "title": "Hi User",
                  "message": "An update is available for your App",
                  "payload": {
                        "update": true
                  }
            }
    } }' "https://api.ionic.io/push/notifications"
 

注意:除了创建推送配置文件之外,为iOS配置Ionic Push的步骤相同。要创建iOS推送配置文件,请参阅http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles


示例应用程序

在此处下载示例应用程序

此处附有示例应用程序以供参考。

IonicApp:
│
│   bower.json
│   Gruntfile.js
│   package.json    
│       
└───app
    │   index.html
    │   
    ├───js
    │       app.js
    │       controllers.js
    │       
    └───templates
            home.html
            menu.html
 

注意:这不是一个独立的项目。给出的代码仅用于与使用本文档上面给出的过程创建和实现的项目进行比较,以防出现任何问题或错误。