Ionic file structure wrong - ionic-framework

i am new to ionic and there are some problems i am facing like the file structure is very different. like there is no lib folder no app.js file there is no angular.module('myApp') code anywhere.
help me out with it my whole work is pending.
i have tried re-installing ionic and cordove but didn't made any difference.
image attached below.

You are using ionic v2+ and not ionic v1. Ionic 2 uses Angular 2+ (not angularjs) and the language used is typescript.
The source files belong in src/ and root module is app.module.ts and starting component is app.component.ts
If you want to still use ionic v1, it is supported (the file structure you are looking for is of ionic 1). You need to set --type as ionic1 when you start the project.
https://ionicframework.com/docs/cli/start/
ionic start myApp blank --type=ionic1

you are not using ionic v.1 Ionic version have the pattern in which the js folder holds app.js,controller.js etc.
Ionic v-2 uses modules instead of controllers.Ionic 2 is oriented for Object Oriented Concepts, thats why it is the form of class. If you want a peculiar type of version use the command : ionic start newapp blank --v1 .
But i would suggest you to use typescript which better than js.

Related

How to create/provide multiple example apps for a flutter plugin?

Flutter seems to have a very strict/rigid structure for plugins with example folder and all contents inside that folder.
I want to provide multiple examples with my plugin. Something like examples folder and then examples/demo1 and examples/demo2 as two different app examples.
I tried doing this but flutter run or pub get command breaks with this change. it's gets stuck with below error which wasn't thrown with exact same code in previous structure before change. Also my app actually follow embedding v2 code so this error is completely false too.
The plugin `<MY PLUGIN>` requires your app to be migrated to the Android embedding v2. Follow the steps on
https://flutter.dev/go/android-project-migration and re-run this command.
Somehow is it expecting that there should be only one example and that too with example folder only ?
Can someone help, and if possible point me to a plugin project where it's using multiple examples ?
After trying multiple ways to deal with the situation,
I ended up with a good enough solution.
I moved entire flutter repo inside an sdk directory, and then Introduced a samples folder at root level which can contain multiple sample applications.
sdk itself has a default sample app under example folder which I kept so sdk can ship with one example project.
Final structure look like below,
- Root
- sdk
- Flutter plugin project (like android/example/ios/lib directory etc.)
- samples
- sampleOne
- sampleTwo
I then mentioned relative path to sdk for sampleOne or sampleTwo inside their pubspec.yaml like path: ../../sdk/
When I want to open sampleOne in AndroidStudio, I import sampleOne directory and it works like charm. Make sure you don't import entire samples directory or sampleOne/Android.
For any regular Flutter commands for plugin, I run them inside sdk directory and everything works fine as expected. So I would run publish or pub get inside root/sdk directory

Ionic generate page without the module file

I'm trying to generate a ionic page using ionic CLI with following command,
ionic g page SomePage --no-module
as it said on the documentation.
But it still generates the module file. When i use the command
ionic g page SomePage
But it generates same files as earlier command. Is there any way I can generate a ionic page using ionic CLI without the module.ts file.

How do i make working custom css in ionic?

I've added custom css in ionic+angular which is working absolutely perfect with browser and its devices, but while i am generating apk for android device custom css is not working in android.
I am running this command to generate APK : ionic cordova run android
For more information i attached ionic version and index html screenshot.
version screenshot
Index.Html screenshot
First, make sure that "appStyle.css" file is written with S uppercase. Windows machines are case insensitive and Linux Machines (Android) are case sensitive.
Second, make sure that you're changing the index.html at src folder, not at www. Because www is the generated files and it is rewritten every build.
At last, as Abdul said in the comment, you should import your CSS files at app/app.scss.
#import '../assets/css/font-awesome.min';
I recommend you to put the css files outside from assets, which is recommended only static files, like images.

How do I start a blank project in Ionic

I am new to the Ionic Framework, very new, and I wanted to start a new project, but every time I start a new project it autodownloads the tabs sample as my project. I want a blank new project, how can I stop Ionic from downloading the tabs sample, because as it is I'm not sure which files to remove without breaking anything.
Execute this command to start a new blank app with the name "myApp":
ionic start myApp blank
What command do you use to create the project?
Have you tried:
ionic start myApp blank
You should read the doc:
Simple:
ionic start APP_NAME blank.
Or you want to specify more information:
ionic start -a APP_NAME -i PACKAGE_NAME FOLDER_NAME blank
Hi Just follow this steps and you will able to open a blank project in ionic.
Open the terminal and write
npm install -g ionic
then next command is
ionic start myApp blank ( myApp is the project name you want to create ) for example
ionic start fashion blank ( So here I want to create an app for e-commerce and my project name is fashion )
I hope this will work for you.

Init a new project by using Mean.Io

I have created a new Mean project. Now I would create my own project. I have realized that I should create a new package. I have execute the command mean package myOwnPackage and a new package has been added to the folder packages. Inside that one there are other package. I don't understand how to run the project through grunt that show only my application instead of the built in packages articles
In packages folder, delete /packages/articles, when grunt, you will see your package name in navigation bar. system, access and users cannot be delete, or it will cause errors.
mean init - looks like you did that.
delete the 'articles' package, it's an example
customize your app:
These templates load your Angular app into the browser.
- packages/system/server/views/index.html - this extends default.html.
- packages/system/server/views/layouts/default.html - this is the bottom-most template in your app.
- packages/system/server/views/includes/foot.html,head.html - these are used by default.html to build a homepage. Note that head.html is head tag not menu.
Now Browser has loaded your app. It's an angular app, so angular starts to change the DOM of the loaded page.
- packages/system/public/views/index.html - This is what angular puts on the \ route
- packages/system/public/views/header.html - This is what angular puts in the menu
Does that answer your question?
If you want to make a black website, figure out where you want the black to be.