Explore
For Enterprise
Join for Free
Log In

艺术与人文
商务
计算机科学
数据科学
信息技术
健康
数学和逻辑
个人发展
物理科学与工程
社会科学
语言学习
學位
證書

瀏覽 Coursera 的全部課程

瀏覽
搜索
企業版
登錄
免費加入

Ionic and Angular

Loading...

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

香港科技大学

4.7（253 個評分） | 9.4K 名學生已註冊

課程 3（共 5 門，Full Stack Web and Multiplatform Mobile App Development 專項課程）

This course focuses on developing multiplatform mobile applications using the Web technologies (HTML5, CSS and Javascript). In particular we make use of the Cordova hybrid application framework to develop and target multiple mobile platforms with a single codebase. We make use of the Ionic framework (Ionic Ver 3.x), one of the most popular mobile application frameworks, that is built with mobile-optimized HTML5 and CSS based components and Angular. You will learn about UI development with Ionic and then using Cordova's modules to access the native mobile platform's capabilities from Javascript. You should have already completed the Bootstrap 4 and the Angular courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your HTML5, CSS, Javascript and Angular skills, and (c) Use various features of the Ionic framework to build hybrid mobile applications

查看授課大綱

您將學習的技能

Ionic (Mobile App Framework), Apache Cordova, Angularjs, Mobile Application Development

審閱

4.7（253 個評分）

5 stars
202 ratings
4 stars
39 ratings
3 stars
6 ratings
1 star
6 ratings

BC

Feb 05, 2018

Great course! You definitely get your money's worth. Challenging, but informative.

AA

Oct 30, 2017

Best course ever\n\nThanks for that course it help me to make android and ios app

從本節課中

Hybrid Mobile App Development Frameworks: An Introduction

This module introduces you to hybrid mobile application development. You will learn about the Ionic framework and explore some of the features of the Ionic framework to implement an Ionic app based on the Angular application that was implemented in the previous course on Angular.

Ionic and Angular21:59

Exercise (Video): Getting Started with your Ionic App23:15

Exercise (Video): Ionic and Angular56:00

教學方

Jogesh K. Muppala
Associate Professor

腳本

[MUSIC]

As I have mentioned in the previous lecture,

Ionic makes use of Angular for developing the Ionic application.

Let's spend a little bit of time to understand how Ionic leverages Angular for

developing an Ionic application next.

To understand how Ionic and Angular retract,

an Ionic application is basically an Angular single page application.

We have already learned about Angular single page applications

in the previous course.

So all the Angular features that we leveraged in the previous course for

developing our Angular application,

are also available as part of your Ionic application.

Now Ionic users, as I said, Angular for developing the Single-page Application,

in Ionic's case, we have pages that

are used for developing our Ionic application.

A page in terms of Ionic is equivalent to an Angular component.

So you would see that Ionic uses the Angular component to support the various

pages that form part of our Ionic application.

Ionic also supports page navigation using a Stack like

behavior just like the way the native applications,

developed in native platforms like iOS or Android support navigation.

So, we will learn more about the navigation supporting

Ionic in one of the later lectures in this module.

So when you look at an Ionic application, you will see that Ionic adds its own set

of components that we can leverage in developing an Ionic application.

And also, its own set of services and

directives that can be used while you're designing your Ionic application.

The component APIs include classes like Checkbox, Toggle, Item and so on

that we will make use of when we double up the templates for our Ionic application.

You will see Ionic playing a similar role to what we have seen with

the Angular material module that we used in the Angular course.

And also, Ionic has its own service APIs that are classes

like the menu controller, the config or the platform that we will see that

leverage in our Ionic application as we develop through in our rest of the course.

So these are services that are provided by Ionic that can be injected

into the components that we develop in our Ionic application.

And also, you will see me using Ionic directives things like ion-view,

ion-content, ion-list, ion-tabs, and many more.

When we develop the templates for our pages in our ionic application.

So you would, having experienced the use of Angular

material in the previous course, you will begin to see similar patterns

when we develop our Ionic application in terms of how the templates are designed.

When we used Angular material, we used the Angular material directives

when we developed the templates for our Angular components.

Similarly, we will use the Ionic directives when we develop the templates

for the Ionic pages, within our Ionic application.

Now that we have scaffolded out a simple application using the Ionic CLI,

let's pay a quick visit to understand the structure of our Ionic application.

Taking a look at our Ionic application in an editor.

So here, I have my Ionic application project open in Visual Studio Code,

and I'm going to quickly take you through a tool of

all the set of files that have been scaffolded out by Ionic CLI on our behalf.

And you would notice that, all the basic structure for our Ionic application,

and all the setup for preparing and serving up our Ionic application and

even packaging it using the Cordova, are all set up for us by the ionic CLI.

So taking a quick tour through this,

you will see, let me start by looking at the package.json file.

So as you would expect, since this is an application double up using that node

modules, the package.json file contains typically all the information about

the structure of this application, so you will see a bunch of scripts given here,

the dependencies for this application.

So here you will see that our ionic application is dependent on Angular ,so it

