How to use Ionic Cloud with Angular 1.5 - angularjs

I've reached a bit of a dead-end and I am not sure how to proceed. I have developed my Web Application on Angular 1.5.9. I have just now ported over my web app to the Ionic App using ionic start app_name. Everything is working as it should. However, my next step is to set-up the deploy and ionic services. At first I tried adding ionic add ionic-platform-web-client. But since its deprecated and from reading the recent docs, I understood I should now use ionic cloud. So I installed ionic cloud using npm install #ionic/cloud-angular --save. I then got the dependency error saying that:
├── UNMET PEER DEPENDENCY #angular/core#^2.1.1 || ^4.0.0
So looking into it further, I realised that I need to have Angular 2 for it and also to complete the ionic cloud configuration, I also need to update the src/app/app.module.ts file. My questions are:
How can I use Angular 2 when I am using Angular 1.5.6 for my Web App? Rewriting my Angular 1.5 app to Angular 2 is not feasible. Can I use both simultaneously? If so, how? How can I resolve this?
Any help will be great since I cannot find any info on using the latest ionic cloud with Angular 1.5. My current set-up is:
Cordova CLI: 6.5.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.9.0
Xcode version: Xcode 8.3.2 Build version 8E2002
Angular: 1.5.9

Ionic Cloud Client can be used with Ionic 1 / Angular 1.5. This is what I did:
Install Ionic Cloud:
npm install #ionic/cloud --save
Copy the files to www/lib directory:
cp node_modules/#ionic/cloud/dist/bundle/ionic.cloud.min.js www/lib
Include the link in your project’s index.html:
<script src="lib/ionic.cloud.min.js"></script>
Set the Platform to assign your app a unique app id and api key:
ionic io init
Install Caodova's deploy plugin:
cordova plugin add ionic-plugin-deploy --save
Inject Deploy dependency ionic.cloud to the Angular module:
angular.module('application', ['ionic.cloud']) ...
Do the Deploy Check using $ionicDeploy inside the .run Block of the Angular 1.5 config file.
.run(function($ionicDeploy) {
$ionicDeploy.check().then(function(snapshotAvailable) {
if (snapshotAvailable) {
// When snapshotAvailable is true, you can apply the snapshot
$ionicDeploy.download().then(function() {
$ionicDeploy.extract().then(function() {
$ionicDeploy.load();
});
});
}
}); // end deploy check
};
Thats it! It was simpler than I though. Here is the link to the Docs for more info: http://docs.ionic.io/setup.html#installation

Related

How to upgrade angularjs version in ionic v1 app

I am looking for a way to upgrade angularjs version in ionic v1 app. Because of Google Play Console Security alert for my applications.
I got SNYK warning and warning is SNYK-npm:angular:20180202.
SNYK suggestion: Upgrade angular to version 1.6.9 or higher.
My question is, how can i upgrade angularjs version in ionic v1 app?
Thanks.
Assuming you have installed bower and can execute bower command, you can update angular lib in your ionic v1 project by using this command:
bower install angular#1.7.8
bower install angular-animate#1.7.8
bower install angular-sanitize#1.7.8
Hope this helps.

can i build apps with ionic using angular version 1

I want to know that can i use ionic with angular version 1 to builds App.
If yes than which version of ionic will matter in that case, means which version of ionic have to use with angular version 1.
Can i use the latest ionic version with angular version 1.I searched out but did not find any detail answer
Ionic V1 docs supports angular version1. You need to install the Ionic version 2.2.1 and you can use the ionic framework docs v1 in your application with angular 1.
npm install -g ionic#2.2.1
use this command to install ionic.
I hope this will help you.

How to upload and run Angular applications on Firebase?

Firebase Hosting doesn't support Node.js but to install Angular, one has to use npm
npm install -g #angular/cli
Without npm, angular can't install and without Node.js, Angular app can't run. But because Firebase Hosting doesn't support Node.js, we can't upload Angular apps? This also means we can't run npm packages like lodash, underscore etc..
Now there's also AngularFire 2 which is installed using npm!
npm install firebase angularfire2 --save
So to use Angular with Firebase, I've to use npm but the apps created using Angular + Firebase cannot be uploaded on Firebase Hosting because it doesn't supports npm!
Is there any workaround to host Angular apps on Firebase?
Firebase hosting is designated for delivery of static files, i.e. it does not "support Node.js" in the sence that you cannot implement custom server-side code (on Firebase Hosting at least - see Firebase Cloud Functions for this).
Of course you can fully develop your app with NPM as long as its just a full client web-app. You then upload your build result (i.e. compiled JavaScript / TypeScript + HTML + Assets + ...) to Firebase Hosting.
You just cannot run server side code with Firebase Hosting.

Building ionic app with cordova cli

I've just started to use the v1.0.1 of the ionic framework (by manually including the ionic css and js files and changing my directives to ionic directives) with a existing Cordova/Angular app for iOS/Android. My build infrastructure is currently setup to use the Cordova cli tools (v5.0) and I'd prefer to not change it if possible.
Is there any reason I shouldn't continue building my app using the Cordova cli rather than swapping to the ionic cli? Are there any potential compatibility issues? I understand that ionic is just a layer on top of Angular so it shouldn't have any effect on the app build process so building with Cordova should be ok?
Yes, building with Cordova CLI will be perfectly fine - Ionic actually uses Cordova in the backend.
So, for example ionic plugin add http://github.com/somePlugin does basically the same thing as cordova plugin add http://github.com/somePlugin.
Below you can see my terminal output, to affirm what I said above:
C:\Users\Nikola\Desktop\test\plugintest>cordova plugin add cordova-plugin-camera
Fetching plugin "cordova-plugin-camera" via npm
npm http GET https://registry.npmjs.org/cordova-plugin-camera
npm http 200 https://registry.npmjs.org/cordova-plugin-camera
npm http GET https://registry.npmjs.org/cordova-plugin-camera/-/cordova-plugin-camera-1.2.0.tgz
npm http 200 https://registry.npmjs.org/cordova-plugin-camera/-/cordova-plugin-camera-1.2.0.tgz
C:\Users\Nikola\Desktop\test\plugintest>cordova plugin list
com.ionic.keyboard 1.0.4 "Keyboard"
cordova-plugin-camera 1.2.0 "Camera"
cordova-plugin-console 1.0.1 "Console"
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-whitelist 1.0.0 "Whitelist"
C:\Users\Nikola\Desktop\test\plugintest>ionic plugin list
com.ionic.keyboard 1.0.4 "Keyboard"
cordova-plugin-camera 1.2.0 "Camera"
cordova-plugin-console 1.0.1 "Console"
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-whitelist 1.0.0 "Whitelist"
C:\Users\Nikola\Desktop\test\plugintest>cordova plugin remove cordova-plugin-camera
Removing "cordova-plugin-camera"
C:\Users\Nikola\Desktop\test\plugintest>ionic plugin add cordova-plugin-camera
Updated the hooks directory to have execute permissions
Fetching plugin "cordova-plugin-camera" via npm
npm http GET https://registry.npmjs.org/cordova-plugin-camera
npm http 304 https://registry.npmjs.org/cordova-plugin-camera
Saving plugin to package.json file
However, ionic cli has some additional features (like for example ionic resources to name at least one) which you may want to use to generate splash screen and icons.
Found this on the ionic-cli github page:
Ionic uses Cordova underneath, so you can also substitute Cordova commands to prepare/build/emulate/run, or to add additional plugins.
So it's fine to use Cordova to build it.

How do I setup an angularjs app on karma and nodejs

I would like to have a workflow for an angularjs app that uses mocha,chai instead of jasmine
I'm fine with setting up the bare project
npm init
npm install karma-mocha etc..
Is there a node way to install angularjs with a bare bones web project structure ? I'm not sold on yeoman yet...and looking for a leaner system
Thanks

Resources