What is Angular 4 ?
- AngularJS came on 2010 and Angular 2 came on mid 2016 with complete rewritten of framework in Typescript.
- Angular 4 is a version match not a upgrade to Angular 2.
- Angular 4 is just called Angular.
Create Angular 4 Project :
Setup :
1) node and npm should be installed. (https://nodejs.org/en/)
- If you already installed node and wants to update please check the following link. (Its for Mac)
http://www.fullstacktechnos.com/2017/09/how-to-update-nodejs-in-mac.html
$ node -v
v6.11.3
$ npm install -g @angular/cli
...
$ ng -v
….
@angular/cli: 1.4.4
node: 6.11.3
os: darwin x64
Use angular CLI to create a new hello-world project
$ ng new hellow-world
installing ng
create .editorconfig
…..
……
create tslint.json
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Successfully initialized git.
Project 'hellow-world' successfully created.
Install Visual Studio Code : (https://code.visualstudio.com/)
Open the editor and type Shift + Command + P (from Mac)
Search for 'Path', and Install
Go inside the project folder and type "code ."
It will open the project folder in VS Code editor or you can open the project folder directly from editor.
Project folder structure will look like the below.

Serve the Angular Code
hellow-world $ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Date: 2017-09-07T15:35:06.229Z
Hash: c2e3ddcf0d5dd2646b8f
Time: 8944ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 8.44 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 209 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.27 MB [initial] [rendered]
webpack: Compiled successfully.

Entry Point:
main.ts -> platformBrowserDynamic().bootstrapModule(AppModule);
Minor Modification :
- Go to app.component.ts and change,
export class AppComponent {
title = 'My first Angular app';
}
- Check the command prompt :
web pack which is integrated build tool with angular cli compiled and created few bundle.js files and browser being refreshed automatically with the new content.
Note:
Before you start writing code for your angular project, please get a basic understanding of typescript. If you are already familiar ignore the following article.
http://www.fullstacktechnos.com/2017/09/typescript-fundamentals.html
No comments:
Post a Comment