Correct Posture for Creating Your First Angular App

Correct posture for creating your first Angular app Introduction:

As a set of open source project frameworks provided by Google, Angular's templates are powerful and rich. It is a relatively complete front-end framework, including services, templates, data two-way binding, template cation, routing, filters, and custom instructions. , dependency injection and all other functions, ng modularization boldly introduces some things of Java (dependency injection), which can easily write reusable code, which is very helpful for agile development teams.

Angular app.Front-end development is inseparable from Angular

Angular app.As a set of open source project framework provided by Google, Angular's templates are powerful and rich. It is a relatively complete front-end framework, including services, templates, data two-way binding, templateization, routing, filters, and custom instructions. , dependency injection and all other functions, ng modularization boldly introduces some things of Java (dependency injection), which can easily write reusable code, which is very helpful for agile development teams.

Angular app.At the same time, the core function of the tool is to extend the existing HTML code in an instruction mode, and enable the extended HTML code to construct dynamic content by using element declarations. Therefore, such an extension is of epoch-making significance, which is also an important reason why the Angular framework has attracted much attention since its birth.

Angular app.Before building the Angular framework, let's take a look at the features and advantages of this front-end framework. First, Angular will convert your templates into code, highly optimized for modern JavaScript virtual machines, and easily obtain the high productivity provided by the framework. With the help of the new component router, Angular can achieve fast loading, and the automatic code splitting mechanism allows users to load only the code used to render the requested page, improving speed and performance.

After understanding the features and performance, let's take a look at how to build the front-end framework in detail!

1. Angular app.Build a local development environment


•Node.js Angular requires an active LTS release or maintenance LTS release of Node.js. For specific version requirements, see engines in the package.json file. To learn how to install Node.js, see nodejs.org . If you're not sure what version of Node.js is running on your system, run node -v in a terminal window.

•npm package manager Angular, Angular CLI and Angular applications all rely on npm packages for many features and functionality. To download and install npm packages, you need an npm package manager. This guide uses the npm client command line interface, which is installed by default in Node.js. To check if you have the npm client installed, run npm -v in a terminal window.

•You can use the Angular CLI to create projects, generate application and library code, and perform various continuous development tasks such as testing, packaging, and deployment.
To install the CLI using the npm command, open a terminal/console window and enter the following command:
npm inatll -g _ @angula _

2. Angular app.Create a new workspace and an initial application


The Angular workspace is the context in which you develop your application. A workspace contains files required by one or more projects . Each project is a collection of files consisting of an application, library or end-to-end (e2e) test. In this tutorial, you will create a new workspace.
To create a new workspace and an initial application project, you need:

1.Make sure you are not in the Angular workspace folder now. For example, if you've created a "Get Started" workspace before, go back to its parent directory.
2.Run the CLI command ng new, use angular-tour-of-heroes for the space name, as follows:
ng new angular - tour - of - heroes
3.The ng new command prompts you for which properties to include in the initial application project, press Enter or Return to accept their defaults.
The Angular CLI installs the necessary Angular npm packages and other dependencies. This may take a few minutes.
It also creates the following workspace and initial project files:
•A new workspace whose root directory is named angular-tour-of-heroes.
•An initial skeleton application project, located in the src /app subdirectory.
•related configuration files.
The initial app project is a simple "welcome" app, ready to run.

3. Start the application server
Go to the workspace directory and start the application.
cd angular - tour - of - heroes
ng serve --open _
The ng serve command builds the application, starts the development server, listens to source files, and rebuilds the application when those files change.
The --open flag will open a browser to http://localhost:4200/.

You will find the application is running in the browser.

References: Angular official website

Angular app.One-click deployment of Angular on cloud platforms


As an Angular developer, the cloud development platform provides you with a one-stop, all-cloud development platform, allowing you to open a browser to complete development, debugging, and launch. At the same time, the bottom layer of the cloud development platform calls Alibaba Cloud Group Serverless The product can realize low-threshold development, deployment, debugging, reduce development costs, and allow Angular applications to be quickly deployed with one click!

1. Create an environment
To deploy Angular with one click, the following accounts and services are required:
•Github account ( https://github.com/ ),

•Alibaba Cloud account, and use the Alibaba Cloud account to log in to the cloud development platform ( https://workbench.aliyun.com/ ). To ensure the best user experience, please use the Chrome browser. Activate the OSS service.
•Users who have not activated Alibaba Cloud OSS can click the link ( https://workbench.aliyun.com/product/open?code=oss ) to activate the OSS service. OSS is free to activate, and there is a certain free quota. After the quota is exceeded, you will pay according to the amount.

2. Create an Angular application
•Create front-end applications. Open the quick start https://workbench.aliyun.com/app , find Angular and click the Create "Create Application" button.

•Cloud resource access authorization. If you have not used the cloud development platform before, the option of cloud resource authorization management will appear. Pull down until the words agree to the authorization appear. Click "Agree to Authorize" and the authorization is successful. Click to enter "Next".

•Bind Github account. After the authorization is completed, select the source repository as Github , follow the prompts to click to bind, bind the GitHub account , log in and click Authorize Aliyunworkben to allow the cloud development platform to build and publish your GitHub code as an accessible website.

•Choose a good "Angular" repository for forking. Select the code repository in the first step , the main branch , and click Next. Trunk branches generally refer to branches such as master or main of the code.

Fill in the basic information to complete the creation. Fill in the basic information and click "Finish". After success, enter the application details and deployment interface.

3. Deploy in daily environment
•One-click application deployment. On the application details page, click the "Deploy" button in the daily environment to perform one-click deployment. After the deployment status becomes green and deployed, you can click to visit the deployment website to view the effect.

•Visit the Angular website. The test domain name of the daily environment is also accessible. Click the button to access the deployed website and a pop-up will appear. Click the immediate access on the pop-up to access the deployed site. After the deployment is complete, you can continue local coding and push the code to the corresponding code repository in the "Basic Information" of the application.

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00