Using Ionic + Apache Cordova to develop cross-platform hybrid mobile applications, ioniccordova
If JavaScript is too much written, it is a good choice to study the source code of other js frameworks to improve the js level. On Github, most of them are js and css-related projects. It is very beneficial to check out and study them. People who follow nb will also change nb slowly.
Scenario: I have a friend who works in mobile app development, three Android Developers, three ios developers, and then java developers, artists, and more than 10 companies, it is mainly based on projects, where a project (E-commerce, chat type) is about 0.2 million, almost one and a half months completed (the code quality can be guaranteed, I don't know, however, I think development is a very rigorous task. It is still difficult to develop high-performance, highly robust programs.) the company's sales are awesome and can talk about several projects. The problem arises. To be able to carry out several projects at the same time, we need to recruit mobile developers. If the project is not received, it will be idle again. If some customers want to do wp or Blackberry, they will not be able to do it. So I am eager to find some cross-platform development technologies to solve the problem?
This scenario is true, not yy. So let's play with Ionic and Apache Cordova technologies, so that we can have a deeper understanding.
I have done some android things, but I have never played ios. I am a web technology enthusiast and I am very optimistic about web technologies. I think those android and ios will be gradually replaced by web technologies, as a cross-platform middleware, browsers will become the mainstream. Do not mind
Respect Original, reprint please note out: http://blog.csdn.net/zoutongyuan/article/details/41910903
Enter the topic.
1. What is Ionic?
Okay, let's see what Ionic can provide for us? A style Library, you can use it to decorate your HTML webpage. It looks like you want to move the app's interface, what header, content, footer, grid, and list. This seems to have nothing to do. sencha touch and jq can provide.
A tool library written in angularjs. The grid design of Ionic is reasonable and more powerful than bootstrap.
Of course, it also contains angular-animate, angular-resource, angular-sanitize, angular-ui-router, and a module library suitable for mobile platforms.
2. What is Apache Cordova?
Apache Cordova provides APIs for accessing the mobile platform using Javascript.
Internally, it uses the web view component of each platform to run the program, and then implements a set of CordovaLib programs for you to write for calling, then you can call multiple APIs such as cameras and disks.
Next, start and play. First install nodejs and the platform (ios | android) sdk.
1. Install cordova first
npm install -g cordova2. Install Ionic
npm install -g ionic3. Create a project
ionic start todo blank4. configuration platform
ionic platform add androidOpen the project in IDE:
Www is the main directory
Index.html is the home page.
When we configured the platform just now, the tool helped us to create an Android Application,
Create a CordovaApp class that inherits from CordovaActivity. Activity is the four major components of Android, indicating that a window is displayed.
It provides a guide, that is, loadUrl, which is not described too much here. If you are interested, we will study it in depth. Here we are just a divergent guide.
Now, you can use the APIS provided by ionic and Apache Cordova to develop cross-platform applications.
To change our inde.html
<!DOCTYPE html>
Js/app. jsvar todoApp = angular.module('todoApp', ['ionic']);todoApp.run(function ($ionicPlatform) { $ionicPlatform.ready(function () { if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if (window.StatusBar) { StatusBar.styleDefault(); } });});todoApp.controller('TodoController', function ($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) { // A utility function for creating a new project // with the given projectTitle var createProject = function (projectTitle) { var newProject = Projects.newProject(projectTitle); $scope.projects.push(newProject); Projects.save($scope.projects); $scope.selectProject(newProject, $scope.projects.length - 1); } // Load or initialize projects $scope.projects = Projects.all(); // Grab the last active, or the first project $scope.activeProject = $scope.projects[Projects.getLastActiveIndex()]; // Called to create a new project $scope.newProject = function () { var projectTitle = prompt('Project name'); if (projectTitle) { createProject(projectTitle); } }; // Called to select the given project $scope.selectProject = function (project, index) { $scope.activeProject = project; Projects.setLastActiveIndex(index); $ionicSideMenuDelegate.toggleLeft(false); }; // Create our modal $ionicModal.fromTemplateUrl('new-task.html', function (modal) { $scope.taskModal = modal; }, { scope: $scope }); $scope.createTask = function (task) { if (!$scope.activeProject || !task) { return; } $scope.activeProject.tasks.push({ title: task.title }); $scope.taskModal.hide(); // Inefficient, but save all the projects Projects.save($scope.projects); task.title = ""; }; $scope.newTask = function () { $scope.taskModal.show(); }; $scope.closeNewTask = function () { $scope.taskModal.hide(); } $scope.toggleProjects = function () { $ionicSideMenuDelegate.toggleLeft(); }; // Try to create the first project, make sure to defer // this by using $timeout so everything is initialized // properly $timeout(function () { if ($scope.projects.length == 0) { while (true) { var projectTitle = prompt('Your first project title:'); if (projectTitle) { createProject(projectTitle); break; } } } });});todoApp.factory('Projects', function () { return { all: function () { var projectString = window.localStorage['projects']; if (projectString) { return angular.fromJson(projectString); } return []; }, save: function (projects) { window.localStorage['projects'] = angular.toJson(projects); }, newProject: function (projectTitle) { // Add a new project return { title: projectTitle, tasks: [] }; }, getLastActiveIndex: function () { return parseInt(window.localStorage['lastActiveProject']) || 0; }, setLastActiveIndex: function (index) { window.localStorage['lastActiveProject'] = index; } }})
We didn't use the Apache Cordova api for this todo, so this project can also be run in the browser.Use
$ ionic serve
In my Mi 3. Run the following command to install the driver,
$ ionic run android
Final compilation,
$ cordova build --release android
Let's evaluate these technologies.
The power of the world is always better.
HTML5 + CSS3 + Javascript is the most suitable cross-platform technology stack. It is open and free. Everyone can give their opinions on the development of these technologies, games developed with svg, canvas, and css 3 animations are already used to shake the applications developed in some native languages such as table games and mobile games, so they are not just applications.
Apache Cordova is only a product of the transitional phase. The emergence of new technologies is encouraging.
Let's wait and see the development of web technology tomorrow.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