is importing a bunch of Angular library is here.

And then also the Ionics specific libraries also are imported here,

and also the development dependencies.

So you see the app scripts the CLI plugins and so on that are imported here, and

also TypeScript.

Because our Ionic application is developed using Angular so

we are using TypeScript also for writing the code for our Ionic application.

And in addition to that, you will see an ionic.config.json file

where you will set up a few things that our Ionic application requires.

And then you will have a config.xml file again.

We will not spend too much time in this at this moment.

But whenever we require to know the details of these will pay

a visit to these specific files to understand

what is being declared in these files.

Similarly, you have a gitignore set up there,so that when you do a Git repository

check in, you will not check in those files that are not needed to be

stored in your Git repository.

And then, you have a www folder.

This is where your Ionic application will be

built first before being packaged into your Cordova.

We will see those details later on as we proceed further in this course.

The major full that were all your ionic application related

content that we will be, actively working on is in the source folder.

So you recall from your Angular course that we had the source folder

in our Angular course where our app related files where all stored.

So similarly in the ionic application, the source folder is where we

will store all the files that are required by our Ionic application,

and we'll be working with these files here.

And also, you will see the node modules folder here.

This you would expect in any node base application

resources where you will have specific resources that require by our Ionic

application when it is being packaged for the two platforms, the iOS and Android.

We will look at these in a bit more detail in one of the later exercises in

another module to see what is required here.

But you will see some .png files there initially being stored there.

The main action for us would be in that source folder.

So inside the source folder you will see that,

you'll start with the index.html file,

so as you expect in Angular application to start with an index.html file.

So that is where your action for your Ionic application also takes place.

And you will see that we have imported a bunch of Files in here through the meta,

and then also some scripts here that are required by Ionic application.

Again, going into the assets folder,

this is where you will store whatever assets in terms of

files or images, for example, that you will need for your Ionic application.

As we develop our application, we'll add in more into this particular folder.

app folder is where your Angular part of your Ionic application is configured.

So we'll pay a quick visit to these files in a short while.

The pages, as I told you about our Ionic application,

are all stored in this pages folder.

Currently, you will see two subfolders here called home and list.

We will learn why we have these pages in there.

Similarly, in the theme subfolder,

you will have the files that are required for theming your Ionic application.

In the exercise that follows this lecture, we will be working with this

theme to set up a few colors for our Ionic application here.

So we'll pay a visit to this and

understand some details in this variables.ses folder.

As I mentioned, Ionic uses Saas for its styling, so

that's why you will see the scss code inside this variables.scss file here.

Now let's begin our journey into the actual structure of our Ionic application.

In the app folder here, the main.ts file is the starting point.

So if you look back at your experience with your Angular application,

you also had a main.ts file there.

This serves exactly the same purpose in the Ionic application.

And then you have any global scss code that you want to

share among all the components of your application stored in the app.scss file.

The app.module.ts file serves the same purpose as the app module in

an Angular application.

So here you will see me importing a whole bunch of modules from

the Angular libraries, and also your pages which are nothing but Angular components.

So all these need to be imported into your app module so

that you can configure them within your app module.

And inside the NgModule from your experience with Angular,

you'll see that we have the declarations.

And inside the the declarations, you have all the pages that you develop

in your Ionic application being included here, because they are Angular components.

Also inside this entryComponents property of the NgModule decorator,

you will see me also importing these pages here.

And then you are importing all the modules that you require for your application.

So you see the BrowserModule being imported here just like the Angular

application.

And then you have an IonicModule being imported here, and

that is what enables you to bootstrap your Ionic application.

And then you have a bunch of providers that will be required.

And these are some of the providers or services that Ionic provides for us.

So we will use the SplashScreen.

We'll look at that in a little more detail later and a few other things then.

If you develop your own providers in your Ionic application,

you will also need to include them here.

And then, of course, this exports the class AppModule.

So this is the starting point, the root module for your Angular application,

which is nothing but your Ionic application in this case.

Then the app.html file is where the initial template for

our Ionic application is developed here.

So paying a visit to that,

you would immediately see the use of various Ionic directives here.

So you see an ion-menu here, an ion-header here, an ion-content here.

What do these all mean?

So you see that in this particular Ionic application that we have scaffolded,

we have scaffolded out an application that has a side menu and

the main view of our Ionic application.

The side menu itself in your Ionic application is

defined inside this ion-menu here.

And inside this ion-menu, this is where you'll structure our side menu,

which contains the menu for our Ionic application and it has a header.

So you will see that all Ionic templates would typically have an ion-header and

ion-content.

The header defines the toolbar or the header for

our ionic page that we will use in all our ion application.

And then the ion-content is where we will have the rest of the content that

forms the part of the view of the page for our Ionic application.

So inside here, in the ionic-header, we have an ion-toolbar set up here.

This ion toolbar helps me to define the toolbar or

the header bar for our Ionic application.

And inside there, you see me using an ion-title with the name Menu here.

We're going to leave it as such for the moment.

In the next exercise, we're going to come back and

then modify this a little bit to set up our side menu for

