免费试用IBM Cloud
使用IBM Cloud Lite快速轻松地构建您的下一个应用程序。 您的免费帐户永不过期，并且您将获得256 MB的Cloud Foundry运行时内存以及2 GB的Kubernetes Clusters。 获取所有详细信息，并了解如何开始。 如果您是IBM Cloud的新手，请在developerWorks上查看IBM Cloud Essentials课程 。
Ionic是使用Web技术创建跨平台混合移动应用程序的流行框架。 Ionic基于AngularJS框架，并使用Cordova将原生移动设备功能（例如Push，Camera或GPS）公开给JavaScript代码。
本教程说明如何通过IBM bms-push Cordova插件创建使用IBM Cloud Push服务的入门级Ionic移动应用程序。 以这种方式使用插件可以从Angular控制器中访问推送服务。 本教程将指导您完成在Ionic AngularJS移动应用程序中正确使用bms-push插件所需的最少步骤。 它描述了如何使用该插件创建IBM Cloud Push AngularJS服务，然后如何以“ Angular方式”配置和调用该服务。
在GitHub上获取代码
遵循以下步骤将得到相同的代码，并为您提供在AngularJS应用程序中使用IBM Cloud Push的实用知识。
要在IBM Cloud上创建新的移动后端：
登录到IBM Cloud仪表板并创建一个新应用程序。 选择样板 ，然后选择Mobile First Starter样板。 输入应用程序的唯一名称，然后单击完成 。现在应该创建该应用程序，并将包含一个使用StrongLoop在Node.js运行时环境中运行的示例To Do应用程序。 它还将包含针对Cloudant NoSQL数据库的服务，推送通知功能以及IBM Cloud App ID服务 。
在本教程中，我们将仅使用推送通知服务。 通过打开网络浏览器并转到应用路径来测试新创建的应用。
要安装Ionic并使用其命令行工具来创建新应用，请执行以下操作：
安装Node.js。 使用npm install -g cordova ionic安装Ionic和Cordova命令行工具。 转到您要在其中创建应用程序的文件夹，并使用ionic start APP-NAME side-menu创建一个新的ionic项目。 （我们选择使用侧面菜单代码模板只是为了使它更像是真实示例。） 使用cd进入新创建的项目文件夹。 使用ionic platform add android ios为您的应用程序添加目标移动平台。 使用cordova plugin add bms-push添加IBM Cloud Push cordova插件。 （这还将添加IBM Cloud Core插件（bms-core）。）在您最喜欢的IDE中打开应用程序，并在www / js文件夹中创建一个名为services.js的文件，并添加以下代码：
angular.module('starter.services', []) .service('BluemixService', function ($window, $q) { this.connect = function (appGuid, clientSecret) { // create deferred object using $q var deferred = $q.defer(); if (window.cordova) { $window.BMSClient.initialize(BMSClient.REGION_UK); $window.BMSPush.initialize(appGuid, clientSecret); var success = function (message) { //fires on success of MFPPush.registerDevice var deviceId = JSON.parse(message).deviceId; deferred.resolve(deviceId); }; var failure = function (message) { //fires on failure of MFPPush.registerDevice deferred.reject(message); }; var options = { ios: { alert: true, badge: true, sound: true } }; var notification = function (notification) { //if we don't have this then alerts are NOT displayed at all when the app is open alert(notification); //this will just pop up a default alert box when the app is open. When the app is not open, the alert will be handled by the native alert process //instead of the default alert pop up you could use something like the cordova toast plugin here // eg $cordovaToast.showShortTop(notification).then(function(success) { // success //}, function (error) { // error //}); }; $window.BMSPush.registerNotificationsCallback(notification); $window.BMSPush.registerDevice(options, success, failure); deviceId = deferred.promise; } else { deviceId = "Web View"; } return $q.when(deviceId); }; })打开www / index.html文件，然后添加指向我们新的services.js文件的链接。 您将看到一个包含指向app.js和controllers.js的链接的部分。 该新链接应添加到此处。
<script src="js/app.js"/> <script src="js/controllers.js"/> <script src="js/services.js"/>打开app.js文件， angular.module从angular.module('starter', ['ionic', 'starter.controllers'])开始的angular.module行更改为angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']) 。 这使应用程序知道了services.js文件中的新服务模块。
在上面更新的行下添加以下常量：
.constant('appGUID', 'appGUIDFromBluemixServiceHere') .constant('clientSecret', 'clientSecretFromBluemixServiceHere')从IBM Cloud Push服务获取appGUIDFromBluemixServiceHere和clientSecretFromBluemixServiceHere的值。 在IBM Cloud仪表板中打开服务，选择“ 配置”菜单，然后单击页面右上方附近的“ 移动选项”按钮以获取这些值。
生产应用程序注意事项：这些值永远不应存储在生产应用程序的代码中。 通常应从成功登录到应用程序从后端将它们提供给应用程序。
该服务将通过一个或多个控制器的调用来使用。 对于我们的示例，我们将在入门模板中包含的AppCtrl控制器内添加对doLogin函数的调用。
打开www / js / controllers.js文件，然后找到AppCtrl控制器。 注入新BluemixService通过从改变该行的AppCtrl控制器.controller('AppCtrl', function ($scope, $ionicModal, $timeout) {到.controller('AppCtrl', function ($scope, $ionicModal, $timeout, BluemixService, appGUID, clientSecret) { 。
请注意，我们还注入了appGUID在app.js中定义的appGUID和clientSecret常量。 在生产应用程序中，应通过某种动态方式将它们提供给控制器，以便它们不会存储在应用程序的代码中。
从以下位置更改doLogin函数（位于AppCtrl控制器内）：
// Perform the login action when the user submits the login form $scope.doLogin = function () { console.log('Doing login', $scope.loginData); // Simulate a login delay. Remove this and replace with your login // code if using a login system $timeout(function () { $scope.closeLogin(); }, 1000); };至：
// Perform the login action when the user submits the login form $scope.doLogin = function () { console.log('Doing login', $scope.loginData);BluemixService.connect(appGuid, clientSecret).then(function success(response) { //we were successful and the response contains the deviceID supplied by the IBM Cloud push service console.log("We registered OK. The deviceID of this device is: " + response); }, function failure(response) { //Registering for push did not work console.log("Registering for push did not work"); }); // Simulate a login delay. Remove this and replace with your login // code if using a login system $timeout(function () { $scope.closeLogin(); }, 1000); };现在剩下的就是为所选平台设置push和core插件。 该过程非常复杂，可能会发生变化，因此超出了本教程的范围。 该过程在GitHub上有详细描述。 请注意，本教程已经介绍了一些步骤。
该应用程序的成功或失败仅记录在控制台中，并且只有在从设备或仿真器（而不是浏览器）调用时，推送注册才有效。因此，使用ionic serve命令运行该应用程序不会调用推送注册。 您将需要查看模拟器或设备日志以查看此应用程序的运行情况。
Ionic和Cordova是构建混合移动应用程序的流行组合，但并非所有Cordova插件都设计用于Ionic之类的AngularJS框架。 这对于Ionic新手开发人员而言尤其令人沮丧，并且最终可能会浪费您许多时间，试图弄清楚如何使他们一起工作。 我希望本教程对希望以正确的Angular方式使用IBM Cloud Push服务的人们有所帮助。
翻译自: https://www.ibm.com/developerworks/cloud/library/cl-develop-angular-ionic-mobile-applications-using-bluemix-push/index.html
相关资源：AngularIonic：具有REST API的Angular Ionic移动应用程序-源码