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.
Related
I have one angularjs 2 UI (without node modules) which i have to integrate with my backend. After installing Angular cli, Can i simply do npm install in the angularjs 2 directory folder as it have package.json or create a new app after installing angular cli and then do npm install for some node modules specific to my angularjs project.
Will the first approach Work successfully as it is easier
If your backendend and frontend repos are in same package.json just serve your app. You can separate these ( in the future it will be more effective ) . So just search your starting command and run the app.
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
I create an pure Ionic 2 project with the command.
ionic start myIonic --v2
The pure project work great, but when I compared the project structure with angularJS 2, I found the "systemjs.config.js" is missing.
My question is could "systemjs.config.js" file be replaceable?
If the answer is positive, what is the alternative file in Ionic2 based project ?
i have created a angularjs 2 based poject using angular2-cli using below command.
ng new PROJECT_NAME
when i create the project using angular2 cli, then also its not creating systemjs.config.js file.
link for angular2 cli new app .
And Systemjs.config.js file is creating in angular2 project only if i create quick start application, that too we are only creating manually. as given in official quick start document.
link for angular2 quick start app.
So using this 2 examples we can believe that systemjs.config.js file can be replaceable.
The angular-cli and ionic moved the build system from SystemJS to Webpack.
For angular
npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli#latest
Full angular-cli migrate docs: https://github.com/angular/angular-cli/wiki/Upgrading-from-Beta.10-to-Beta.14
I built a web-app using AngularJS + Angular Material and now want to deploy it to the AppStore (using Cordova I guess?)
What are the steps that I need to do to achieve this?
Install cordova
npm install -g cordova
Create a new cordova project.
cordova create hello com.example.hello HelloWorld
This will create new directory - hello and inside hello you will have your new cordova project - HelloWord, package name - com.example.hello
Add your angularjs app code to 'www' folder inside hello directory.
Now add iOS as a platform to your cordova project.
cordova platform add ios --save
If you need to access gallery, camera, or any other device feature, you will have to add a cordova-plugin for same.
For example to get access to device camera.
cordova plugin add cordova-plugin-camera
Read more about how you will handle events associated with camera inside your angular app. Go through that plugin's documentation.
I would recommend you to use ng-cordova for using cordova-plugins. Read more about ng-cordova here.
Now you will build your cordova project to generate .ipa file for iOS device.
cordova build ios
Inside your hello directory you will have a xcodeproj file -hello/platforms/ios/hello.xcodeproj open it in Xcode and run on an emulator to test.
Purchase your apple developer account and sign into your xcode with your apple account.
From Xcode you will get option to Archive And Publish your app to Appstore.
Few links to get started
App store documentation to know detailed publishing process here
Cordova documentation here
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