our Ionic application that we will develop in this particular course.

And then down below here, you have the ion-content.

And inside the ion-content, you will see me using the ion-list Ionic component.

As you would expect, this is nothing but a list of items.

And inside this list, you will see me using a button here.

And inside the button here, so button is just like the button you

used in your Angular module and in your bootstrap course.

Similar purpose here, so this is nothing but the standard HTML5 button here.

And then you will see me using a bunch of other things here.

So you have an attribute here called menuClose,

which helps us to close the menu.

And you see the use of that ion-item, and ion-item defines an item in an ion list.

It can be either used as its own HTML-like

element, or can be added as a attribute

to a button as you see here, *ngFor.

Knowing your Angular knowledge, you know what it is doing already.

And then this click.

Obviously, you expect to know what it is supposed to be doing here.

And then we are defining something in here, saying p.title.

We'll look at the code for this app.html [INAUDIBLE] skip code, but

understand what does ps and how we are deriving this title.

So we see that we are constructing the side menu for

our ion-content application using this structure here.

In addition to the menu for my side menu, it also contains this

other element here called ion-nav.

The ion-nav is the one that supports navigation for your Ionic application.

You will see me using ion-nav in many of the templates as we go along.

The ion-nav is the one that supports navigation, but Ionic supports.

Navigation through the pages and so on.

We'll examine that in a bit more detail in one more later lectures.

And you see the use of root so

you see the attribute being specified here and the rootPage

from your Angular knowledge you understand exactly what this is doing here.

And then also a few other attributes for the ion-nav being specified here.

So your root view that you be see in our ionic

application is going to be attached here as a rootPage.

Now let's pay a visit to the corresponding TypeScript file to understand what

does a rootPage which should be a variable in our TypeScript code, and

how this is made use of within our ion-nav here.

So paying your visit to the app.component.ts file here,

this is a standard Angular file here.

So you see me importing a bunch of things here.

In particular let me draw your attention to the import of the component

from the angular core.

So this is an angular component that we are setting up here.

In addition, we are importing something called Nav and

Platform from Ionic Angular, so the Ionic Angular library.

You are importing a StatusBar from Ionic Native status bar,

and the SplashScreen from the Ionic Native splash screen.

We will look at the ionic, native support

in one of the later modules to understand why we are making use of this.

And then you are importing the pages of your ionic application here.

You are importing a home page and a list page.

Recall how the icon application looks in the browser were

we use the ionic serve--lab to serve up our page.

And then, look at the structure of the code here, and

you will start seeing the correlation between the two.

And then, the component itself, you see the template URL being defined here,

the app.html, so that is what we just examined in the previous step.

And so that is where the app template for our component is being defined here.

So this is the root component for

our angular application as well as our ionic application.

You will see me using something called the ViewChild(Nav) and so on, so

we'll come to examine that when we look at navigation.

The rootPage currently is of any type which is set to the HomePage.

HomePage that we have just imported earlier which is the component, angular

component, and also you see me declaring another variable called pages here.

Which is an array of a JavaScript object type here

containing two things a title and a component.

And also later on here you will see me setting up the pages with two things here.

With two JavaScript objects here.

You're setting up those pages as an array here.

And then look at the constructor here,

in the constructor we are supplying the platform, and

then the status bar here, and the splash screen here.

As you know, as we recall these were configured as providers in the app module.

We'll come to look at what they are doing in one of the later exercises,

and then we'll say this.initializeApp.

So this is what initializes here, Ionic app.

So this is Ionic way of doing things.

Fortunately Ionic has already scaffolded on all this code for you.

And then when you initialize your app, we are seeing this.platform.ready.

This has something to do with Cordoba, so when we discuss about Cordoba we'll

understand why we are calling this platform ready method here, and

the inside where, and then you're seeing a then.

So you see the use of an Angular promise here.

And the inside of then, you're saying this.statusBar.styleDefault and

splashScreen.hide.

So again, you are executing something here when this happens.

We'll leave it at that point and

then we'll come back to examine this in one of the later exercises.

But I will draw your attention to how you are configuring

the pages of your ionic application here.

These pages are being configured here.

In the next exercise we're going to include a few more pages into our ionic

application, and then reconfigure our Ionic application to start

developing our own Ionic application as part of this particular course here.

So that is a quick tour through your

Ionic application that we have scaffolded out in the previous exercise.

And also looking at how Ionic is making use of

Angular within our Ionic application.

Now it is time for us to proceed on to the next exercise.

We are going to double up our Ionic applications step by step.

First by adding in a few new pages for our Ionic application in our next exercise,

and then configuring our Ionic application to make use of those new pages.

So, without further ado, let's move on to the next exercise.

[MUSIC]

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2019 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取

Coursera
關於
管理團隊
工作機會
目錄
證書
MasterTrack™ 證書
學位
企業版
政府版

社區
Learners
Partners
Developers
Beta Testers
Translators

連接
博客
Facebook
領英
Twitter
Instagram
YouTube
技術博客

更多
條款
隱私
幫助
內容訪問
媒體
聯繫我們
目錄
附屬公司