Let's get started to setup our first angular 2 app.
Prerequisites:
- You should be familiar with basic npm commands like npm install, npm update, npm init
Angular 2 has added a rich set of functions with its command line interface to directly work with the project structure and project related stuff just like node to help make the application implementation very easy. It looks some more difficult at first to understand all commands and would become a new syntactic sugar for us to understand but it is making programmers' life very easy to implement the cutting edge application.
Angular 2 has chosen TypeScript (owned by Microsoft - https://www.typescriptlang.org/) as a language, which at compile/build time trans-piled to Javascript and get included in your page by angular-cli.
Angular2 CLI is still under beta testing and can be accessed/installed through node package manager.
Learn more about angular-cli at https://cli.angular.io/
Install the latest version of Node JS from here. http://nodejs.org
Make sure the node version must be above 6 as to work with angular command line interface related support is added after that.
Step by Step execute the following to get started with the first app.
- Open command prompt and execute,
npm install -g angular-cli - This will install angular command line interface globally on your machine to be used in any of the projects. This command line interface helps us to setup the angular project structure and it owns pretty good function and utilities to serve the resources to web server and manage the watch over resources.
- Next go to the path where you want to create project via command prompt.
- Execute
ng new <PROEJCT_NAME>where PROJECT_NAME mention project name, the same folder will be created. Let's say project name is my-app. You can after executing the command there is a folder named my-app has been generated and it contains a basic proejct structure and few files related to angular 2 demo project to get started. you can see few type script filed and few configuration files and the most import folder is src/app. - Execute
cd my-app - Execute ng serve to start the server to test the first generated application. it will check for all the components and compiles all the type script files to java script and bundle them together to generate 2-3 main java script files to be included in main index page. and it will also run the webpack utility after compilation is successful to watch for any file changes in project structure. Due to this, you need not to run ng serve each time and it will automatically compile the file changes and include them to dist folder after compilation. Angular CLI manages a separate folder dist for you compiled resources or we can say built resources.
- That's it with first app. Run http://localhost:4200 to run your app in browser. it will show app works! static text.
