angular logo

Getting started with AngularJS

AngularJS is a single framework for Mobile and Desktop web application development. Angular applications are made of components. A component is a combination of HTML template and JavaScript/TypeScirpt class.

Angular.io

The most recent version of Angular is 4.0, this version onwards angular team suggests not to use version number while referring the framework.

Now Angular 2.0, Angular 3.0 and Angular 4.0 all are just Angular, since the recent versions are backward compatible.

Getting Started

The best way to start learning Angular is using Angular CLI. Below are the steps to install Angular CLI to create and run the Angular application.

  • Install Node.js and npm if they are not already installed on your machine here.
  • Run the below command to install Angular CLI globally.
npm install -g @angular/cli
  • Now create a new project “testapp” by running the below command. This will take some time as all the node modules are loaded.
ng new testapp
  • Switch to the new directory testapp. Run the application using below command. This will open a new browser window.
ng serve --open

Now if you see the text “app works!” at http://localhost:4200 in your browser window then your application is running.

TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. When you create a new Angular application with Angular CLI it will create your project with TypeScript files.

TypeScript files have a file extension .ts, it cannot run by itself in the browser since it is not a language. All TypeScript files are converted to pure JavaScript when you build and run your application in the browser.

Why TypeScript? The answer is simply having types to JavaScript variables for static type checking and refactoring. This helps in verifying your code. Types are optional.

You can combine JavaScript and TypeScript in the same Angular project. allowJs is the compiler option newly available in TypeScript 1.8. The TypeScript compiler runs a sanity check on .js files for syntax errors and makes them available when this flag is enabled.