Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.5 Set Up the Angular 2 Project

In this lesson I'll show you how to bootstrap a new Angular 2 project using Semantic UI. We'll be building a mockup of the Kickstarter home page.

4.5 Set Up the Angular 2 Project

Hello, everyone, I am Reggie Dawson. Welcome to the Semantic UI Framework and JavaScript Projects Course for Tuts+. Now that we know how to build an app with Semantic in plain JavaScript and Semantic in React, the last framework we will use is Angular 2. Even though there's not yet an integration with Angular 2 for Semantic, it is easy to set up. This time we are going to build the user interface of a crowdfunding site that will be similar to Kickstarter. Again, it isn't really about the functionality of the app but how we can incorporate Semantic UI into our project. Now the quickest and easiest way I found to set up an Angular 2 project is by using the Angular command line interface. The tool also allows you to generate components, services, and routes as well. In order to install the Angular command line interface all we need is npm. Once we have that, we are free to use the tool to generate our project. Navigate to where you want to create the project in the command line and use the ng new command. Now the ng new command will generate a project in the folder with the name that we provide. Once that is complete, navigate into your project folder. Now we have to install Semantic. Go ahead and choose automatic to configure Semantic with the default options. Now after Semantic is set up, let's go into the Semantic folder and run gulp build to compile our project. Now after that, the last thing we need to do is import the Semantic files into our app. Go to the angular-cli.json file in the root of our project. Inside this file, we can add any script or style sheets that need to be loaded globally. First in the styles I'll add the semantic.min.css file. After that, we add our script files. Here we add jQuery alongside the semantic JavaScript file. After that to preview the file, make sure you're on the root of your project, and then run npm start. Now after the project compiles with no errors, we can preview the project at local host:4200. There, you will see a message letting you know that the project is running properly. In the next video, we will get started building our project and set up the menu bar.

Back to the top