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 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:
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!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.
About Lucid
Lucid Software is the leader in visual collaboration and work acceleration, helping teams see and build the future by turning ideas into reality. Its products include the Lucid Visual Collaboration Suite (Lucidchart and Lucidspark) and airfocus. The Lucid Visual Collaboration Suite, combined with powerful accelerators for business agility, cloud, and process transformation, empowers organizations to streamline work, foster alignment, and drive business transformation at scale. airfocus, an AI-powered product management and roadmapping platform, extends these capabilities by helping teams prioritize work, define product strategy, and align execution with business goals. The most used work acceleration platform by the Fortune 500, Lucid's solutions are trusted by more than 100 million users across enterprises worldwide, including Google, GE, and NBC Universal. Lucid partners with leaders such as Google, Atlassian, and Microsoft, and has received numerous awards for its products, growth, and workplace culture.
