\n| .\/src\/index.html<\/td>\n | src\/index.html is the main entry point for the app, though its purpose is to set up script and CSS includes and bootstrap, or start running, our app. We won\u2019t spend much of our time in this file.<\/p>\n For your app to function, Ionic looks for the <ion-app> tag in your HTML. In this example we have:<\/p>\n <ion-app><\/ion-app><\/strong><\/p>\nAnd the following scripts near the bottom:<\/p>\n <!– Ionic’s root component and where the app will load –><\/p>\n <ion-app><\/ion-app><\/strong><\/p>\n<!– The polyfills js is generated during the build process –><\/p>\n <script src=”build\/polyfills.js”><\/script><\/strong><\/p>\n<!– The vendor js is generated during the build process<\/p>\n It contains all of the dependencies in node_modules –><\/p>\n <script src=”build\/vendor.js”><\/script><\/strong><\/p>\n<!– The main bundle js is generated during the build process –><\/p>\n <script src=”build\/main.js”><\/script><\/strong><\/td>\n<\/tr>\n\n| src\/app\/app.html<\/td>\n | Here\u2019s the main template for the app. This template is an ion-nav component to act as the main content area<\/p>\n <ion-nav [root]=”rootPage”><\/ion-nav><\/td>\n<\/tr>\n | \nsrc\/app
\n\/app.component.ts<\/td>\n | This is the first component that gets loaded in our app, and typically it\u2019s an empty shell for other components to be loaded into.<\/p>\n Every app has a root module that essentially controls the rest of the application. This is very similar to ng-app from Ionic 1 and AngularJS. This is also where we bootstrap our app using ionicBootstrap.<\/p>\n In this module, we\u2019re setting the root component to HomePage, in src\/app\/app.component.ts. This is the first component that gets loaded in our app, and typically it\u2019s an empty shell for other components to be loaded into. In app.component.ts, we\u2019re setting our template to src\/app\/app.html, so let\u2019s look in there.<\/td>\n<\/tr>\n | \n| src\/app<\/p>\n \/app.module.ts<\/td>\n | Every Angular app has at least one NgModule class, the root module, conventionally named AppModule.<\/p>\n While the root module may be the only module in a small application, most apps have many more feature modules, each a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.<\/p>\n An NgModule, whether a root or feature, is a class with an @NgModule decorator.<\/p>\n NgModule is a decorator function that takes a single metadata object whose properties describe the module. The most important properties are:<\/p>\n declarations<\/strong> – the view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes.<\/p>\nexports<\/strong> – the subset of declarations that should be visible and usable in the component templates of other modules.<\/p>\nimports<\/strong> – other modules whose exported classes are needed by component templates declared in this module.<\/p>\nproviders<\/strong> – creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app.<\/p>\nbootstrap<\/strong> – the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.<\/td>\n<\/tr>\n\n| src\/app\/app.scss<\/td>\n | It is used to declare any styles that will be used globally throughout the application. Although it is the \u201cmain\u201d .scss file, you won\u2019t likely use it often \u2013 most of the styling will happen in the component specific .scss files.<\/td>\n<\/tr>\n | \n| src\/app\/main.ts<\/td>\n | Launch an application by bootstrapping its root module. During development you’re likely to bootstrap the AppModule in a main.ts<\/td>\n<\/tr>\n | \n| config.xml<\/td>\n | This configuration file is used by Cordova and includes settings which are relevant for building your application for the iOS and Android platform.<\/td>\n<\/tr>\n | \n| package.json<\/td>\n | This file contains all dependencies (NPM packages) of our application. You can add new packages or update the version of packages already included. By executing the command npm install in the project directory the dependencies listed in package.json are downloaded and added to the project automatically.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nProject Structure<\/h3>\nproject\/<\/p>\n \u251c\u2500 ionic.config.json # Ionic project config file<\/em><\/p>\n\u251c\u2500 package.json<\/p>\n \u251c\u2500 src\/<\/p>\n \u2502\u00a0 \u251c\u2500 app\/<\/p>\n \u2502\u00a0 \u2502\u00a0 \u251c\u2500 app.component.ts # root component for your app<\/em><\/p>\n\u2502\u00a0 \u2502\u00a0 \u251c\u2500 app.html # app component template<\/em><\/p>\n\u2502\u00a0 \u2502\u00a0 \u251c\u2500 app.module.ts # NgModule for app component<\/em><\/p>\n\u2502\u00a0 \u2502\u00a0 \u251c\u2500 app.scss # global SCSS<\/em><\/p>\n\u2502\u00a0 \u2502\u00a0 \u2514\u2500 main.ts # bootstrap file<\/em><\/p>\n\u2502\u00a0 \u251c\u2500 assets\/ # put your images, etc. here<\/em><\/p>\n\u2502\u00a0 \u251c\u2500 pages\/ # contains the page components for your app<\/em><\/p>\n\u2502\u00a0 \u251c\u2500 theme\/<\/p>\n \u2502 \u00a0\u2502\u00a0 \u2514\u2500 variables.scss # see https:\/\/ionicframework.com\/docs\/theming<\/em><\/p>\n\u2502\u00a0 \u2514\u2500 index.html # main html file<\/em><\/p>\n\u2514\u2500 www\/ # build output directory<\/em><\/li>\n\nIonic Generate<\/h4>\nSyntax<\/strong> : $ ionic generate [<\/strong><type>] [<\/strong><name>]\nExample<\/strong> : $ ionic generate component foo<\/p>\nExample<\/strong> : $ ionic generate page Login<\/p>\n\n\n\nInput<\/strong><\/td>\nDescription<\/strong><\/td>\n<\/tr>\n\n| type<\/td>\n | The type of generator (e.g. component, directive, page, pipe, provider, tabs)<\/td>\n<\/tr>\n | \n| name<\/td>\n | The name of the component being generated<\/td>\n<\/tr>\n | \nOption<\/strong><\/td>\nDescription<\/strong><\/td>\n<\/tr>\n\n| –no-module<\/td>\n | Do not generate an NgModule for the component<\/td>\n<\/tr>\n | \n| –constants<\/td>\n | Generate a page constant file for lazy-loaded pages<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n\nIonic Info<\/h4>\nSyntax<\/strong> : $ ionic info<\/p>\nPrint system\/environment info<\/li>\n \nIonic Serve<\/h4>\nSyntax<\/strong> : $ ionic serve<\/p>\nBy default,\u00a0ionic serve\u00a0boots up a development server on all network interfaces and prints the external address(es) on which your app is being served. It also broadcasts your app to the Ionic DevApp on your network. To disable the DevApp and bind to\u00a0localhost, use\u00a0–local.<\/p>\n Try the\u00a0–lab\u00a0option to see multiple platforms at once.<\/p>\n \n\n\nOption<\/strong><\/td>\nDescription<\/strong><\/td>\n<\/tr>\n\n| –consolelogs, -c<\/td>\n | Print app console logs to Ionic CLI<\/td>\n<\/tr>\n | \n| –address<\/td>\n | Use specific address for the dev server<\/td>\n<\/tr>\n | \n| –port, -p<\/td>\n | Use specific port for HTTP<\/td>\n<\/tr>\n | \n| –livereload-port, -r<\/td>\n | Use specific port for live-reload<\/td>\n<\/tr>\n | \n| –dev-logger-port<\/td>\n | Use specific port for dev server communication<\/td>\n<\/tr>\n | \n| –no-devapp<\/td>\n | Do not publish DevApp service<\/td>\n<\/tr>\n | \n| –no-open<\/td>\n | Do not open a browser window<\/td>\n<\/tr>\n | \n| –local<\/td>\n | Disable external network usage<\/td>\n<\/tr>\n | \n| –no-proxy<\/td>\n | Do not add proxies<\/td>\n<\/tr>\n | \n| –browser, -w<\/td>\n | Specifies the browser to use (safari, firefox, google chrome)<\/td>\n<\/tr>\n | \n| –browseroption, -o<\/td>\n | Specifies a path to open to (\/#\/tab\/dash)<\/td>\n<\/tr>\n | \n| –lab, -l<\/td>\n | Test your apps on multiple platform types in the browser<\/td>\n<\/tr>\n | \n| –platform, -t<\/td>\n | Start serve with a specific platform (android, ios)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n\nIonic Build<\/h4>\nSyntax<\/strong> : $ ionic build<\/p>\nSyntax<\/strong> : $ ionic build –prod<\/p>\nionic build\u00a0will perform an Ionic build, which compiles web assets and prepares them for deployment. For Ionic\/Cordova apps, the CLI will run\u00a0cordova prepare, which copies the built web assets into the Cordova platforms that you\u2019ve installed. For full details, see\u00a0ionic cordova prepare –help.<\/p>\n \n\n\nOption<\/strong><\/td>\nDescription<\/strong><\/td>\n<\/tr>\n\n| –prod<\/td>\n | Build the application for production<\/td>\n<\/tr>\n | \n| –aot<\/td>\n | Perform ahead-of-time compilation for this build<\/td>\n<\/tr>\n | \n| –minifyjs<\/td>\n | Minify JS for this build<\/td>\n<\/tr>\n | \n| –minifycss<\/td>\n | Minify CSS for this build<\/td>\n<\/tr>\n | \n| –optimizejs<\/td>\n | Perform JS optimizations for this build<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n\nConfig.xml<\/h4>\nConfig.xml is a global configuration file that controls many aspects of a cordova application’s behaviour. This platform-agnostic XML file is arranged based on the W3C’s Packaged Web Apps (Widgets) specification, and extended to specify core Cordova API features, plugins, and platform-specific settings.<\/li>\n \nRC Folder Structure<\/h4>\n\n\n\nName<\/strong><\/td>\nDescription<\/strong><\/td>\n<\/tr>\n\n| app<\/td>\n | All Ionic 2 apps will have a root component. This is not all that different to all the other components in your application, one obvious difference you will notice though is that it is in its own app folder, and is named app.component.ts.<\/p>\n This folder will contain all SCSS files which contain styling on application level. If you take a look into that folder you\u2019ll find a core SCSS file as well as platform specific SCSS files. Another SCSS file is containing SCSS variables. It is used to declare any styles that will be used globally throughout the application. Although it is the \u201cmain\u201d .scss file, you won\u2019t likely use it often \u2013 most of the styling will happen in the component specific .scss files.<\/p>\n It is used to declare any styles that will be used globally throughout the application. Although it is the \u201cmain\u201d .scss file, you won\u2019t likely use it often \u2013 most of the styling will happen in the component specific .scss files.<\/td>\n<\/tr>\n | \n| assets<\/td>\n | The assets folder can be used to store any static files you want to include in your project like images, or JSON data files. Anything in this folder will be copied over to your build folder each time the application is built. i.e images, font, icons ,etc<\/td>\n<\/tr>\n | \n| components<\/td>\n | Ionic apps are made of high-level building blocks called components. Components allow you to quickly construct an interface for your app. Ionic comes with a number of components, including modals, popups, and cards.<\/td>\n<\/tr>\n | \n| pages<\/td>\n | This folder is containing all pages of your application. Within pagesyou\u2019ll again find subfolders. Each page is implemented as an Angular 2 component (you\u2019ll learn more about Angular 2 components later on). As each component implementation can consist of multiple files, the files belonging to one component are kept in folder of pages.<\/td>\n<\/tr>\n | \n| theme<\/td>\n | variables.scss is used to modify the apps shared variables. Here you can edit the default values for things like the $colors map which sets up the default colours for the application, $list-background-color, $checkbox-ios-background-color-on and so on. For a list of all the variables that you can overwrite, take a look at this page<\/td>\n<\/tr>\n | \n| pipes<\/td>\n | Pipes are super useful to have in your application \u2013 in general they are used to manipulate data before displaying it to the user (think date conversions, formatting and so on).<\/td>\n<\/tr>\n | \n| providers<\/td>\n | Providers allow you to create a self-contained service that provides functionality to your application. The role of a provider might include things like fetching data from a server, performing operations on data, sharing data, providing a set of complicated mathematical operations, and so on.<\/p>\n In general, we use providers to do the heavy lifting in our applications. By using a provider, we abstract the functionality it provides away from a specific component, which makes the codebase more maintainable and allows us to reuse that same provider in multiple different places in the application (or even in a completely different application).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n So, as you can see a page in Ionic is just an Angular component which itself a TypeScript class decorated with @Component decorator imported from @angular\/core.<\/p>\n The component\/page gets the information about its view using the templateUrl which points to a path of an HTML page, in this case home.html which resides in the same folder.<\/p>\n You use pages to build apps, an app is a collection of pages, in two ways: 1) By declaring and importing them when the app is starting and 2) By lazy loading them.<\/p>\n Components are the basic constructs of Angular and since Ionic 2 and Ionic 3 are based respectively on Angular 2 and Angular 4, they are also the basic buildings of Ionic apps. In Ionic every page is a component.<\/p>\n A component is an independent construct which encapsulates the controller code, the view and styles, and has inputs and outputs.<\/p>\n An Ionic app is a bunch of components (an app component + page components) and providers organized together using Angular modules.
\nAn Ionic app is a bunch of components(an app component + page components ) and providers organized together using Angular modules.<\/li>\n<\/ol>\n Interested in Angular? Click here to read more Angular articles in Code4Developers<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Ionic is a framework for web developers to develop a mobile application. It is used to create an hybrid application which works as an native apps. Using Ionic we can…<\/p>\n","protected":false},"author":33,"featured_media":3383,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[140],"tags":[29,141],"powerkit_post_featured":[],"class_list":{"0":"post-3376","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-ionic","8":"tag-angular","9":"tag-ionic"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=2560%2C1654&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Ss","jetpack-related-posts":[{"id":3412,"url":"https:\/\/code4developers.com\/capacitor-new-native-bridge-web-apps\/","url_meta":{"origin":3376,"position":0},"title":"Capacitor – A New Native Bridge for Web Apps","author":"Arif Khoja","date":"April 7, 2018","format":false,"excerpt":"A short while ago, the Ionic team announced that they were working on a project called \u201cAvocado\u201d which later took on its official moniker of Capacitor. In this article, I want to introduce you to Capacitor and what it will do. I will get into the specifics soon (and we\u2026","rel":"","context":"In "Ionic"","block_context":{"text":"Ionic","link":"https:\/\/code4developers.com\/category\/ionic\/"},"img":{"alt_text":"Catch","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/Screenshot-2018-02-07-12.11.05-300x26.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/Screenshot-2018-02-07-12.11.05-300x26.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/Screenshot-2018-02-07-12.11.05-300x26.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/Screenshot-2018-02-07-12.11.05-300x26.png?resize=700%2C400 2x"},"classes":[]},{"id":3457,"url":"https:\/\/code4developers.com\/native-html5-games-with-phaser-and-capacitor\/","url_meta":{"origin":3376,"position":1},"title":"Native HTML5 Games with Phaser and Capacitor","author":"Arif Khoja","date":"April 17, 2018","format":false,"excerpt":"Building HTML5 games with Phaser has been somewhat of a hobby of mine over the past few years, and I will be writing a few tutorials about Phaser with a focus on developing HTML5 games for mobile. However, despite having created a few mostly finished games most of them never\u2026","rel":"","context":"In "Phaser"","block_context":{"text":"Phaser","link":"https:\/\/code4developers.com\/category\/phaser\/"},"img":{"alt_text":"phaser-starter-demo","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/phaser-starter-demo-1-300x227.gif?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2658,"url":"https:\/\/code4developers.com\/angular-4-application-with-visual-studio\/","url_meta":{"origin":3376,"position":2},"title":"Angular 4 in Visual Studio","author":"Nisarg Dave","date":"June 22, 2017","format":false,"excerpt":"Introduction In this article, we will discuss about how to set up and start Angular 4 in visual studio. As many of developers have worked with Microsoft tools and technologies, they preferred visual studio as web development platform. Step 1: Install Node.js and npm The first step is to install\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"VS15","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1-2.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3886,"url":"https:\/\/code4developers.com\/getting-started-with-miscrosoft-visual-studio-code\/","url_meta":{"origin":3376,"position":3},"title":"Getting Started with Miscrosoft Visual Studio Code","author":"Pawan Ingale","date":"August 27, 2018","format":false,"excerpt":"The Visual Studio Code integrated development environment is a creative launching pad, that you can use to edit, debug, and build code, and then publish an app. VS Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, MacOS and Linux.\u2026","rel":"","context":"In "Visual Studio"","block_context":{"text":"Visual Studio","link":"https:\/\/code4developers.com\/category\/visual-studio\/"},"img":{"alt_text":"VS Code","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":2568,"url":"https:\/\/code4developers.com\/angularjs-application-end-to-end-testing-with-protractor-tool-part-1\/","url_meta":{"origin":3376,"position":4},"title":"AngularJS Application End to End Testing with Protractor Tool : Part 1","author":"Sneha Jaiswal","date":"June 8, 2017","format":false,"excerpt":"What is End to End Testing? End to End Testing is used to determine the performance of application as per requirement. For large and complex applications manual testing is not sufficient to verify the correctness of new features, catch bugs and notice regression. To resolve issue of integration between components\u2026","rel":"","context":"In "AngularJs"","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3703,"url":"https:\/\/code4developers.com\/microsoft-announces-visual-studio-2019\/","url_meta":{"origin":3376,"position":5},"title":"Microsoft announces Visual Studio 2019","author":"Yatendrasinh Joddha","date":"June 7, 2018","format":false,"excerpt":"After acquisition of GitHub, Microsoft came up with one more announcement for the developer community, \"Visual Studio 2019\". Microsoft yesterday announced Visual Studio 2019, the next version of its awesome integrated development environment (IDE). With the announcement they have stated that the release plan\/dates will be share in coming months.\u2026","rel":"","context":"In "News"","block_context":{"text":"News","link":"https:\/\/code4developers.com\/category\/news\/"},"img":{"alt_text":"VisualStudio","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/06\/VisualStudio.png?fit=930%2C462&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/06\/VisualStudio.png?fit=930%2C462&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/06\/VisualStudio.png?fit=930%2C462&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/06\/VisualStudio.png?fit=930%2C462&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3376"}],"version-history":[{"count":10,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3376\/revisions"}],"predecessor-version":[{"id":3395,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3376\/revisions\/3395"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3383"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3376"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} | | | | | | | | | | | | | | | | |