Master AngularJS: Build Dynamic Web Applications

Dive into the world of AngularJS and learn how to create interactive and responsive web applications. Discover core concepts, directives, data binding, and best practices to build robust and scalable front-end solutions.

Create an Angular 2 Application

Here, you will learn to create an Angular 2 (also valid in Angular 11) application using Angular CLI.

Angular CLI helps set up a workspace and an initial application quickly, including necessary NPM libraries and other dependencies.

Generating a New Angular Application

To create an initial application, navigate to the folder where you want to create the application and execute the ng new <project name> command in the terminal/command window.

The following command creates a new Angular application named MyFirstApp in the AngularProjects folder:

D:\AngularProjects> ng new MyFirstApp

The ng new command prompts you for information about features to include in the initial app project. You can accept the defaults by pressing Enter, as shown below.

Opening the Project in VS Code

The above command may take 2-3 minutes to create a project and install necessary libraries. To open this project in VS Code, navigate to the project folder in the terminal/command window and type code .:

D:\AngularProjects\MyFirstApp> code .

Your new project in VS Code will look like this:

The left pane in VS Code shows the files and folders created by Angular CLI. Learn about the Angular project folder structure here.

Running the Angular Application

To run an Angular application in the browser, you first need to build it.

You can build and run applications either using Angular CLI commands or NPM commands. You can use the terminal/command window to execute these commands. If you are using VS Code, you can execute commands from its terminal.

Use the Angular CLI command ng serve -o to build the application. The -o option opens it automatically in the default browser.

Use the NPM command npm start to build the application. Internally, it uses the ng serve command. Open a browser and navigate to http://localhost:4200 to see the application home page. This is the default URL for an Angular application created using Angular CLI.

Open the terminal in VS Code from the menu: Terminal -> New Terminal, type ng serve -o, and press Enter:

The ng serve command builds the app, starts the development server, watches the source files, and rebuilds the app as you make changes. It will open your Angular application in the default browser.

The ng serve command keeps watching the source files, so if you make any changes in any file of the project, it will rebuild it and refresh the browser automatically to reflect the changes.

To stop the automatic build process, press Ctrl + C in the terminal of VS Code.

Thus, you can create a workspace and an initial Angular project and run it using VS Code.