Best (perhaps) practice: start developing your app with Cordova + ionic + angularjs

Time:2020-9-1

This article is about my own use of Cordova + ionic and angularjs The summary of experience in the process of developing mobile app is not a basic introductory tutorial, but to discuss with you about how to better use these technologies to develop a better app. The article will take a little time to complete every day. If you have any questions or want to exchange experience with me, please feel free to comment at the bottom of this article or email me: 54778899 [at] qq.com 。

Statement: This is a neutral article. I have no intention of provoking a dispute about which is better or worse. This is just an experience sharing article. As for why I choose this technology, because I know it, I feel good.

What are Cordova, ionic, angularjs?

Cordova

Cordova is an open source app development framework, which aims to let developers use HTML, JavaScript, CSS and other web APIs to develop cross platform mobile platform applications. Its original name is phonegap. After Adobe acquired nitobi company, phonegap trademark was retained and the code was contributed to Apache foundation. Apache named it Apache Callback. When a new version was released later, it was named Apache Cordova.

Cordova is a set of API interfaces for mobile devices. Using JavaScript to access these interfaces, hardware system resources such as camera and compass can be called. With some UI frameworks based on HTML5 and CSS3 technology, such as jQuery mobile, Dojo mobile or Sencha touch, developers can quickly develop cross platform apps without writing any native code.

Note that because Cordova itself is still a native program, the SDK of these system platforms is still needed to package the app.

This paper will be combined with the development of ionic front-end framework

Ionic

Ionic is a new user interface framework that can use HTML5 to build hybrid mobile applications. It calls itself “the combination of native and HTML5”. The framework provides many basic examples of mobile user interface, such as simple items such as lists, tab bars and toggle switches. It also provides examples of more complex visual layouts, such as a slide out menu that displays content below.

Ionic claims that they place great emphasis on performance and maximize speed by limiting DOM interaction, completely removing jQuery, and triggering GPUs on mobile devices using specific hardware accelerated CSS filters like translate (z) – which provide hardware accelerated interaction compared to interactions provided by underpowered mobile browsers.

AngularJS

Angularjs is based on the belief that declarative programming should be used to build user interfaces and write software builds, while imperative programming is well suited to represent business logic. [1] The framework adopts and extends the traditional HTML, and adapts to dynamic content through two-way data binding, which allows automatic synchronization between model and view. As a result, angularjs makes DOM operations less important and improves testability.

Design objectives:

  • Decouples application logic from DOM operations. This improves the testability of the code.
  • It’s just as important to test your application as you write it. The way the code is structured has a huge impact on the difficulty of testing.
  • Decouple the client side of the application from the server side. This allows client-side and server-side development to go hand in hand and makes reuse possible.
  • Guide developers to complete the whole process of building applications: from user interface design, to writing business logic, and then to testing.

Angular follows the MVC pattern of software engineering and encourages loose coupling between presentation, data, and logical components. adoptDependency injectionAngular brings traditional server-side services to client-side web applications, such as view independent control. As a result, the back end reduces a lot of burden, resulting in lighter web applications.

development environment

The development environments I use include the following:

Workstation: a 13 inch MacBook Pro retina + ipad Mini

As far as the front-end of the MAC system is concerned, I still have a lot of advantages when I use the front-end of the MAC system. As far as I’m used to using the Linux front-end, I’ve always had a lot of advantages in terms of the stability of the Linux OS system.

I don’t buy multiple screens like many great gods. I only have an ipad Mini, and then there is an app called duet. It allows me to use the iPad as the second screen of my Mac. It doesn’t need to, but it can really improve my work efficiency and can directly use the touch screen of the iPad, which is good for mobile development.

I also have a Lenovo Yoga 3, which is installed with Ubuntu, but it is rarely used. The display is a little awkward. However, compared with other PC computers, this one is still very good. You can also try it.

development tool

I used to be a loyal user of Notepad + +, and then there are coda, Textmate, bbedit, sublimetext and so on. Now I use (and may always use) – webstorm. The software is charged, but I use pirated ones. I really don’t have money to buy it. I will make up for it when I have money in the future.

Of course, webstorm is only the main development tool. Sometimes when a file needs to be modified temporarily, I still use bbedit, because the startup is much faster than webstorm.

FTP tools

Sometimes I need to publish files to the server. I don’t install FTP tools. I use SFTP directly. The software uses transmit. I’ve been using this since I used apple. I haven’t changed it. I’m the same company (individual?) with coda Out.

Build tools

The packaging tool is a python script written by ourselves, which uses three third-party packages:

  • bs4
  • jsmin
  • csscompressor

They are respectively used to compress and clean HTML, JS and CSS. The grunt and gulp of Nb have been useless. I have a deep feeling that I don’t need to use them. The most important thing is that I don’t understand them. Therefore, I didn’t use them. I wrote them in Python, and soon, a build or clean-up package script could be written in more than ten minutes.

version management

Git + GitLab, I use git for version management, and then I have a git server withGitLabFor package management, if you are interested, you can also see the GIT library that I have published. Address: http://git.osnuts.com 。

Recommended Today

Build HTTP service with C + + Mongoose

Mongoose source code address:https://github.com/cesanta/mo… Mongoose user manual:https://www.cesanta.com/devel… Mngoose set up HTTP service #include <string> #include “mongoose.h” using namespace std; static const char *s_http_port = “8000”; static void ev_handler(mg_connection *nc, int ev, void *ev_data) { struct http_message *hm = (struct http_message *) ev_data; if (ev == MG_EV_HTTP_REQUEST) { std::string uri; if (hm->uri.p && hm->uri.p[0] == ‘/’) […]