Before anyone tells me the ionic serve or ionic cordova run commands or anything, that’s not what I mean.
First, context.
I’m trying to create an experience sampling app using cordova by following the instructions on this website. The way the website shows you how to build the app doesn’t have anything on editing the looks. So I googled a bit to figure out how to add a nice UI to a cordova application, which is when I found ionic.
I created an app using ionic start test blank and the UI is good enough for me.
Now the website I linked to tells you to edit the /www/js/index.js file, but when I ran the blank ionic app, I found out that the code under src/pages/home/ was being run. So I have to following questions:
- When I run an ionic app, what files are being run in what order?
- What would be the equivilient
index.js file to edit in an ionic app?
- How can I tell ionic to not use the content of
/src and instead run like cordova does?
Note: I am really really new to all of this, so I apologize if my question is a bit vague. Please ask me anything you requre and thank you for answering and putting up with me 
The concept of “what files are run in what order” doesn’t really make sense for a web application, and you should try to avoid thinking in terms of rigid order and timing, because that will be frustrating. Web apps are reactive, so you need to think in terms of “what actions do I want to present to the user, and how should the app react and handle them?”.
Under the hood, when you run ionic’s build scripts, all of the code you write underneath src/ is bundled up into several files located underneath www/build. When you bundle into a mobile app, all that gets rolled into an apk (android) or ipa (iOS) binary.
There isn’t a direct analog in the sense that there is no single file to edit. You write multiple files under src/.
The build tools are an important part of Ionic, and attempting to use the framework without them would be an extremely frustrating experience even for a mobile app veteran.
2 Likes
Are you familiar with functional programming? That’s a good first step. Think functionally, not procedurally. You’re in an partially asynchronous environment, and different threads can start and end at different times. It’s called reactive programming because your job is to react to information when it arrives.
1 Like
Hi there! So that site seems to go over a vanilla cordova starter project.
Which is a much simpler setup that what Ionic has.
So a overall rundown of how things happen…
-
ionic start myApp blank
This creates the base project with all the build tools you’ll need to get started. This include compiling code from typescript down to regular old es5.
-
ionic serve
This will compile everything to www/ and start your live reload server.
This is the part that is similar to a plain cordova app. But instead, we treat this as a dist folder, were we can compile our code and place in there.
The equivalent index.js file would be your main app.component.ts file. But I would like to push that it’s not a 1:1. Ionic apps offer a more higher level setup than a raw cordova app.
As for not using src/ this is something we do not do. Because of how we compile our code down to ES5, we need a build target. Instead, work with in the src folder instead.
1 Like
So when I run ionic serve I get the default template page. When I run cordova run browser (after adding the browser platform, of course) I get the same visual result (I’m not sure that if what’s going on under the hood is the same). In the STDOUT of the cordova run browser command, I get this:
200 /index.html (gzip)
200 /build/main.js (gzip)
200 /cordova.js (gzip)
200 /build/polyfills.js (gzip)
200 /build/main.css (gzip)
200 /build/vendor.js (gzip)
200 /cordova_plugins.js (gzip)
200 /plugins/cordova-plugin-device/www/device.js (gzip)
200 /plugins/cordova-plugin-splashscreen/www/splashscreen.js (gzip)
200 /plugins/cordova-plugin-device/src/browser/DeviceProxy.js (gzip)
200 /plugins/cordova-plugin-splashscreen/src/browser/SplashScreenProxy.js (gzip)
200 /plugins/cordova-plugin-statusbar/src/browser/StatusBarProxy.js (gzip)
200 /plugins/cordova-plugin-statusbar/www/statusbar.js (gzip)
200 /plugins/ionic-plugin-keyboard/www/browser/keyboard.js
200 /config.xml (gzip)
That shows which files it’s running in what order, as far as I understand. So I decieded to append some of the template code from experiencesampler.com’s github repo, and I got almost the same visual result, and the output was this:
200 /index.html (gzip)
200 /css/index.css (gzip)
200 /js/plugin/mustache.js (gzip)
200 /cordova.js (gzip)
200 /js/plugin/jquery-2.1.3.min.js (gzip)
200 /js/plugin/moment-with-locales.min.js (gzip)
200 /build/main.js (gzip)
200 /js/index.js (gzip)
200 /build/polyfills.js (gzip)
200 /build/main.css (gzip)
200 /js/plugin/combodate.js (gzip)
200 /cordova_plugins.js (gzip)
200 /plugins/cordova-plugin-device/www/device.js (gzip)
200 /plugins/cordova-plugin-device/src/browser/DeviceProxy.js (gzip)
200 /plugins/cordova-plugin-splashscreen/www/splashscreen.js (gzip)
200 /plugins/cordova-plugin-splashscreen/src/browser/SplashScreenProxy.js (gzip)
200 /plugins/cordova-plugin-statusbar/www/statusbar.js (gzip)
200 /plugins/ionic-plugin-keyboard/www/browser/keyboard.js
200 /build/vendor.js (gzip)
200 /plugins/cordova-plugin-statusbar/src/browser/StatusBarProxy.js (gzip)
The difference between the results of the two runs is that on the second one, I get a blue screen and then the ionic app, and the text on the app is center aligned. The blue screen is probably from /css/index.css which set the background color to blue. I’m not sure about the center alignment, but I’m guessing the reason is the same.
What I’m trying to do in the end is take that ionic UI, and use it in a vanilla cordova app. Is there any way to do that?
I’m using a javascript template as my index.js and editing it a bit. Will regular JavaScript code work in app.components.ts?
And what is the location of app.components.ts?
Sorry, but somebody else is going to have to help here, because I see zero value in this line of inquiry.