Module 1: Project Setup

Goals

In this module, our goals are to:

• Get the Angular CLI installed

• Generate a new project

• Introduce the VS Code text editor

• Learn about the project files created by the Angular CLI

• Introduce a core Angular concept named “components”

• Including Bootstrap and jQuery in our project.

Install Angular CLI

Open your Command Prompt (called “Terminal” for MAC users) in any directory. The -g flag means we are installing this package globally - the entire computer will have access to this package. Be warned, this is a large package that may take a while to fully install.

npm install -g @angular/cli

Mac Users

MAC users may need to preface NPM commands with “sudo”. For example:

sudo npm install -g @angular/cli

Create the Project with the CLI

• Inside the command line, navigate to the folder in which you would like to create this new project.

• Type ng new message-board Anytime you preface a command with “ng”, it tells the Angular CLI package to do something. In this case, we tell it to create a “new” project, with the name “message-board”. Later on we will play with commands like “ng serve” and “ng build”. These commands tell the Angular CLI to serve/build our website. (more on that later)

Open the project

MAC users only need to perform the following steps for configure VS Code:

• Launch VS Code.

• Open the Command Palette (Ctrl+Shift+P) and type 'shell command' to find the Shell Command: Install 'code' command in PATH command.

• Restart the terminal.

When finished:

• change directory into the folder for our new project cd message-board

• open the folder in VS Code by typing code .

Step 5. Review Project Files

Let’s look at some of the files that Angular CLI generated for us. Starting from the BOTTOM and going up… the important files we need to be aware of are:

package.json

• Just like every other project you’ve used NPM with - here’s your typical package.json. You’ll

  probably never edit this directly, only through commands such as “npm update​”, etc…

.gitignore

• Typical .gitignore file, pre-populated with a ton of files that we should ignore, including

  /node_modules/ already listed

angular.json

• This is super important and you WILL change this file. In fact, that’s coming up soon! This is the

  configuration for the Angular CLI tool we use to build Angular projects. To be clear, we aren’t

  cheating using the Angular CLI tool - everyone uses Angular CLI. It’s built by the Angular team -

  Angular is designed to be built with the CLI. In fact, we can’t deploy the project without using the

  CLI to build the final version!

• There are two fields that are commonly edited.

• Styles is where you should list your stylesheets. This will be

  important when we start using multiple stylesheets, such as when

  we add bootstrap to our project.

• Scripts is where we add external 3rd-party libraries we want

  included in our project - such as jQuery and Bootstrap.

/src/ folder

• This is where the magic happens. All of it. Our entire app is in the /src/ folder.

  Let’s dig a little more into this /src/ folder. The files to take note of are:

styles.css

• Any rules you place in this file are applied to the whole project. Want all tags to be colored

  green? Put that rule here.

/assets/ folder

• Want to include images in your project? Place them in this folder.

/app/ folder

• This is where we build the different pages... “Home” page, “About Us” page, all that. This is also

  where we handle routing between pages, all the styling for each individual page, and the JavaScript

  (written in TypeScript) for each view.

app.module.ts

• This is the “parent” or “boss” file. It must be aware of everything, it’s the file-in-charge

  (think “CEO - Chief Executive Officer - but for Angular. This is the top-level, highest boss,

  file that hires/fires everyone). Many beginners run into errors when they make a new file,

  but fail to include it in the app.module.ts file. You can open it now, but it won’t mean

  much.

app.component.html

• The HTML file for the “app” component.

app.component.css

• The stylesheet for the “app” component.

app.component.ts

• The TypeScript file for the “app” component. This is where we will type all of our

  TypeScript for this component (with a lot of vanilla JavaScript sprinkled in).

app.component.spec.ts

• The unit testing file for the “app” component - we won’t be covering unit testing in this

  project, you can ignore any file that ends in “spec.ts”.

Components Explained

Components are the bread-and-butter of Angular development. Here’s a great idea - break up your website into different “parts”. One part handles the home page, one part handles the “About Us” page, another part can handle the “Login” page, etc… each of our pages should be its own “part” (or as Angular calls them, “component”). In fact, we can (and should) go a step further. Breaking a website down by it’s different pages might be kinda obvious… but how about breaking down each page? At the beginning of this module we talked about Angular, and used this photo:

In this example, the Header will be a component. The Footer will be a component. The stuff in the middle will each be a component.

This is the structure we will use.​ It is possible to break it down even further - the home component could have sub-components. We could break the “Home” component into a “Welcome” sub-component, maybe another sub-component that handles displaying a rotating image slider… and another sub-component that shows the top news stories of the day… but that’s way too complicated for this project.

Serve the website

Enough conceptual stuff, I want to see something in action!

• Type “ng serve​” to instruct the Angular CLI to combine all those project files into a real website.

• When that finishes, you will see a confirmation message that it was compiled successfully, and it will tell you the URL to access your website. (By default, your website will be served on port 4200.)

• Open your browser and navigate to that URL.

Include Bootstrap and jQuery

Our terminal is currently occupied by the “ng serve​” command. We need to shut this off for a moment. To cancel an “ng serve​” command, press and hold Ctrl (or Cmd) and press the “c” key. For Windows users only:​ When it asks if you want to terminate the batch job, enter “y​’.

Let’s wrap this module up by including the Bootstrap library. Bootstrap requires jQuery, so we will include that library too. Install the NPM packages for Bootstrap and jQuery. npm install bootstrap jquery Because Angular is written in TypeScript, we also need to include a package to allow Angular to recognize jQuery commands. This is only needed while developing in Typescript and is not necessary in the final production build, so we should save it under the development requirements. npm install @types/jquery --save-dev

Note:

Because of some issues with bootstrap 4, we need to make the following change to the package.json.

• put the following in your package.json under dependencies

  "bootstrap": "4.0.0-beta.2",

• then run npm install

Now that we have the packages installed, we need to tell the Angular CLI that it should include those packages in the final build. To tell the Angular CLI how to do something, we edit the settings in the angular.json​ file. We need to edit 2 fields: 1. Tell Angular CLI to use the styles provided by Bootstrap. We should therefore edit the “styles” property. We can find the CSS files for bootstrap in the /node_modules/ folder, type the file path into the array and make sure you place the Bootstrap CSS file above the existing “styles.css”​. Angular CLI will include these CSS files in this order - we want our custom styles.css file to be included last - so it overwrites and takes precedence over any default Bootstrap styling.

"styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.css"
      ],

1. Tell Angular CLI to use the JavaScript files for jQuery and Bootstrap. Again, the order is important. Here it's important that you grab the bootstrap.bundle.min.js, otherwise bootstrap will look for a package that doesn't exist.

   "scripts": [
        "node_modules/jquery/dist/jquery.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
      ],

2. Bootstrap requires jQuery… so jQuery must be loaded required first, and then Bootstrap second. Let’s check to make sure everything is working with Bootstrap and jQuery. In app.component.html​, let’s replace the code that was generated for us with a button with some Bootstrap styling. (Add this anywhere on the page, this is just a test to ensure Bootstrap is being applied correctly.)

   <button class="primary btn-primary btn-lg">Hey Angular</button>

3. Run “ng serve​” again, and check out your website in the browser. (Warning: You may have to refresh the page!)

   You should see your website, now with a giant blue button with Bootstrap styling.

4. Just to be 100% sure everything is working, open your browser’s console and verify there are no error messages.

   The only thing you should see is a message from Angular telling you that you are in “development mode”.

Git

Now to commit to git, angular-cli already did git init for you, but you'll need to run git add . and git commit -m "initial angular commit - end of module 1", and then push it to a git repo you create for this project.

Header Component