Lucid

Let’s be honest. Setting up a “modern” front end application in 2016 can be painful. Luckily the Angular 2 team has provided a command line tool, angular-cli, to help ease the pain. Although it is still in beta, angular-cli is a great way to set up an Angular 2 project and avoid manually copying and pasting configuration files just to get your project to build. The steps to installing Angular 2 are simple:

Install NPM. You can follow the steps here.
Install angular-cli using NPM. npm install -g angular-cli. Linux users will want to run this command with sudo.
Create a new Angular 2 project. ng new PROJECT_NAME. (This will probably take a few minutes.)

With those simple steps, you have a new Angular 2 project. If you go into the root directory of the project you just created and enter the command ng serve, angular-cli will compile your project and start serving it. In the output, you’ll see the address your application is getting served at.

** NG Live Development Server is running on http://localhost:4200. **

For me, it is serving at http://localhost:4200. Going to that address shows me my working Angular 2 app!

However, that’s not very interesting. You have something amazing that you want to build. So you need to start looking around the source code and notice the more than 40,000 files that have been created! Luckily most of those files are in the node_modules directory which you won’t need to worry about. The file structure that you do care about will look something like the following:

angular-cli.json
karma.conf.js
package.json
protractor.conf.js
README.md
tslint.json
src
    favicon.ico
    index.html
    main.ts
    polyfills.ts
    styles.css
    test.ts
    tsconfig.json
    typings.d.ts
    app
        app.component.css
        app.component.html
        app.component.spec.ts
        app.component.ts
        index.ts
        shared
    assets
    environments
        environments.prod.ts
        environments.ts
e2e
    app.e2e-spec.ts
    app.po.ts
    tsconfig.json
node_modules
    ... dependencies

That still seems like a lot to digest right away. The good news is that you can jump into src/app/ and start editing the app directly. In that directory you will see a module file, app.module.ts. You can read more about modules here. You’ll also see four files that make up your first component, app.component.css, app.component.html, app.component.spec.ts, and app.component.ts. These four files define your component's css styles, html template, tests, and typescript logic respectively. When you add a class to your css,

.blue {
    color: blue;
}

and subsequently add that class to your html template,

<h1 class="blue">
    {{title}}
</h1>

you’ll notice that your app is now blue!

Running Angular 2 Application with blue text

As you are creating your application, check out some of our other blog posts on getting started with Angular 2. If you’re interested in learning about the other things that were installed, here are a few links for further reading. angular-cli.json - A configuration file for the angular command line interface. karma.conf.js - A configuration script for the Karma testing framework. You can use Karma to run your *.spec.ts files on multiple browsers. package.json - Your project information that NPM uses. This can be used to add new libraries that you can use in your project. protractor.conf.js - A configuration file for the Protractor end-to-end testing framework. End-to-end testing allows you to test your app by mimicking a user interacting with it. You’ll use this with your tests found in the e2e directory. README.md - A place to describe your project. tslint.json - A configuration file for tslint. src - favicon.ico - The icon that will show in the browser tab. src - index.html - The html file that the browser will load. In this file you’ll see the `app-root` tag, which is where your bootstrapped Angular 2 application will load. src - main.ts - The file that bootstraps your Angular 2 application. src - polyfills.ts - This loads some code that Angular 2 needs to run on all browsers. src - styles.css - You can use this for global styles. src - test.ts - A test file for running Karma tests. src - tsconfig.json - A configuration file for the typescript compiler. src - typings.d.ts - A configuration file for Typings. Typings is a useful tool for adding javascript libraries to your typescript project. src - app - Your actual Angular 2 application source! src - assets - A place for you to put assets such as photos. src - environments - Environments configuration files used by angular-cli.

Installing Angular 2 and Other Dependencies

About Lucid