INSTALLING ANGULAR 2, js AND OTHER DEPENDENCIES

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:

  1. Install NPM. You can follow the steps here.  
  2. Install angular-cli using NPM. npm install -g angular-cli. Linux users will want to run this command with sudo.
  3. 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. **

Sometimes, it is serving at http://localhost:4200. Going to that address shows the 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.cssapp.component.htmlapp.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.

 
  • 0 Els usuaris han Trobat Això Útil
Ha estat útil la resposta?

Articles Relacionats

How do I create a MySQL database?

  Login to your cPanel and click on MySQL Databases Enter the name of the database in the...

How do I downgrade my shared hosting account?

  A hosting account can only be downgraded at the point of renewal. Before downgrading your...

How do I transfer my hosting account to TFhost?

At the moment, we can only assist you with the transfer of all the contents of your hosting...

How to change your cpanel password

  To change the Cpanel password of any of your accounts, you have to log into your TFhost...

How to move an addon domain from one cPanel to another

  Please note this is not a transfer type supported by TFhost. We will only move content...