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

4.1 Create the Project

Okay! Now it's time to get started on our sample project. We'll be building a simple to-do list app, with a Firebase back-end to handle user login and data. In this lesson we'll get started by creating the root page and configuring routing.

4.1 Create the Project

Hello everyone. I am Reggie Dawson. Welcome to the NativeScript in Mobile Angular 2 course from Tut's +. In this video, we will begin building our project. We are going to be building the classic generic project, a note taking app. To give this an added twist, we are going to build the set using firebase. Firebase is a back-end service you can use with your projects. Before we can get started with Firebase first we have to create our project. Go to a command prompt and navigate to where you want to create your project. This of course will create our project with the name noteApp. The ng flag indicates that this is using the Angular 2 template. This will also set up our project with TypeScript. Now once we have our project, we will need to change a few things to architect the project better. As you know, we will build our project in the app folder. Previously, we just added our files in the root of the app folder. For this project, that won't work as we will have a lot of files that make up this app. Things will quickly get cluttered if we don't find some kind of structure for our app. Each component we build in our app will have three files, the component itself, the template that it uses, and a component level CSS file. As I said before, I prefer using external templates and as a result, the only component that will have an inline template is the root component at.component.ts. First let's create a pages folder in the app folder. This will hold the individual components in their own folders. Once we create that photo, we can go to the app.component.ts file. The first thing we will do is remove everything from the template. Now remember I said before this is the only component that will have an inline template. I will explain why when we come back to the template in a moment. After that we will remove everything from the app component class. Once we do that we can get started by importing the things we need for our project. First we import the page module from UI page. We will see the reason that we imported this in a moment. Then we will import the on init method from Angular core, we can use on init when our component is created to run a method or configure some properties. Then we import route config from Angular router deprecated. The reason that this is deprecated is that the Angular 2 team has updated the router but NativeScript has not updated to this yet. Route config configure is where we will configure our routes for our app. After that we import the directives in provider for the NativeScript router. Although the NativeScript Router is based off the Angular 2 Router, NativeScript actually employs its own router with a different directive for its router outlet. We will talk more about this in a moment. And then we import the LoginComponent from our pages folder. We haven't created this file yet, so if you're using VS code, it will let you know this. Don't worry about it. We will create this file in the next video after that we can configure our component. We can leave our selector as my apps, as this component will be loaded by default from the bootstrap we won't really need this in any component in our apps, since they will all be loaded to routing. The part where the selector comes into play is in situations where you have a component hosted on another. The selector allows you to embed a component anywhere you like as it represents where to place the component. The idea of Angular 2 is a modular project with a component that hosts all others. In this app, the root component will host all the other components. Then we add the NS router directives to the directives array this makes the directors available to this component. Also of the template of this app used another component selector we would need to add the component here. All components in Angular 2 are actually directives the NS router directives allow us to use the directive we need for routing the page router outlet. Then we add the NS router providers to the providers array, providers in Angular 2 represent external services we can pull in and use in our app. Here we are grabbing the methods and properties of the NativeScript router provider. Then finally we add the page router outlet directive in our template Instead of displaying something, this component just displays other components it has routes to. It displays these components where the page router outlet is located. Instead of needing a selector, this becomes the selector for any component loaded through routing. Then we add something that we haven't seen before, the route config decorator. This is configuring the route for our initial component that will load the login component. First we have the path which will not be relevant since our app will not be a webpage but a native app. In an Angular 2 app this would correspond to the path to the component in a browser. Then we have the component which will be loaded when this router's navigated to. After that we have a name which is used to navigate to this route and then finally we have use as default which is set to true. This makes sure that this component is loaded first when the app starts. The next thing we do is add the implements on init to our class. This is so that we can use the N.G. on init method in our class then we add our constructor. We don't always have to add this to our class but in this instance I want to pull in the page module. As a result we alias this in our constructor. Here we are using the private keyword to restrict access only to the at component class. Then finally we add the NG on init method Inside we use the page module to change our app when this component is created. Instead of doing this in our bootstrap function I will override this here. Our app will start at a login screen so we don't need an action bar. After that, our route component is finished. In the next video we will get started with building our log in component.

Back to the top