It is not clear to me how to "build" a UI with Appgyver Steroids. It looks like it uses only the CSS side of Ionic to render views, and not the javascript side.
This way is not possible to design UI with Ionic angular directives.
Am I wrong?
So my question is: which is the right way to design views in a Steroids app? Just by HTML and Ionic CSS classes? Is there a guide, maybe with example?
Is it possible to simply include Ionic javascript and use its directives? Some drawbacks?
Merituuli from AppGyver here.
We don't use the angular directives of Ionic because Steroids has methods to use native tabs and drawer elements, thus making the solution Ionic made unnecessary.
If you however want to include the Ionic angular directives you can do that by downloading the files you want to use from http://code.ionicframework.com/#, adding them to the /vendor folder and including them in your application.html.
If you need guides, tutorials and examples of using Steroids tabs, modals etc: https://academy.appgyver.com/categories/3-user-interface-and-design/contents
Hope this helps!
Related
Let me preface this by saying my knowledge of node apps and javascript is very limited, all my programming knowledge comes from a python data analyst background.
So, I am trying to learn frontend and build an app in Svelte. I will serve this app with another backend so I will not be using SvelteKit. I am also using Ionic for my UI framework. I will probably use Routify for routing but this is beyond the scope of this question. Also, I know svelte isn't officially supported by Ionic but i'm not interested in using another framework.
The simple method would be to include the Ionic CDN in the svelte index.html. However, I would like to keep my files in one place when I build the final app and not require a CDN or even possibly a network connection if I decide to use Capacitor to build for mobile devices. So, I'm not sure how to proceed. I would like to bundle Ionic (Ionic/Core - IonicIcons) with the default JS and CSS bundles that svelte builds using Rollup. Googling around a bit iv'e discovered I apparently need to use something called "rollup-plugin-css-only" to bundle the CSS and somehow include the JS files in commonjs in the "rollup.config.js". I tried adding the path to the JS files to commonjs but I couldn't see any changes to the bundled JS the svelte outputs. I also have no idea how to use add the css or use "rollup-plugin-css-only". Instructions and explanations iv'e found haven't been very helpful.
So, in summary... I'm trying to bundle Ionic into my svelte project without using a CDN and haven't figured out how too do it yet. I also may not be understanding this workflow correctly so let me know if I got something wrong. I just need an explanation or example of Ionic bundled in a svelte app. I would also like to mention that the workflow I am looking to accomplish will also allow custom themes in Ionic with the CSS processing.
Up to Ionic3, it was closely packed with Angular.js. So probably the navigation jobs were done by some Angular.js functionality. I can be wrong since I have not worked with Ionic or Angular.js before.
Ionic4 will be framework agnostic, written with Stencil.js and compiled with Stencil.js Compiler to Web Components standard components.
I wonder how navigation tasks will be handled, and by whom? Does Ionic4 have routing capabilities? Or it does not and developer's client-side router of choice must be used, especially I wonder the use case with Stencil.js since it has a router too. For example, how it should be used for a tabbed application Mark up and styles by Ionic, and routing with Stencil.js?
Ionic will now use angular router. it will make use of angular router-outlets. for the tabbed application markup, each tab will be provided with a named router outlet. Read more here:
Ionic/angular v4 router
Ionic 4 will now use angular routing method instead of default ionic 3 (push/pop) methods.
Must read the migration notes from ionic team.
Ionic has a component for simple navigation: https://ionicframework.com/docs/api/nav
But it's meant for simple navigation inside modals that doesn't affect the browser's url.
This navigation is controlled by calling methods on the element, so in Angular you have to use #ViewChild and it becomes complex to handle state and have deep navigation trees.
You should use a client-side router for most of your view to take advantage of code splitting and lazy loading your js bundle.
What programming language is behind ionic 2, on github i can only see css classes for tags of ionic 2 not the actual code of tag, where exactly I can find this, the implementation of tags of ionic 2
Ionic2 is written using TypeScript and Sass. It also leverages elements (Component, Directive, ...) and mechanisms provided by Angular2.
The source code of the framework can be reached in Github: https://github.com/driftyco/ionic/tree/2.0/ionic.
If you look for the source code of components, you could have a look at the components folder.
For example for tabs, here is the corresponding TypeScript source code:
https://github.com/driftyco/ionic/blob/2.0/ionic/components/tabs/tabs.ts
https://github.com/driftyco/ionic/blob/2.0/ionic/components/tabs/tab.ts
...
And the SASS one:
https://github.com/driftyco/ionic/blob/2.0/ionic/components/tabs/tabs.scss
...
Ionic 2 is built using Typescript (same as Angular 2) and Sass. We have found that Typescript is really great for open-source development since the compiler and static types eliminate an entire class of potential issues.
Ionic 2 will support traditional 'desktop' web, mobile web/progressive web apps, hybrid apps like Ionic 2, and even hybrid 'desktop' apps via Electron.
Ionic runs within Apache Cordova (PhoneGap). Ionic is a combination of javascript, html and css files written for you, so that you don't have to write them yourself and concentrate on your application.
So, basically you want to learn in what programming language Cordova has been written? As you can see on GitHub, it uses different languages for different platforms. Mostly Objective-C for iOS, Java for Android, etc.
I couldn't find anything about this. basically i want to create a base template, with all the head tag and container in body or menu, etc... so that other templates can extend it.
how would i achieve this with Ionic framework?
The way you have phrased your question leads one to think you have not quite understood how Ionic works...
A typical Ionic app has only one index.html file with a <head>. The rest of the .html files are just content templates to be rendered as the content of that page. So you don't need the "base template" you are asking about, that is all taken care of by Ionic, from the index.html.
I would suggest reading and following http://ionicframework.com/docs/guide/starting.html
I'm new to Ionic and would like to implement a typeahead for displaying the users list without using Bootstrap and would love if provided with an example .
I was looking for something similar for an ionic app I was building. I can provide a few links that you can look at and choose the most appropriate for your case.
https://github.com/sn0opr/ionic-autocomplete
https://github.com/guylabs/ion-autocomplete
http://www.sitepoint.com/creating-a-typeahead-widget-with-angularjs/
The last link is written is great tutorial written in pure angular. The first two links are projects you need to include in your app and then use them as directives to achieve your goal. Cheers!