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.