Multiple ways to start a project_Ionic：Hybrid Mobile App Development-QQ阅读女频现言网

上QQ阅读APP看书，第一时间看更新

Multiple ways to start a project

There are various methods to start a project as shown in the following sections.

Method 1 – using CDN-hosted library files

An Ionic App majorly requires the Ionic library JS and CSS files for development. These can be referenced directly from the CDN so that our app always uses the latest versions. We do not even require to set up our local environment for this method.

Note

This method should only be used for developing Mobile Apps using Ionic. To develop Hybrid Mobile Apps you would need to use Ionic CLI.

Ionic library is built on top of the AngularJS framework and hence we need to include its library files too. Ionic library includes two types of JS/CSS files, ones that have AngularJS code bundled to it and the others where the AngularJS code is segregated and needs to be included separately. The link to the Ionic CDN website where the URLs for each of the library files mentioned is http://code.ionicframework.com/.

We have to include the JavaScript file and the CSS file in a new index.html file, which will be the starting point for our Ionic App. A sample HTML code for the index.html would look like the following:

<!DOCTYPE html>
<html ng-app="FirstApp">
  <head>
    <title>First Ionic App</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.1/css/ionic.min.css">
  </head>
  <body>
    <h1>Bare Minimum App</h1>
    <script type="text/javascript" src="http://code.ionicframework.com/1.0.1/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
      angular.module("FirstApp",['ionic'])
      .config(function(){
      })
      .run(function($ionicPlatform){
      });
    </script>
  </body>
</html>

The preceding code is just for starting your app. You need to organize your app-specific JS and CSS code into separate files accordingly as we proceed. Also, in order to view mobile-specific content you can add some Ionic specific directives or code to the preceding HTML file to test the correct output. Please replace the h1 tag in the file with the following code:

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content>
  </ion-content>
</ion-pane>

Method 2 – using Ionic Creator to design a prototype and start a project

Ionic Creator is a drag and drop-based cloud console to design and prototype Ionic Apps. Ionic Creator provides an easy-to-use interface to create views and interactions for your Ionic App. We can link multiple views to create complete use cases and flow. It is the easiest way to start a new project and build your app rapidly. It also contains practically all the Ionic components that can be customized from the UI options themselves as shown in the following screenshot:

After designing your app using Ionic Creator, you can export it to code it further and include complex functionality. The code can be exported in the following ways:

Ionic CLI: Two commands mentioned in the UI with a unique project ID to download.
ZIP File: Downloading the zip file directly using this option.
Raw HTML: An integrated HTML code is generated, which can be copied and pasted. The following screenshot shows the popup view to export and download your Ionic Creator project:

This method is mostly suitable for people who have beginner-level knowledge of HTML and CSS. They can start their project using downloaded content from the Ionic Creator project. The previous screenshot shows exporting the content.

Projects being developed without setting up the local environment and CLI can use a cloud-based service by Adobe called Phonegap Build to build apps. This service can generate iOS, Android, and Windows builds without installing the development environments locally. Ionic also recently launched a new tool called Ionic Lab, which can be used for this. We will discuss this further in the last chapter.

Method 3 – using Ionic CLI locally

Ionic CLI can be used to start a new project using the command used in the previous chapter. Ionic CLI's start command creates a new project with a complete folder structure and sample code from one of the templates chosen in the command. There are multiple flags mentioned in the following table that can be used with the start command:

$ ionic start [OPTIONS] <PATH> [template]

Options can be set using the flags in the following table:

In the next section, we will learn about the different sections and components of the app generated during the start phase of the app using any template.