Introduction to Angular
Angular is an open source front-end framework for building web applications. It is developed and maintained by the Google team and has powerful features and extensive community support.
Angular is based on TypeScript, which is an object-oriented programming language and a superset of JavaScript. TypeScript provides static type checking, modularization, and other advanced features that help improve development efficiency and code quality.
Using Angular, developers can build responsive, high-performance web applications. It adopts a series of design patterns and best practices and provides a modular architecture to make the development process simpler and maintainable.
Install Angular
Our first task is to install the Angular command line tool called ng. We can do this using the npm tool we installed earlier.
npm install -g @angular/cli
It only needs to be installed once, but can be regularly upgraded to the latest version.
Next, we need to create a separate working environment for each Angular application. This process creates a development environment and creates a basic application that we can modify to create our own designs. We need to create a new environment for each application.
We do this using the command line ng utility, which runs the code and generates several components of the application. This will also create a simple Angular HTTP server for us and some interesting development tools. We don't need to explicitly compile the TypeScript code because the development environment automatically initiates this process. You'll see how this works when you write some example code. Please make sure you are using the latest version of Node.js as the Angular environment depends on it.
So, to start developing a new application, go to your workspace on your computer and start a command shell. Depending on how your computer is configured, you may need to start a privileged shell, but try using a normal shell first. We use the following command to start a new application:
ng new myapp
This will create a new directory called "myapp" in the current location and install the development environment and a base application that we can modify to create our own unique application. Every time you create a new application, you need to change the directory name to something else.
If the above command requires you to provide more information for your application (which may be the case), then accept the defaults. As of this writing, there are no issues, but there may have been issues in previous versions.
The next step is to see what the basic application provided looks like. We can do this by going to the application's directory and running the server using two commands:
cd myapp
ng serve --open
The –open option will open a new window in the default browser to run the application. If you want to use a different browser or another window on your browser, the application will appear at the following URL:
localhost:4200
Note that this is not the default HTTP port, 4200 was chosen to provide a port number that would not conflict with other programs on your computer. If you want to enter the URL manually, you can omit the --open option.
The Angular server also performs some interesting operations besides displaying the application. When you change any source file, it automatically recompiles all source code and restarts the application. This is very useful when we develop and debug applications. As you'll see later, any syntax errors will appear in the command line window.
The best way to understand this is to start a new application.
Create a new application called "hello". This will require you to change the directory in the above command to "hello" instead of "myapp", i.e.:
ng new hello
cd hello
ng serve --open
You will see many server messages in the command window. The command prompt will not reappear unless an error occurs while starting the server. You will see a new window in your default browser with the application running inside it. All of this is automatic! You don't need to enter any additional commands as you did in the previous tutorial session. After closing the browser window and/or command window, simply type this command again to restart the development environment.
Angular application file structure
The following is an example file structure for an Angular application:
myapp/
e2e/
… 一些系统文件
node_modules/
… 很多东西 …
src/
app/
app.component.css
app.component.html
app.component.ts
app.module.ts
main.ts
index.html
styles.css
tsconfig.json
package.json
Angular applications are entirely contained in the src/ folder. The app/ folder contains the Angular code for the application, as shown below. Note that older Angular applications were structured differently, with the myapp/ and src/ folders collapsed into the same directory. The app/ folder always contains the TypeScript source code of our application, and we will edit and create files in this directory.
- app.component.ts - defines the components (see next section) and describes how the application is displayed in the browser.
- app.module.ts - defines the module, which contains an instance of the component. It contains the "pipeline" of the application, how all the components are connected together.
- main.ts - This is the main (first executed) JavaScript code that starts the Angular runtime and displays the main components. Normally this is automatically generated and we don't change it.
The node_modules/ directory contains various Angular support scripts that will be loaded on request. In production builds, these files may be loaded from mirror sites. There's a lot of code here for running the web server and supporting Angular code during the development phase.
The index.html file is usually the main display HTML. Here is an example of an Angular index file:
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"> </script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"> </script>
<script src="systemjs.config.js"></script>
<script> System.import('app').catch(function(err){ console.error(err); } ); </script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
The HTML in this file should look familiar to you. What's important is:
- There are many loaded scripts that are Angular support scripts for various browsers. Appropriate script inclusion tags are inserted into this file by the Angular system when we run in development mode or generate code for deployment on a real web server.
- The final <script> tag loads the application's JavaScript (compiled from TypeScript).
- In the body, we have an <app-root> tag. This is the display area of the application, dynamically populated in the DOM by Angular runtime code.
The styles.css file contains the style definitions used by Angular in the application. You can also introduce styles into your Angular code. The styles here are the base styles that will be applied to all applications.
The remaining files are Angular and TypeScript configuration files. Initially, we do not need to edit these files, we will use the default contents.
As you can see, even a basic application is quite complex. The good news is that when developing our application, we usually only need to edit the TypeScript files in the app/ folder. For the rest of this module, that's the only place we'll be coding.