Getting started with ionic1

Referenced from:

Introduction

ionic is a powerful HTML5 application development framework (HTML5 Hybrid Mobile App Framework) that helps you build mobile applications with a near-native experience using web technologies such as HTML, CSS and Javascript.

ionic features:

ionic is based on Angular syntax and is easy to learn.
ionic is a lightweight framework.
ionic perfectly integrates the next-generation mobile framework, supports the features of Angularjs, MVC, and the code is easy to maintain.
ionic provides a beautiful design, build applications with SASS, it provides many UI components to help developers develop powerful applications.
Ionic focuses on native, so you can't see the difference between hybrid applications and native
ionic provides powerful command line tools.
ionic has great performance and runs fast.

The difference between ionic1 and ionic2

ionic1 is based on angularjs1, ionic2 is based on angularjs2, the syntax of the two is very different
With the revolutionary improvements of Angular2, ionic2 has the following advantages compared to the 1.x version:
Faster performance: Angular2 is 5 to 10 times faster than Angular1
Clearer project structure: Angular2 applications are modular, and the control layer code, templates, and styles of each page are put together.
More powerful CLI: ionic cli can generate pages,provides,tabs,pipes,components,directives, etc. If you add a page and use the command ionic g page newPage, the following file will be generated, and the basic code has been generated in the file

-new-page
--new-page.ts
--new-page.html
--new-page.scss

more friendly page navigation
More powerful template syntax
More efficient development experience: support classes, modules, interfaces, lamba expressions

Install

Ionic development is dependent on the Nodejs environment, so we need to install Nodejs before development. Download and install: http://nodejs.org/

After the installation is complete, open the terminal, enter the command node -vand npm -vverify whether the installation is successful. If the version number is returned, it means success.

Execute in the terminal command line:

npm install -g cordova ionic

This is to use the npm package manager to install cordova and ionic. -g means global installation. After global installation, the commands of cordova and ionic can be used in any directory in the terminal.

Note: If you do not specify the version, the default is to install the latest version, and the latest version may have problems with packaging. It is recommended to make a version that is not the latest version, such as sudo cnpm install –g [email protected] . I am the latest version, and then I have been stuck in cordova fetch when adding ios. After changing to a lower version, I can add the ios platform.

Create ionic project

Ionic official website provides three project templates blank, tabs and sideMenu, here to create a blank (empty) ionic project.

ionic start myIonic blank

If the creation fails due to the installation of npm packages, you can try the following steps:

First use the domestic mirror cnpm to install:

npm install -g cnpm

Then skip the step of installing npm packages and execute the following command:

ionic start myIonic --skip-npm

If you want to set the version of the ionic2 project, execute the following command:

ionic start myIonic --v2 --skip-npm

After executing the above step, go to the project directory, open cmd and execute the following command:

cnpm install --save

After the project is created, you will find a folder named myIonic in the development directory. This folder is the directory where the Ionic project is located.

The following files are in the directory:

hooks // 在编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
plugins //cordova插件的目录
scss //scss文件，发布时编译这个目录下的文件输出到www的css目录中
www //我们的开发目录，页面、样式、脚本和图片都放在这个目录下
--css
--img
--js
--lib
--index.html
bower.json //bower配置文件
config.xml //Ionic的配置文件，可以配置app的id，名称、描述起始页和其他配置
gulpfile.js //gulp构建工具的执行文件，在这个文件中创建任务实现编译scss，css、js优化等
ionic.project //Ionic的项目文件可以配置Ionic命令中livereload的监控文件
package.json //npm配置文件

Debug ionic project

In the ionic project directory, open the terminal to execute

ionic serve

After the execution is completed, Ionic will automatically open our default browser for us and jump to our application page. When the browser opens the page, Ionic has enabled the livereload mode for us. Ionic will notify the browser to refresh the page through websocket, so we don't have to manually refresh the page every time after modification, which greatly improves our work efficiency.

After enabling livereload, Ionic will monitor the files under www by default. If you need to customize it, please edit the watchPatterns of ionic.project to set the scope to be monitored.

Install and configure ngCordova

Ionic encapsulates some commonly used plugins with angularjs services: http://ngcordova.com/ .

We only need to install the ngCordova plugin in the project and call it in our project like using angularjs services. Let's install ngCordova first:

npm install ngCordova --save

After installation, refer to www/index.html

<script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.js"></script>
<script type="text/javascript" src="cordova.js"></script>

ng-cordova.js needs to be referenced before cordova.js

and add dependency injection relationship in app.js

angular.module('starter', ['ionic', 'ngCordova'])