Hello,Angular 2
After couples of Betas and 7 RCs,Angular 2 GA is finally available for production.
Angular 2 is a compoenent based frontend framework,and it is completely refactored from Angular 1. You can consider it as a new framework. For those whose have used AngularJS 1.x in projects,Angular team provides official Upgrade Guide from Angular 1.x.
To kickstart an Angular 2 project,Angular provides Angular CLI. Angular CLI is a command line tooling to create a new project skeleton and generate Angular 2 facilities thus speed up Angular2 development.
In order to get started with Angular 2,you could have to learn the basic knowledge of Typescript language and RxJS.
Install Angular CLI
I assume you have installed the latest NodeJS 7.x and the latest NPM 3.x or above.
Install Angular CLI in system globally via npm install command.
Note: Angular CLI 1.0.0-beta.28.3 or later,the package name(angular-cli) was renamed to @angular/cli.
npm i -g @angular/cli
When it is done,a new command named ng should be available in the system path. Under windows system,open a new terminal and verify it.
ng --version
You should see the output info similar the following.
>$ ng --version
_ _ _
__ _ _ __ __ _ _ _ | | __ _ _ __ ___ | |(_)
/ _` || '_ \ / _` || | | || | / _` || '__|_____ / __|| || |
| (_| || | | || (_| || |_| || || (_| || | |_____|| (__ | || |
\__,_||_| |_| \__,| \__,_||_| \__,_||_| \___||_||_|
|___/
@angular/cli: 1.0.0-beta.32.3
node: 7.5.0
os: win32 x64
@angular/common: 2.2.1
@angular/compiler: 2.2.1
@angular/compiler-cli: 2.2.1
@angular/core: 2.2.1
@angular/forms: 2.2.1
@angular/http: 2.2.1
@angular/platform-browser: 2.2.1
@angular/platform-browser-dynamic: 2.2.1
@angular/platform-server: 2.2.1
Create a new project
Create a new Angular2 project via ng new command.
ng new angular2-sample
Here angular2-sample is the project name,after it is done,there is a folder named angular2-sample will be created.
This command will try to perform the following tasks.
- Create a new folder and generate the project skeleton codes from Angular CLI internal template.
- Run
npm installin the background to download all dependencies for Angular CLI tooling and those declared in the package.json file for this project.
This progress will take some seconds or minutes. Please be patient and have a coffee break to wait for a while.
Alternatively,you can create a new folder(eg. angular2-sample),and enter this folder and use ng init to initialize the project skeleton files.
Enter the new project was just created.
cd angular2-sample
You will see the following structure in the project root folder.
karma and protractor is configuration files for unit tesing and end to end testing.
dist folder will contain the final build result.
node_modules includes the downloaded NPM dependencies defined in package.json and Angular CLI internally.
src holds the source codes of this project,all our development codes will be placed into this folder.
e2e includes the end to end testing codes for this project.
tslint is the Typescript grammar checking configuration.
You can run ng help to get all available commands and command options.
Run the project
Execute the following command to run this project.
ng serve
or
npm run start
NOTE: Under Windows system,if you see some errors in the terminal when run this command,try to switch to Administrator role and run again.
You will see info similar with the following in your terminal window.
Time: 56008ms
Asset Size Chunks Chunk Names
main.bundle.js 2.83 MB 0,2 [emitted] main
styles.bundle.js 10.2 kB 1,2 [emitted] styles
inline.js 5.53 kB 2 [emitted] inline
main.map 2.89 MB 0,2 [emitted] main
styles.map 14.1 kB 1,2 [emitted] styles
inline.map 5.59 kB 2 [emitted] inline
index.html 475 bytes [emitted]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 2.81 kB 0
webpack: bundle is now VALID.
By default the application will run on port 4200.
Open your browser and navigate http://localhost:4200.
Say Hello to Angular 2
Open src\app\app.component.ts file.
Add another property,it looks like:
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
greeting: string = '';
}
AppComponent is the entry component for this application. We will discuss it in details.
In the template file,add input field greeting.
<input type="text" [(ngModel)]="greeting">
<br/>
Hello,{{greeting}}
Save these files,the application should be reloaded if it is running. Try to type some text in the input Box,the text below this input Box will be updated automaticially.
Alternatively,Angular team provides some repositories to start an Angular 2 project quickly.
- The official quickstart is available for the official quickstart tutorial,and provides the essential resource of starting a new Angular 2 project.
- The official Angular2 seed provides the simplest project skeleton,and it supports webpack and systemjs.
In this post,we have learned how to create a new project via ng new command,and how to run this project via ng serve. In the next post,we will write some real codes.
