'm not planning on using JQuery much at all in my new Ionic 2 app.
However I do need to include the Datatables JQuery plugin, as I'm looking for a consistent UI across platforms.
Datatables is available on npm, as separate js and css packages.
I don't have any clue about how to start including the plugin in my app and then initialising the datatables, which I would normally do with $(.table).datatable();
Has anyone done this? Could give me any pointers in this 101 question...
Tom
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.
The idea is not new, like Wordpress, Oxwall : a platform created by some guru guy that allowing other dev guys to add new apps (like forum, blog, market-place, whatever) into the platform easily. By easy, we mean either just install new plugin by upload or less user friendly coding new plugin without changing the core code.
Actually, we have a working solution with angular1 but quite clumsy, that's it, multiple stand-alone ng-app within a website, like:
domain.com/forum-spa
domain.com/dating-app-spa
..etc..
Good thing about it is quite straightforward to implement, not much to worry about lazy-loading. But we are not happy with that approach for many reasons.
Angular2 is really close. We hope it can bring a better solution for building a large web platform
iframe
custom components that are added at build time that are added depending on user data like explained in Angular 2 dynamic tabs with user-click chosen components
This approach is compatible with the offline template compiler
There is also a more flexible way that supports user-provided component templates How to realize website with hundreds of pages in Angular2
This approach is not compatible with the offline template compiler and requires the Angular parser and compiler to be included in the build output.
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'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!
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!