angular ionic_使用IBM Cloud Push服务开发Angular Ionic移动应用程序
angular ionic
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方式”配置和调用该服务。
遵循以下步骤将得到相同的代码，并为您提供在AngularJS应用程序中使用IBM Cloud Push的实用知识。
在IBM Cloud中创建移动后端
要在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）。）
创建Angular IBM Cloud Push服务
在您最喜欢的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);
};
})设置应用以使用services.js文件和我们新的推送服务
打开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服务的人们有所帮助。
angular ionic