2.1 Set Up the Project

Hello everyone. I am Reggie Dawson. Welcome to the build a portfolio site with Angular 2 course for Tuts plus. The first thing we need to do is set up our project. Now one of the things that is unique about Angular 2 is that you can decide how to build your app. For example, we have a choice of the module order we can use. I prefer system.js, but web pack will work just as well. The Angular 2 team recently released the Angular 2 command line interface that can quickly scaffold a project for you. It also has the advantage of being able to package your app for production. So as this will be a relatively small app, there is no need to use the command line interface as it will be overkill. Instead I will scaffold my app with a small Angular 2 started template I built. This is based on the Angular 2 quick start and will get you up and running quickly. I have included the Angular 2 starter with this course. Now if we unzip the project and look at the files in a text editor we can make sense of how the app is set up. I will only briefly go over these files and if you want more information on them, you can check out my Get Started with Angular 2 course. First, we will look at index.html. This is the file that will load when our app starts. You'll will need to make a few changes to this file. First, we will add a title. Then we will add the style sheet for bootstrap. This points to the bootstrap library in the node modules folder. Bootstrap will be added in a moment when we install our libraries. Then we have to add a script reference for the jQuery and bootstrap JavaScript files. Bootstrap requires jQuery so this is why we have added it. Now since this project will be built with type script, if we were calling bootstrap components from JavaScript we would get an error. This is because the typescript compiler will not know how to use the unique syntax of the laboratory. To use bootstrap components from TypeScript, we would need to add a definition file. After that we have our system.js config script in our system import. This will load the rest of our scripts that will make up our app. The last thing of not is the My App tag. This is where our Angular 2 app will be loaded. Next, if we look at the package.json file we can see all of the files that are needed for our app. First, I would change the name to Angular 2 Portfolio. Now look at the scripts section. The start script will run the typescript compiler once and then use concurrently to run the compiler and watch mode and launch the light server. Watch mode waits for changes to the project and recompiles when the changes save. The light server will allow you to see what the project looks like as we build it. Then we have the light server script followed by the post install script. This will install any typescript definitions we need. Then we have TSC and TSCW, which are scripts for the typescript compiler. Then, finally, we have the typing script that we use to install the definition files. Next we have the dependencies of the file. These make up the files that have to be present in our app. The package that JSON file works with npm and as a result we will use this to install these files. The majority of our dependencies are Angular 2 packages. Angular 2 is modular and as a result we can pick and choose what modules we want to use. Then we have system.js, core.js, reflect, rx.js and zone.js. These libraries are necessary to make Angular 2 work properly and are the same ones we saw on the index.html file. Then we need to add our bootstrap in jQuery libraries. This makes sure these libraries are installed in the node modules folder. Then finally we have the dev dependencies that are only needed as we build our project. Concurrently allows us to run multiple scripts at once, in this case the typescript compiler and the light server. Light servers are web server that previews our project, while typescript is the compiler. And then finally typings is how we install our definition files. The styles.css file is going to contain any application wide styles we add. We will also be using component level style sheets that only affect a component that is loaded. System.js.config.js holds the configuration for system.js which loads our scripts for us. By using system.js we can build our app with modules as opposed to one huge JavaScript file. You don't really have to understand much about this file, just know that the map tells system.js where the libraries it needs are. Then package tells system.js what files to load as the initial script for the app. In this case it is looking for main.js in the app folder. If you looked in this folder you may have noticed that we don't even have a main.js, just a main.ts. That is because when we compiled our project JavaScript files would be generated for each TypeScript file, then the ts config.JSON file determines the behavior of the typescript compiler. One thing to understand is that angular 2 will not work in TypeScript with the MIT decorator metadata or experimental decorators at the Falls. This is because Angular 2 relies on decorators for pretty much everything. Then finally we have our typings file that will be installed as part of our post install. This will install definition so TypeScript understands the unique syntax of these libraries. Then the last thing we need to do is go into the add folder and delete the add.component.ts file. Normally I would keep this file here but I will instead put a similar file in its own folder. This component would be the first one launched when the app starts. In this case, our component will host routing so I will place it in its own folder. Then, if we go to main.ts we need to make a few changes. First, we replace the import statement for the app component with one from the root component that we are going to create. In every Angular 2 component, we will start with our imports. Bootstrap is needed as this function starts up our app. Then we add our router providers that supplies us with our routes for our app. These haven't been created yet so your editor may be giving you an error but that's okay for now. The last thing we have to do is change the bootstrap function to launch the RootComponent. This tells Angular 2 to launch the RootComponent when the app starts. The RootComponent will in turn host all of the other components through routing. This will make more sense once we set up the root component in the next video. We have also added router providers to our bootstrap function. This will in turn load our routes for our app and make them available to any component in our app. The routes have to be added here for them to work after that the initial configuration and scaffolding of the app is finished. The last thing we need to do is install our libraries. Go to the project folder in a command line and run npm install. This command installs all of the packages listed in the package.JSON file to the node module's folder. After that our app is set up and ready to go. In the next video we will get started by building our root component and setting up our routing.