WIN10 UWP Development Series: Developing the first Cordova App with VS2015 Update2+ionic

The process of installing VS2015 Update2 is very tortuous. Fortunately, after unremitting efforts, finally toss the success.

If the development of Cordova Project, we recommend you use ionic this framework, the effect is good. For the relationship between Cordova, PhoneGap, Ionic, angularjs these frameworks or libraries, I personally understand that PhoneGap is a business project that implements HTML5-style cross-platform development, and Adobe then opens its core code to open source, Is Cordova,cordova is only responsible for the implementation of JavaScript call native code function, is a shell, and the shell of the specific style, in the HTML5 layer there are many frameworks, such as Ionic, jquery Mobile can be. Ionic integrates Angularjs, actually writing some ANGULARJS directive to simplify development, Ionic also provides a set of CSS styles, and if you develop a web app, you can use only his CSS style. VS2015 provides good support for these frameworks and class libraries.

Although the title is the UWP family, I actually write this demo on Android as the first platform, because I still want to see Cordova's performance on the Android platform ^_^ Ionic has supported Universal, So at the end of this article we can compile it into a UWP app to run it.

First, the environment configuration

I want to do one of the simplest features, display a news list, support dropdown refresh and scroll to the bottom to automatically load more. This is the simplest feature of an app that can be easily implemented in ionic. For the angular part, I will also introduce briefly in the development process.

When I learn new things, I don't like to look at a lot of concepts first, but first do something to run it, then to study the concept inside. So first build a project to run a look at it.

Ionic Home Address: http://ionicframework.com/

The official tutorial is to build the project with node. js command line, fortunately there is VS2015, you can download the Ionic project template directly to start the first project.

Ionic Template: https://visualstudiogallery.msdn.microsoft.com/4e44ba8b-a4c8-4106-b70e-00d63241a54a

Ionic IntelliSense support: https://visualstudiogallery.msdn.microsoft.com/d6279fba-bcff-4857-906d-29faa8a99448/

You can also search for ionic directly in the VS2015 extension:

Install the top two, the first is Ionic's IntelliSense plug-in Ionic Pack, the second is the Ionic project template, supporting three styles of projects, blank type, Hamburger menu type, tab type.

second, the new project

After installing the template plugin, create a new Cordova Project Ionicdemo, select Tabs Template:

Next VS2015 will download many packages:

Be sure to keep the network connected, or the download will probably fail.

Well I have a normal network connection, or failed ...

III. structure of the project

The project is built like this:

Look at the project structure, in fact, we need to develop the main parts are in the WWW directory:

Look, and a simple Web project very much like it, CSS, IMG, JS have, this is a pure HTML5 site. JS directory is the angular code, the templates directory is the page.

Click to open the dependencies and find the parts that are not installed:

But it doesn't matter, this is not installed and does not affect the operation.

Four, the first time the compilation

Now plug in your Android phone and run the first Cordova program. Choose Debugging equipment on the menu, recommended to debug with the real machine, I once used the VS2015 Android simulator, the speed is very fast, but the network was ruined. For this simple Cordova program, it is also possible to use ripple. Ripple is a plugin that runs in Chrome, and also provides some features such as GPS, back keys, and other emulators.

If it is the first time to compile the Cordova project, will download the Gradle, the speed is relatively slow, probably takes more than half an hour to longer. It is better not to stop halfway, otherwise there will be inexplicable errors. Normal compilation once is fast. This is the look in the ripple:

On the left is some information about the ripple, including the platform, version, accelerometer, battery status, and so on, where the accelerometer can simulate the effect of shaking the phone.

On the right is the settings, GPS information, network, events, etc.

These events are often used:

Here are some deviceready, Backbutton and other events, where Deviceready is the Cordova initialization after the device is ready to complete the event, you can do some processing inside. Backbutton is the analog back button. You can also provide simulations of events such as pause, resume, and so on.

But for the current simple program, the basic use of less complex features, you can click the tab bar to see, three tab, home is an introduction, the second is a chat list, the third is a switch button. When you click on the chat list there will be a page transition effect, look good.

v. operation mode of Angular

Now it's time to look at where these pages are placed. And how do you assemble them?

