I'm creating a new Ionic app that I need to take a lot of styling from an old app for. The new app is ionic 2, the old is ionic 1. The ionic 1 app is pulling a lot of styles from lib/ionic/css/ionic.css. I can't find a similar thing in the ionic 2 app. Where do I find this? Do I just need to copy the file over? And will there be collision issues with ionic 2?
The css files would be under theme folder, app.core.scss where you define the folder path.
For example,
-App
--Pages
---Login(folder inside pages)
----Login.html
----Login.js
----Login.scss
---MainPage(folder inside pages)
--Theme
---app.core.scss(inside theme folder)
and define the folder path in app.core.scss :
#import "../pages/Login/Login";
Do note that the css styles are separated in ionic 2, but for my ionic 2 version, there are instances where same html ID css get mixed up, thus it would be better to have different IDs for different pages.
What boilerplate template did you use to create you app? There might be different structure for the folders and files. But the idea is that there will be bunch of .scss files in different folders which should be compiled to one css file when you build/serve the app.
For example there could be structure as indicated by #Gene or the main scss files could be in /app/app.scss and /theme/variables.scss, and individual components scss will be in the component directories
Related
What I want to achieve is to combine all js/css into the index.html, I have achieved this with svelte as it only has a single js file. But don't know how to do it with flutter as it has many files built.
Flutter web doesn't use .css, just .js and a boot-strapping .html file. Mixed-mode files are hard to edit, and the .js file is updated for every build, so it'd be bad to overwrite the index.html if it had localizations, like other JS packages or font references or Google Analytics.
I'm developing a new Hugo site and in this case I thought to create also a template so.I can use for future site.
Well in the template there are tons of vendor files and library because depending of the pages that the site will implement these library will be used. The problem is on the deploy. For example I use Line icons library that has a lot of .png files. (For example 200 files).
Well in the template I put all the files but could happen that in the site that implement this template I use only five icons. Is there a way that look around the final HTML and the usage of the icons and delete in the public folder the not necessary files?
Not directly.
You would need to add an utility script to your template, in order for any user implementing said template to be able to call this script on demand.
That script should then be able to:
analyze the HTML files generated in public_html
cleanup the icons accordingly
I'm just starting to create a controller for use with Airconsole. I'd like it to be somewhat complicated and will be using Angular to create different pages.
In Unity, I can drag in a controller.html file. However, I've been getting resource not found errors when I try to access say controller.js or controller.css. How can I upload multliple files to the Airconsole host? Is there a general pattern used by other games?
So far I'm considering
hosting my app separately and just redirecting to my separate web page. This seems to give errors in the emulator though.
Compiling the entire app into just one HTML file.. Not sure how to get these entirely into one file. When I run ng build I get a smaller dist compiled file, but it still consists of several smaller files. Will try dragging that into Unity and trying again. But dragging the entire Angular project inside Unity felt like a really bad idea..
Link to files hosted on separate pages but still have the uploaded HTML file do something.. But not sure how much I need to do here vs how much I can move to other files that I host.
You can create your controller using controller.html with Angular (1?!), have different pages (e.g. via ng-include and the angular routing module) and upload everything to AirConsole (developers).
By using ng-include you can have multiple .html views you dynamically load into the controller.html.
I once wrote an example app for AirConsole and Angular:
https://github.com/francois-n-dream/airconsole-angular-phaser
Just think of it as if you would make a (mobile) website which in addition uses the AirConsole API for device communication.
My basic "how to include other files" question was answered well by another question: How to include js and css.
For the more generic question of working with Angular, I still haven't quite figured it out. But what I'm doing at the moment:
I have an Angular project outside of Unity. I run ng build to compile everything into a folder dist. Then two options work:
Deploy the dist folder to static file hosting and change index.html's relative links to point to the separately hosted files with <base href="https://cloudfilehosting/airconsole-host/">
OR
Copy the dist folder into Unity's Assets/WebGLTemplates/AirConsole folder.
I am using ionic-cli 2 for generating pages for my ionic project. I would like keep my pages separately in different folders . For example , I would like to keep pages like Login , Signup in a separate folder called authentication . But at the same time I would like to enjoy the ionic generate page command to quickly setup the page inside the authentication folder. Currently ionic-cli would generate the pages in pages folder. How can I make it in pages/authentication folder ?
I know it's been a while, but this worked for me using the #latest ionic (3.12.0)
Generate "sub-pages" from the app's root folder as you would generate "top-level" pages. Then, drag them to their intended place using Visual Studio Code.
Obviously you want to rename stuff such as modules and classes. For example, for the 'home' and 'standings' sub-pages of the 'team' page, I renamed the classes from HomePage and StandingsPage to TeamHomePage and TeamStandingsPage respectively.
Alternatively (and in retrospect recommended), name the pages using the desired structure, e.g., ionic generate page team-home (you'll still have to move them manually). This is especially useful for repeating patterns, e.g., if you also want 'home' and 'standings' sub-pages for say a 'tournaments' page.
Also see Can ionic2's pages support nested directory structure?.
Just run
ionic generate page pages/authentication
more information https://ionicframework.com/docs/cli/commands/generate
ionic g page src/app/pages/{your_pageName}
This Worked for me.
Reading the doc https://ionicframework.com/docs/cli/commands/generate
Seems that you can specify the folder where you want to generate your page or component directly when you call the command.
Typing ionic g page my_dir/my_page generate a page component into the my_dir directory.
I know this gets tricky in the beginning. Here, I'm mentioning the steps to create a page under specific directory.
Suppose your project follows the structure of directory as:
src
app
components
pages
pipes
To create a page under "pages", navigate to "app" directory and use command:
ionic g page pages/test
Reference: https://ionicframework.com/docs/cli/commands/generate
before creating a separate folder you have to manually create an authentication folder into your app folder.
CLI > ionic generate page authentication/login
In Target 8: Define a Custom DOM Tag, the reader is told about custom DOM tags that can be created by extending other tags. A sample is described for an example called "x-converter" before listing the files as "These files implement the app:".
The three files are...
a drseuss.html file (not sure why there's a sudden deviation in the project name and the HTML file, as opposed to the matching names in previous tutorials...),
a converter-element.html file,
and a convertercomponent.dart file.
I tried creating a new application in the latest Dart editor, and replaced the default HTML file contents with that of drseuss.html, replaced the default dart file contents with that of convertercomponent.dart, and added converter-element.html file.
After fixing an include issue (the file from the tutorial refers to drseuss.css and not the default project name's CSS file), I only see the following in the Chromium browser.
As you can see, the element described in the tutorial (converter-element) doesn't show up. Why don't the files provided for the project result in what's shown in the tutorial?
For reference, here's what's shown in the tutorial.
Web UI requires the build.dart script which compiles the various components into the executable output HTML+Dart.
Take a look at the parent folder in the github src that you reference, and you will see the build.dart script.
In addition, you will need the pubspec.yaml from that folder, too, which includes web_ui package, which brings in the dwc tool(Dart Web Components compiler) used by build.dart.
Take a look at the article Tools for Web UI for more information about dwc and build.dart, and Target 6 - Getting Started with Web UI which covers similar ground, but in a tutorial format.