SoFunction
Updated on 2025-04-12

AngularJS environment construction process for beginners

What is AngularJS?

AngularJS is an open source web application framework. It was originally developed by MISKO Hevery and Adam Abrons in 2009. Now maintained by Google

AngularJScharacteristic

AngularJS is a powerful JavaScript-based development framework for creating Rich Internet Applications (RIA).

AngulajJS provides developers with the option (using JavaScript) in a clean MVC (model-view-controller) way to write client applications.

All applications written by AngularJS are cross-browser compatible. AngularJS uses JavaScript code to automatically process it to adapt to each browser.

AngularJS is open source, completely free, and developed and maintained by thousands of developers around the world. It is released under the Apache License Version 2.0 license.

Overall, AngularJS is a framework for building large-scale, high-performance web applications while making them easy to maintain.

1. Here we briefly introduce the characteristics of Angular-cli:

Angular-cli can quickly build frameworks, create modules, services, classes, directives, etc.;

It has the function of webpack, which can implement code separation, load on demand, etc.;

Automatically configure the development environment, testing environment, and production environment, which can realize packaging and compression of code and hot deployment, and can also implement module testing and end-to-end testing.

Angular-cli can automatically recognize sass and less precompilation through suffixes;

Angular-cli can configure TypeScript when creating, and can also make some personalized configurations;

Engineering structures created with Angular-cli are best practices that can be used in production environments;

2. Install nodejs

AngularJS needs to use Nodejs, so we need to install nodejs first, and nodejs needs to use nodejs. The download address of nodejs is:/en/download/

3. Install npm and cnpm

The next step is to install npm.

NPM is a package management tool installed with NodeJS. It can solve many problems in NodeJS code deployment. There are several common usage scenarios:

Allows users to download third-party packages written by others from the NPM server for local use.

Allows users to download and install command-line programs written by others from the NPM server for local use.

Allows users to upload packages or command-line programs they write to an NPM server for others to use.

At this point, the nodejs and npm installation has been completed, but there will be some problems if you install it with npm in the Great Heaven, so we use cnpm to install it, and cnpm is also a package of npm.

Install cnpm and execute commands

npm i -g cnpm

After executing this command, wait for completion, and then enter cnpm version to see if the installation is completed. I have installed it here, so I can go in.

After the installation of cnpm is completed, we start installing Angular-cli.

Execute the command

cnpm i -g angular-cli

Then you can execute the ng version command to see if the installation is completed and the angular-cli version

After the installation is completed, we can use the ng command and start creating the project below.

4. Project creation

After installing angular-cli, you can create the project directly and execute the command

ng new JustForTest

Where JustForTest is the project name

Execute this command to create many files, and you need to wait for a while. This step will be waiting for a long time. You need to wait until the installation of nod_.modules is completed.

Start directly using ng serve.

This way you can start the project directly. We type:http://localhost:4200You can directly access:

5. Importing the project

If you are looking for a project online, how can we start it locally? Let's do the following:

We recommend you to take a look at this tutorial by Teacher Damo: Angular 2.0 video tutorial is here

Here we demonstrate a project using Damo Teacher: NiceFish. First of all, we need to clone the project through git. I won’t demonstrate this here. This is the project address of NiceFish:/mumu-osc/NiceFish

After the project is clone, the command line enters the directory where the project is located.

Execute the command

cnpm i -g @angular/cli

Let me explain here that we installed global angular-cli before.

Wait for the command to be executed, and then execute the command

cnpm install

Then execute the command

ng serve -prod -aot

Then wait for the compilation to complete.

Once we are done, we can enter:

http://localhost:4200Visit the project.

Summarize

The above is the environment construction process for beginner AngularJS introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!