Since the WWW directory is a website, of course, the first thing to look at the index page. Open the Index.html page, you can see, the page header introduced Ionic and angular, Cordova JS file, where Cordova has a line of comments:

<!--Cordova Script (this would be a 404 during development)-

Note that this file is not found to be normal during the development process.

Next there are three lines of important JS:

This is the core of the JS file. Angular and MVC are similar, as well as model, controller and other concepts.

Next is the HTML code:

The first page is so simple, these ion start tags, is ionic provides the angular directive. Directive is an important concept for angular, which enables the customization of HTML extensions. In other words, Ionic is actually writing a set of angular instructions to achieve these beautiful page effects.

If you haven't touched angular, you may not understand. It's okay, then look down.

Open the Www/js/app.js file, which is the angular initialization file:

Look at the index.html code, there are

And JS has a module called starter, which will be the HTML and angular link up. Angular See the code of Ng-app, this part will be processed. The module function has several parameters, uses a dependency injection, and injects a controller and a services.

Here is the config function, where the angular route is used to handle the state of the various pages:

That is, each different state, which corresponds to a different HTML page, uses a different controller.

Look at the tab page, the corresponding template is tabs.html. Open it:

Here again is the Ionic directive, which defines three ion-tab to display different tab pages, corresponding to different state.

Then open the Www/js/controller.js file, which is the definition of each controller:

This is somewhat like the concept of MVC, where each page has a corresponding controller handle.

Next look at an important concept of angular, two-way binding. We just looked at the chat list that page, the page address is templates/tab-chats.html, open:

See Ion-item inside there are ng-repeat code, this is the angular loop, you can put the following chat in the Chats loop display processing. So where did chats come from? Open Controller.js:

There's a chats in the controller, but what's $scope?

I understand that $scope is a glue that sticks the controller and the view together. Everything in the controller must be placed under the $scope to be accessed by the view. Chatsctrl defines a $scope.chats that can be used on the page.

This code implements the binding. If you've written MVC or WPF programs, it should be easier to understand.

So where did chats come from? Chatsctrl first took a dependency injection, injected a Chats, and then performed an assignment in the function, Chats.all ()

Remember when you first injected a starter.services into the App.js app? Now open www/js/services.js:

Found, the services are defined here. This uses the angular factory, which defines a factory named chats, with the All () method returning a chat list.

After this analysis, we probably understand the way the program runs, first angular will initialize the app, inject controller and service, the ionic instructions to process, rendering into a page.

VI. Add View and Controller

Now we can consider our purpose, I want to add a tab page, to display a news list, this list is also to be obtained from the network interface.

Start by adding a tab page. Open tabs.html, Tiger plus a ion-tab:

Icon I lazy will not change, the specific icon can refer to: http://ionicons.com/Here are ionic with the icon style

Add a tab-newslist.html file to the templates directory.

In Controller.js, add a controller named Newslistctrl:

Define a newslist, which is the list of news to be displayed.

Now modify the state in the App.js to associate the controller with the view:

This way, when you click on the tab, the link matches the tab/newslist, and you will find the Newslistctrl controller and tab-newslist.html to display. Note the various parameters in the state, corresponding to the name of the View code.

The list also looks like a chat page:

Well, the controller has, the view also has, the data also defines, but where does the data come from? Of course to get it from the Internet.

vii. angular using promise to implement asynchronous service

To facilitate the demonstration, I used a news website API interface:

Http://app.thepaper.cn/clt/jsp/v3/nodeContList.jsp?n=25462&WD-UUID=864819028898243&pageidx=1

This interface is a GET request with three parameters, where Pageidx is the number of pages.

Where is the part that gets the data written? We refer to the chats in services, which are written in services. Note that the template comes with factory, but I use the service here. In fact, these two things almost, I used to use the service. The specific difference can refer to this article: Http://www.ng-newsletter.com/25-days-of-angular/day-1 Anyway, I feel that in addition to the service can customize some parameters, the role is similar.

Open Services.js and add the following code:

Define a newsservice, inject $q and $http. Because the acquisition of network data is asynchronous, angular provides the implementation of Promis, by calling $q.defer () to create a deferred instance, deferred have resolve, reject, notyfy several methods, Where resolve is accepted as the result, reject is rejected. Promise there is an article written better: http://blog.jobbole.com/51178/now only know that promise is used to achieve the asynchronous can be. $http is angular's built-in HTTP service, which makes it easy to implement various network requests such as Get/post, and the usage is somewhat similar to jquery's Ajax.

