Use of 4.Ionic templates

Hybird HTML5 app (mobile app development) 4. The use of Ionic templates

Using the Ionic template under Windows, you can use Git Bash in a previously installed Git tool. The system comes with a command tool that can be used directly from the MAC system. After installing Git on your Windows system, find the GIT bash tool under Git files from the Start menu and open it. Use the command below to create the app.

CD E:/work/ionic

Entering a custom project location with the CD command

Ionic Start Defaultapp Tabs

Using the Ionic command to generate a tabs-based app, where Defaultapp is the project name of the app, tabs is the default template name for ionic, and even if you don't enter tabs, the app you created is still a tabs-based project.

CD e:/work/ionic/defaultappionic serve

Enter the app's root directory, enter the ionic serve command to run the application, and the browser will automatically open and preview the tabs template app. The effect of the browser preview is as follows:

Exit the launched application:

Enter q in Git bash to exit the app you started.

In fact, we can also use other ionic templates by order, for example:

1, Ionic start Blankapp blank. Create an app with a title bar

2, ionic start Sideapp sidemenu. Create an app with sidebar

Application Main View

Open the app's sidebar

There are many types of templates on GitHub, Links: https://github.com/driftyco/ionic-cli

can be found. Named template, Github repo, and Codepen are the more common types. The tabs, Sidemenu, and blank used earlier belong to the named template. And the named template will gradually increase over time. You can download the template locally based on the name of the template.

Here's another way to download the ionic template.

Open Link: http://codepen.io/ionic/pens/public/,

In the site, you can see a lot of ionic templates, click on a template to enter, as follows:

Copy the link to the browser, you can use the link to download the template to local. The commands to download are as follows:

Ionic start Navapp Http://codepen.io/ionic/pen/QwamEW

Once downloaded to the local, you can see the effect of the application in the browser. Such as:

After learning how to download ionic templates, what are the effects of these templates on Android and iOS? Let me look at the following:

Take the Defaultapp project as an example to get the CD command to the root of the project, and then use the command: Ionic serve–l

You can see how the app works on Android and iOS devices, as follows:

As you can see, the browser opens the app in a different and interesting way. Shows a rendered view of apps on two different devices on iOS and Android. The difference between the two can be obvious: The iOS menu is at the bottom of the page, and the Android menu is at the top of the page. On real mobile devices, their apps can be rendered differently. Different pages and different template apps, browser rendering may be different, Ionic will handle these differences for us. With the default template as an example, you can use a special configuration that allows you to maintain a consistent menu position on two platforms. This section will be covered in subsequent content. All right, so much for today. Continue tomorrow! Details can be accessed by clicking on the link to Cloud disk view.

Use of 4.Ionic templates