7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 NativeScript, Typescript, and Angular 2

In this lesson, I’ll explain the basics of integration between Angular 2, TypeScript (a strongly typed version of JavaScript), and NativeScript. You’ll learn how a NativeScript project is set up and how to render NativeScript components from an Angular app.

Related Links

2.2 NativeScript, Typescript, and Angular 2

Hello everyone, I am Reggie Dawson. Welcome to the NativeScript in Mobile Angular 2 course from Tuts+. In this video we will learn a little bit about how Angular 2 and TypeScript work with NativeScript. As I said before, you can develop apps with NativeScript using just plain JavaScript. Since I already have experience with Angular 2 and TypeScript, it is only natural that I will use them with my NativeScript projects. I have created a few courses on Angular 2, and I really like the framework a lot. Along the way I also started to like TypeScript and have decided to create all of my projects with this going forward, at least until ES 6 is standardized. Once that happens, moving over will be seamless since TypeScript uses the same syntax as the ES 6. We will go over a few of the features of Angular 2 and TypeScript as they relate to creating an app with NativeScript. If we look at the app we have generated with the NativeScript command line interface, we can see how Angular 2 works. The first thing to note is that since we are using Angular 2 with our project, it has been set up with TypeScript by default. I will show you how to create a project in the next video, but for now, know that we will develop our project using TS files versus files with the JS extension. This is because our projects will be compiled to plain JavaScript when we preview our project. The first file we are looking at is our main.ts file. This is where we bootstrap our app. In a regular Angular 2 project, we will just use Bootstrap but NativeScript has its own custom bootstrap method. At the top of this file, we import this method from the NativeScript Angular library. In Angular 2 nothing is included by default, so at the top of each component you typically see these imports. These imports provided by TypeScript are how we access the methods and properties we need from Angular 2, NativeScript, or from the classes we create ourselves. An example of this is the import of AppComponent. This is importing the root component that will host all of the other components that we will use in our app. This root component is then used with the NativeScript bootstrap. This will start up the app and then display the root component. Next if we go to app.component.ts, we can see what the root component looks like. The first thing we have, of course, is the import statement which is importing the component decorator from the Angular core. Decorators are a TypeScript feature that allows us to supply metadata to our classes. Angular 2 uses these decorators to specify a component, which we see here right after the import. As you can see, the decorator is preceded by the at symbol. Inside the configuration object of the component, we first have the selector. Now, in this example, it doesn't do anything since this is the component loaded by the bootstrap method. Under normal circumstances we use the selector to specify where to place the component in the view, but the bootstrap will just load this component by default. Then we have the template we are using. Another feature of TypeScript is being able to use multiline strings by enclosing them in backticks. This allows us to create complex templates directly inside of our component, although I generally prefer to use external templates. This template is an example of the XML we will use to create our NativeScript apps. Stack layout is definitely not standard HTML, although it does look like it. Then we have a class that is exported from this file. Classes are another feature that TypeScript provides us with and Angular 2 uses the class as the basis of its components. The export statement is how we make this class, its methods, and properties available to other modules in our app. Then after that, we have a variable set to public called counter. We can specify members of our class to be public or private. Public means that the member will be available outside of the class, while private restricts access to the class. This variable has also been typed to a number. Typing is the signature feature that gives TypeScript its name. Remember I said that TypeScript will help you build complex apps? Well, typing helps when there are multiple developers working on a project. Typing makes sure you are using the correct values in a variable, in this case a number. If we tried to place this string in a variable, an editor such as Microsoft VS Code will let you know there is a problem. Following that, we have a TypeScript accessor that also has a type, in this case for the return value, which will be a string. Accessors allow you the get or set a property, in this case the message property that our label is bound to. We will talk more about this as we build our project. One last thing to note, especially if you have a background with the original Angular. You may notice that we use the DIS keyword to access members of our class. In the original Angular we had to use scope but in Angular 2 we use the DIS keyword instead. That is pretty much the basics of using Angular 2 in TypeScript with NativeScript. This will be enough to get you started and allows you to follow along with the course. If you want a deeper introduction to Angular 2 and TypeScript, you can always check out my course Get Started With Angular 2. I have included a link in the course notes. In the next video, we will learn how to install NativeScript and create our project.

Back to the top