Yes, we have to look at the return data of the interface. The browser can request that address directly, and the data returned is this:

The data is in JSON format, and if ResultCode is 1, the description returns to normal. Contlist is a list of news headlines.

The service is written like this:

Finally, you want to return to Deferred.promise.

Eight, call service display data

The service returns a promise that, when invoked, uses the then method to receive the data. Then the method has two parameters, one is the successful processing, and the other is the processing after the failure. Modify the code in the controller:

Be careful not to forget to inject the newsservice in.

Also change the item template for the page:

Now run for a look:

Hey? Why is the tab title garbled? This must be a coding problem.

Right-click on the tabs.html file, select Open With, and select the HTML editor with the encoding feature:

Then select Utf-8:

Can see, sure enough garbled:

Re-enter the Chinese title and save. Now is the Utf-8 code. It is possible that VS2015 chose GB2312 when it was saved. But this situation has not found the law, sometimes the document also has the Chinese is correct. If you encounter coding problems, change it manually.

For Ion-list's display style, refer to the official documentation for more information: http://ionicframework.com/docs/components/#list

and http://ionicframework.com/docs/api/directive/ionList/

nine, drop-down refresh and scroll load more

The list shows up, now add the drop-down refresh and scroll to the bottom to load more.

Ionic Intimate encapsulation of these two methods. Drop-down Refresh is ionrefresher:http://ionicframework.com/docs/api/directive/ionrefresher/

Load More is ion-infinite-scroll:http://ionicframework.com/docs/api/directive/ioninfinitescroll/

Let's look at the drop-down refresh. Add the following code to the controller:

In fact, the drop-down refresh is to retrieve the first page of data, the data re-assigned to the value.

Then modify the view, modify the Tab-newslist.html file, and add the following code to the Ion-content:

Yes, just a ion-refresher to get it done.

Load more is also similar, add one to the controller to get more methods:

Modify View:

Note that the drop-down refresh is added to the front of the ion-content instruction, and the addition is placed at the end, and is wrapped up by ion-content instructions.

Isn't it simple? Think of the dropdown refresh in the UWP ...

X. Using vs code to edit code

By the way, when I use the Ionic pack plugin, I frequently encounter problems that cause VS2015 crashes, and no good solution has been found yet. In fact, you can use the VS code to encode, after installation press F1, enter the "extension", you have not read wrong, to enter Chinese! Haha vs code in the culture is too thorough. Used to enter ext install, you must now enter the Chinese command. Then find the ionic and angular extension installation, you can support smart tips.

VS code is also very cool, ionic comments are in Chinese haha:

11, cross-platform

In fact, with Cordova mainly or for cross-platform, Ionic also support the UWP Ah, otherwise I would be embarrassed to write Win10 UWP development series. With the debug target selected, you can see that the N platforms are supported:

Choose Universal, connect a WIN10 mobile phone, the same can be compiled and run Oh ^_^ is like this:

As you can see, the tab position is below, not the same as the Android platform. The ionic is tailored to the design language of each platform. However, you can also change them by configuration items.

iOS because there is no device, no conditions tested.

If there is a situation that cannot be compiled or cannot be installed, try to clean up the solution and recompile. I have met a few times, it is clear after the installation can be installed debugging.

Conclusion

This demo is over here. The page that looks at the news details is the same as the steps to view the chat details, and it is not written. This example is mainly to illustrate that VS2015 's support for Cordova has been perfect. This is just a simple example of getting started, and I'm learning more in-depth content. Students who wish to be interested are discussed together. It is also important that for cross-platform app development I always have this view, cross-platform is not omnipotent, to see the specific use of the scene. For example, the simple news browsing app can be used in Cordova mode, if it involves more scenes that call hardware, or the native code is more efficient. Now it's time to try Xamarin,vs2015 Update2 has built-in support for Xamarin and is looking forward to a better performance with Xamarin.

WIN10 UWP Development Series: Developing the first Cordova App with VS2015 Update2+ionic