This course focuses on developing truly cross-platform, native iOS and Android apps using NativeScript (Ver 3.x). The framework uses Angular, TypeScript or modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with NativeScript UI and layout support and 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 Angular, TypeScript and Javascript skills, and (c) Use various features of the NativeScript framework to build truly cross-platform mobile applications
NativeScript and Angular
Loading...
来自 The Hong Kong University of Science and Technology 的课程
Multiplatform Mobile App Development with NativeScript
75 个评分
The Hong Kong University of Science and Technology
75 个评分
课程 4（共 5 门，Specialization Full Stack Web and Multiplatform Mobile App Development）
从本节课中
Hybrid Mobile App Development Frameworks: NativeScript: An Introduction
This module introduces you to hybrid mobile application development. You will learn about the NativeScript framework and explore some of the features of the NativeScript framework to implement a mobile app based on the Angular application that was implemented in the previous course on Angular.
与讲师见面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
[MUSIC]
Since we are using data script with Angular in this course,
let's examine now how NativeScript leverages Angular framework
in order to enable us to develop our NativeScript applications.
So they look at the code that has been created by our NativeScript CLI for
our previous exercise, and you set as an example to illustrate how NativeScript and
Angular interact for developing our hybrid mobile application.
So, trying to understand how NativeScript and
Angular work together for developing our application.
As we realize NativeScript apps can be developed either using
Angular plus TypeScript or using their one linear JavaScript.
In this course, we're looking at the Angular and TypeScript version.
So let's look at how NativeScript and Angular Into that within our application.
So as it turns out, the advantage of using Angular within our NativeScript
application, is that it brings along all the good features of Angular and
helps us to structure our application in a very, convenient manner.
And helps us leverage all the Angular support that we have for
structuring our application code.
The Angular components, the directives, the service, the data binding,
the dependency injection, and the navigation support in Angular all come for
the right for our NativeScript application.
As we go through the course,
we will realize how we are leveraging all these within our NativeScript application.
Now, as I mentioned at the start of this course,
you should be familiar with all the Angular related concepts by now, either
by taking the previous course on Angular, or by having prior knowledge of Angular.
Because, I will be exploring purely how the Angular
concepts are used within NativeScript in this course.
Of course, the very first question that comes to your mind is
how can we leverage angular for writing a NativeScript application?
From what we have seen in the Angular codes, the Angular code that we
developed there was depending on being able to deploy that to the browser.
It so happens that the Angular framework can be used for scaffolding out and
supporting applications that can be deployed to various waves.
And this is what NativeScript leverages in order to enable
supporting the NativeScript application with Angular.
Now, if you recall in the Angular course we have seen how we
bootstrapped our Angular application, using the platform browser dynamic.
With NativeScript the NativeScript itself supports
a way of initializing certain things that NativeScript itself requires.
And then, combining together with Angular's own initialization code,
summed up together helps us to bootstrap our NativeScript application.
So, the NativeScript itself starts out by initializing various global objects and
the CSS rules and then navigating to the main page.
But it depends upon Angular to bootstrap itself with it's own initialization
of the angular modules the directives, the dependency injection and
the providers and so on, and then summed up together,
we have our working data NativeScript application.
So this is where the NativeScript Angular application needs to do both.
And this is where instead of using platform browser dynamic as we did
in the Angular code, we'll be using platform NativeScriptDynamic to
bootstrap our NativeScript application.
So this is where we'll say platformNativeDynamic()boostrapModule
the AppComponentModule.
As we will see in the code that we will examine in a short while.
So with this, NativeScript also comes with its own custom dependency injection
providers, the NativeScriptModules, the NativeScriptRouterModule.
The NativeScriptHttpModule, the FormsModule, all of which we will
be leveraging in this course for developing our NativeScript application.
So, now that we have had a quick introduction to the concepts,
let's go and take a look at the code.
Going to our project in the editor, all the action that
we are interested is all confined to the app folder here.
So within the app folder, you will see the Appmodule.ts file so
that is where the whole action begins and of course, the main.ts file.
So if you open the main.ts file, you will see that in the main.ts that we
are importing platformNativeScriptDynamic here from nativescript-angular/platform.
Now earlier, in the standard Angular application,
we were importing browser dynamic there, so notice the difference already here.
And we're also importing the AppModule here into the main.ts file,
so this is where the action begins.
And then we are bootstrapping our NativeScript application by saying
platformNativeScriptDynamic().bootstrapMo- dule(AppModule);.
And this is what pulls in the angular code together with the NativeScript code and
then we have out NativeScript application up and running.
And of course, from your knowledge of angular,
you know the app.module.ts file is where all the Angular action takes place.
So this is the root module for our Angular application.
We will be primarily using this root module as the host for
the entire NativeScript application in this course.
So in the route module or in the app module you see that we
are importing the NGModule from the Angular code.
And then note that we're importing the NativeScript module from
nativescript-angular/nativescript.module.
So this is where we are using the NativeScript module together with our
Angular module to get our NativeScript application started.
And then of course, we will be importing the AppRoutingModule, where we will setup
the routing or the navigation for our NativeScript application.
We'll examine that in one of the later exercises and
the AppComponent, as you would expect.
And then you also see that we are importing a few components here and
a service here.
Now obviously as we develop this application,
I'm going to replace this with my own components and my own services.
And then, down below here, of course you'll see the NgModule decorator.
And from your knowledge of Angular, you know exactly what is happening here.
So we're configuring the various aspects of the NgModule decorator,
the bootstrap, the imports the declarations and providers.
And we're not going to go into too much of details into this because you
are familiar with Angular, so you understand what this code is doing here.
And then AppModule itself uses the AppComponent
as the root component for our application.
So this is where AppComponent starts out and
you have the corresponding AppComponent.html file,
which contains a single tab called as page-router-outlet.
I'm going to come to that in the exercise on the NativeScript navigation,
which will follow two lessons down the road.
Being equipped research to this folder named item, so this is where our
starter two components that have already been scuffled about exist.
So here, you see the item.componet.ts file,
you can take a few minutes to examine the contents of this item.componet.ts file,
and also the item.detailed.componet.ts file.
So this should look fairly familiar to you, except for
minor little details of NativeScript.crypt in here.
But the moment you take a look at the template files,
you'll see that this doesn't look anything familiar from your knowledge of Angular.
This doesn't look anything like HTML that you have seen in Angular codes.
Now, this is where we have to look at NativeScript's template syntax.
So, coming back to the NativeScript Template Syntax.
The NativeScript uses the native UI elements from each of
the two platforms the Android and the iOS in order to render the UI and the views.
So, we need to be able to specify
what the native element should be used for rendering the views.
So this is where NativeScript provides its own XML format for
specifying the templates, and then it translates that XML format template into
the corresponding native UI elements that are supported on both Android and iOS.
So the mapping is automatically done by NativeScript for us.
But, this also means that we can't use HTML for our Markup in our template.
Instead we have to learn the NativeScripts on XML format for
specifying the template for our use, and
we examine more of the NativeScript templates syntax and
understand how this Markup works for designing our Views.
Contrasting NativeScript and Angular way of defining the views here.
So as you see, in the component decorator we specified the templateUrl.
If you are developing an Angular application, that templateUrl will
take HTML-like syntax which Angular users for specifying the views.
In case of a NativeScript application,
you will be making use of the corresponding NativeScript XML syntax.
So for example, as you see the check box specified in
the Angular way uses the input and specifies the type checkbox.
In case of NativeScript we will specify that using a tag called a switch,
which we will actually use in one of the exercises that follows in this course.
But, I want you to appreciate the fact that you need to learn and
new syntax for specifying the templates for our NativeScript applications.
It's not that difficult, once you get here head around
learning the syntax is very easy and as we vocal the exercises,
you will see how easy it is to construct the views for our NativeScript components.
Which are Angular components that we use in our NativeScript application.
So again, coming back to the little bit of details
in the itemcomponent.html file, you see something called action bar here.
If you're familiar with Androids way of specifying its layouts using XML syntax.
You might see some similarities between the way NativeScript specifies its syntax,
and the way Android layouts are defined.
You might see some commonalities in the tags that are used there.
Similarly, you have something called StackLayouts, so which allows
you to layout the various pieces of information within your views there.
And then you see something called a ListView, which enables you to construct
a list of items which we will go through in our next exercise in more detail.
And then you'll see an ng-template here,
which we'll come to again in the next exercise.
And a label here, a label is used to host a text element, within our views.
Now with this quick introduction,
let's move on to understand how native script and Angular interact and
then we will see more details in the next exercise that follows this lesson.
The other aspect is that because now we're using Angular,
NativeScript also package us many of their Native features and makes
that available to our angular application in the form of NativeScript modules.
So you have a bunch of NativeScript modules so
those NativeScript also uses a modular architecture.
We have code modules,
they're called NativeScript modules which are used for any NativeScript application.
Then in addition, we will be using some device modules which give us
device specific information, some data modules, some platform related modules.
Then some user interface functionalities, things like layouts,
widgets, and so on, which will employ as we go through the exercises.
Now, we will include only those modules within our NativeScript application as and
when they are required.
So, you will see me importing modules within my NativeScript
application whenever I need them.
So I might import a switch in one place, I may import a date picker in another place,
a time picker in another place, and so on.
So, as we go through and as I import these modules and
make use of them within in my NativeScript application.
I will illustrate more details and
explain you at that point, taking this idea further,
examining the NativeScript HTTP module in detail.
As you saw with a standard Angular application browser,
Angular supports the Angular HTTP module,
which will leverage for communicating with the server.
NativeScript on the other hand, provides a corresponding NativeScript HTTP module,
which packages the native capabilities of each of the platforms into a way,
such that HTTP calls are done using the native support that is available.
Whether it is an Android or whether it is an iOS, and
then vector is made available in the form of a NativeScript HTTP module which
you can use within your NativeScript application.
So when we communicate with a server, you will see me importing
the NativeScript HTTP module into my NativeScript application.
Now, similar approaches used, for example, for the forms module and
many other modules, NativeScript modules that we will leverage while we
develop our NativeScript application.
With this quick understanding of how NativeScript and Angular interact,
let's move onto the next exercise.
Where we will include our very first component into our NativeScript
application, and then start developing our application.
[MUSIC]
