What is Inoic?

This article focuses only on the capabilities and capabilities provided by the framework, and is focused on the subsequent actual deployment usage experience.

What is Inoic?

Inoic is a front- End Open-source framework that can use web technology to develop mobile apps in a hybird way.

Second,Inoic framework features

1. develop mobile apps with Web technology .

Ionic provides a set of HTML,CSS,JS class library. We can build apps with good interactivity using the CSS components and tools they provide .

2. Focus on performance

The ionic framework operates with fewer dom, 0 jquery and hardware acceleration, and performs well on the latest modern mobile devices.

3.Angular

Based on angular, Ionic has created a powerful SDK for developing rich and robust apps . Ionic and angular are perfectly integrated to provide the core architecture for specialized app development.

4. Focus on native

Ionic abstracts the current popular native mobile development SDKs and uses Apache Cordova or phonegap to compile, so developers focus on their own code instead of iOS and Android develops multiple sets of native apps. Can be implemented once, arbitrarily deployed.

5.UI Beautifully designed

The UI is clean, simple and practical. It offers popular mobile components, structures, interactive specifications, and beautiful skins.

6. Powerful CLI

A command can be done to create, build, test, and deploy ionic apps to any platform.

7. Learn Interesting

Only need to learn HTML,CSS,JS,AngularJS.

8. Provide professional prototyping tools

With Creator, you can create a real ionic app with a simple drag-and-drop . It can export clean, immediately available ionic code, even iOS and android binaries. The Web site provides an online experience, but may be the cause of the domestic network and cannot be manipulated after logging in.

9. A specialized tool Lab is provided for launch, build, test , and deployment, but the open page cannot be downloaded.

10. Provide an application market , can upload apps and plugins, but the market page is nothing, no vitality.

Iii.The underlying technology of ionic dependence

Ionic is just a front-end framework for developing Hibrid mobile apps that relies on some underlying technical frameworks

1. It relies on the native SDK access capabilities provided by Apache Cordova or PhoneGap , and relies on it to compile the Ionic app for deployment.

2.Sass, its core CSS is written using Sass, can take advantage of Sass's ability to enhance the functionality of CSS, and the ability to be flexible and easy to maintain.

The CSS extension capability of ionic framework is also ensured .

3.Angularjs, which encapsulates the Native SDK interface (called Ngangular) provided by the Apache Cordova via Angularjs, and It also relies on the animations provided by Angularjs , touch systems,UI interactivity, and Angularjs's core architecture is built on the Angularjs-based MVC pattern.

Iv. Browser compatibility

Ionic focuses on native or Hibird mobile apps, rather than mobile Web sites. It is more concerned with the compatibility of Web view controls provided by a particular platform. For version 1.2.4, the Ionic supports the UIWebView of ios7+ and android4.1+ .

Five, open source agreement

Based on The MIT protocol, it can be used for personal and commercial projects free of charge.

Six, technical support

Ionic was developed by a three-person company called Drifty, which also has two mobile products for Codiqa and Jetstrap. Oh, I covered it.

Vii. CSS Components provided by Ionic

The framework provides a wide variety of CSS components including Header,Content,Footer,Buttons,List,Cards,Forms, Toggle,CheckBox,RadioButton,grid, etc.

VIII. platform-related customization

1. Platform-related classes

Ionic provides platform device class and console OS version classes to allow us to modify or extend existing styles. Ionic will add the relevant platform classes to the body when the app is launched.

Platform device related classes are as follows

The Platform OS version class is as follows

2. Customize platform-related styles directly using CSS

Text style for Android custom Bar-header.

. platform-android. bar-header {  text-transform:uppercase;  }

3.使用angular直接自定义平台相关样式ionic通过ionic.Platform暴露平台相关类，我们可以在控制器中获取平台类

. Controller (' Appctrl ', function ($scope) {  $scope. Platform = Ionic. Platform.platform ();})

我们也可以在html元素中使用平台类控制元素的样式，比如控制标签在android的时候显示一种样式，其他系统的时候显示另外一种样式。

<ion-tabs class= "tabs-stable" ng-class= "{' tabs-positive ': platform = = ' Android ', ' Tabs-icon-top ': Platform! = ' Android '} ' >  <!--ion-tab directives go here--></ion-tabs>

根据平台加载不同模板

. State (' tab ', {  URL: '/tab ',  abstract:true,  controller: ' Appctrl ',  templateurl:function () {    if (Ionic. Platform.isandroid ()) {        return  "templates/home-android.html";    }    return "templates/home.html";  }})

4.使用merge文件夹加载不同的文件

merges/    ios/        index.html        css/            platform.css        js/            app.js    Android/        index.html        css/            platform.css        js/            app.js

Nine,JS components

Ionic provides a CSS component that implements user interaction through a control based on the angular implementation . You can simply look at the usage of the list

 <ion-list ng-controller= "Myctrl" show-delete= "Shouldshowdelete" show-reorder= "Shouldshowreorder"    Can-swipe= "Listcanswipe" > <ion-item ng-repeat= "item in Items" class= "Item-thumbnail-left" >     
App.controller (' Myctrl ', function ($scope) {$scope. Shouldshowdelete = false; $scope. Shouldshowreorder = false; $ Scope.listcanswipe = true});
X. Development process
1. Create a project
--Create
$ ionic start todo blank--添加平台$ ionic platform add ios$ ionic platform add android--测试$ ionic build ios$ ionic emulate ios2.创建简单的html页面3.测试程序浏览器中测试$ ionic serve模拟器测试$ ionic build ios$ ionic emulate ios手机浏览器测试物理设备原生测试$ ionic run android4.   Repeat function development and testing  5.   published  app  --  Build  $ Cordova build--release android  --  signature  $ keytool-genkey-v -keystore my-release-key.keystore-alias alias_name-keyalg rsa-keysize 2048-validity 10000   $ jarsigner-verbose-sigalg sha1withrsa-digestalg sha1-keystore my-release-key.keystore helloworld-release-unsigned.apk alias_name  $ zipalign-v 4 helloworld-release-unsigned.apk helloworld.apk          
 
What is Inoic?