Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Project Setup

In this lesson we’ll get our project set up. I’ll also walk you through the files in the Angular 2 starter project and explain how it all fits together.

Related Links

2.1 Project Setup

Hello, everyone. I am Reggie Dawson. Welcome to the Angular 2 Routing course for Tuts+. In this video, we will get started by configuring the project that we will build in this course. For this, I have included an Angular 2 starter template. There is a newly released Angular 2 command line interface that we could have used. But I feel it adds a little too much, especially if you're just getting started with Angular 2. This course we also expect that you have some basic knowledge about Angular 2. We will be using TypeScript for this course, and I will not be explaining its concepts as in depth as I normally would. If you need to brush up on Angular 2, check out my Get Started with Angular 2 course. Now, my starter project is simply a clone of the Angular 2 quick start project. I will go over what the files too, so that you can understand why we need them. First, we will start with the index.html file. Now, this is just a standard HTML file with the stylesheet reference for style.css. This is where we'll add any styling that we need for our app. Then we have our script references pointing at our node_ modules folder. Now, if you have just downloaded the project, you won't even have a node_modules folder. Shim.js provides polyfills and ES6 compatibility, zone.js and Reflect are needed to make Angular 2 function properly. And system.js is a module loader that can be substituted for another module loader of your choice. After that, we have the System JS import. Notice, we don't have to add script references for the scripts that we will create. That is because they will be loaded by System JS. But we still need to load the initial script that will be the root of our app. Here we are importing from the app folder. I know this doesn't look like much but there is further configuration in the System JS config file that is controlling this. We will talk more about this in a moment. Then we have the my-app selector that says loading. This is a selector that directly corresponds to the root component that is loaded by our app when it starts. The loading message will only be displayed as the app is loading. Once Angular 2 has loaded, the my-app selector will be replaced by the root component. The next file we will look at is the package.json file. As you may recall, we are pointing to the node_modules folder for our script references. This file will handle adding that folder and all of our dependencies for us. The package.json file is the configuration for the packages needed for our app. At the top we have our app name and version. Feel free to change these. After that, we have the script section. These are scripts configured to run with the npm command. The first script start is probably the one that we will use the most. This runs the TypeScript compiler first and then continues to run the compiler in watch mode, while at the same time launching the app in a web browser. Now all the scripts beside the start script use the npm run command. This is how we will run the next script, lite. This launches the lite web server and is the script launched in the start script as well. Then we have a postinstall script that will install any typings after we install the packages for our app. Typings allow the TypeScript compiler to understand the unique syntax of JavaScript libraries. We do this so that we can use a library such as jQuery without errors. Then we have the tsc and tscw scripts, these both launch the TypeScript compiler, but the w option runs the compiler in watch mode. This will watch for any changes to the TypeScript files and compile when there are. And then following that, we have our script for typings which will allow us to add any typings we need for our app. Then we have the dependencies of the project which are the libraries required to make our app work. These are all installed in the node_modules folder and will always need to be part of the project in some way. The bulk of these dependencies are Angular 2, of course. An interesting thing about Angular 2 is that it is very modular. You have to import any parts of Angular that you need and as a result, you see multiple Angular modules. Then we have the other libraries we have seen in our index.html file with the exception of RxJS. RxJS will be called directly from our components and is used to provide observables. After that, we have our dev dependencies. These are only needed during the development process, and will not be included when your app is released. Here, the only thing we haven't discussed is, concurrently, which ones are the TypeScript compiler and the lite-server at the same time. Then our styles.css file is empty right now, but we will add some styles to it later. Then if we look at systemjs.config.js, we can see how systemjs knows what JavaScript files to load. First, we have map that points to the folders that contain necessary libraries that we need to load. We have our app folder that will hold the files that make up our app, then we have Angular 2 and RxJS libraries in the node_modules folder. Then in the packages, we have app. This is pointing to our main.js file that bootstraps our Angular 2 app. This file and all others will import any other files they need directly. System JS will handle the loading of these files. Then if you go to tsconfig.json, we can see the configuration for our TypeScript compiler. First, we have our target which is what version of JavaScript we will compile to. In this case, it is set to standard ES5 JavaScript. TypeScript is compiled to plain JavaScript in most cases. Then we have our module format which is commonjs, while the moduleResolution is set to node. Then the sourceMap is set to true. After that, we have emitDecoratorMetadata and experimentalDecorator set to true. Decorators are needed to make Angular 2 work, so it goes without saying that these have to be set to true. Then we have removedComments set to false, and noImplicitAny set to false. Then if we look at the typings.json file, you will see three entries. TypeScript definition files will be installed for these three libraries when we complete setting up our project. If you need to add further typings files, you can just use the npm run typing command. Remember that is one of the scripts set up in our package.json file. Now, if you're unsure about the contents of any of the files, you can copy any of them from the Angular 2 quick start. I've included the link in the course notes. You also have the project that I have added to this course, so you don't have to worry about copying anything. It is also a good idea to keep a copy of the project without the node_modules installed as a template, if you will be doing a lot of Angular 2 development. Now, I have also added a app folder with two files inside of it, main.ts and app.component.ts. All types groups files we create will have a TS extension and the TypeScript compiler will create a JS file with the same name. First, let's look at main.ts. This is the first file that will be loaded in our app. At the top of this file, we have our import statements. Every component we build in Angular 2 will start with these imports. First, we are grabbing the bootstrap component, then we are also importing the app component file as well. After that, we have the bootstrap function passing in app component. Bootstrap starts up our app and loads the component that we pass to it as the root component of our app. App component will host all the other components in our app. Now, if we go over to our app component, we again see the import statement to start it off. Here, we are importing the component decorator from Angular core. You can recognize a decorator as they are prefixed with the @ symbol. This decorator supplies metadata to an attached class. Inside the decorator, we have our selector. Remember the my-app on our index.html page? Well, this is where it comes from. Then we have an inline template, we also have the option of using external HTML templates. Generally, if your template is going to be extensive, you would want to use an external file. After our component decorator, we have the app component class that we are exporting. The export keyword allows us to use this class across our app as a module. Classes are the backbone of Angular 2 since all components are going to be classes. TypeScript includes classes since it uses ES6 JavaScript syntax. Those are all the files we need to set up our app. After you have the project set up, make sure that you have node.js installed. Go to the Node.js site and choose the correct install for your operating system. After that, navigate to your project folder and a command line. All we have to do here is run npm install to set up our project. Now, once we do that, a node_modules folder should be created. This of course, will hold all of our libraries. A typings folder that holds our definitions we added should also be created. Now, just to be sure everything is set up properly, run npm start in the command line. Now, you should see the message appear that is in our template. After that, the initial setup of our app is done. In the next video, we will set up our components that we will route between.