Front-end development using Angular in Beego

Beego is an MVC framework based on Go language, with excellent features such as high performance and high concurrency. Angular is a popular front-end development framework that provides powerful data binding, modularization, componentization and other features to help developers quickly build user interfaces and enhance user experience. Using Angular for front-end development in Beego can achieve front-end and back-end separation more efficiently and improve work efficiency. This article will introduce how to use Angular for front-end development in Beego from the following aspects.

1. Installing Angular CLI

First you need to install Angular CLI, which is Angular’s ​​official command line tool and can help us quickly generate code for projects, components, services, etc. You need to use npm to install Angular CLI, which can be installed through the following command:

npm install -g @angular/cli

After the installation is complete, you can create a new Angular project through the ng command.

2. Create Angular project

Create a folder in the Beego project as the root directory of the front-end project, and use the ng command to create a new Angular project in that directory. The specific command is as follows:

ng new frontend

This command will create an Angular project named "frontend" in the current directory. The directory structure of the project is as follows:

frontend/
  dist/
  e2e/
  node_modules/
  src/
    app/
    assets/
    environments/
    favicon.ico
    index.html
    main.ts
    styles.css
    test.ts
  .angular.json
  .editorconfig
  .gitignore
  .browserslistrc
  karma.conf.js
  package.json
  README.md
  tsconfig.app.json
  tsconfig.json
  tsconfig.spec.json
  tslint.json

Among them, the src directory contains our project source code, and the app directory is used to store components, services and other codes written by ourselves.

3. Configure the front-end development environment

Before starting development, we also need to configure the front-end development environment. First, you need to modify the outputPath configuration in the angular.json file and set the output directory to the folder under the public folder static in the Beego project. The specific method is as follows:

"outputPath": "../static",

In this way, the compiled front-end code can be directly output to the static folder of the Beego project for subsequent use.

You also need to configure cross-domain to allow the front end to request the Beego backend API. CORS middleware can be set up in Beego's routing to allow cross-domain requests from the front-end URL. The specific method is as follows:

import (
    "github.com/astaxie/beego/plugins/cors"
)

func init() {
    beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{
        AllowOrigins: []string{"http://localhost:4200"},
        AllowMethods: []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
        AllowHeaders: []string{"Origin", "Content-Type", "Authorization"},
        ExposeHeaders: []string{"Content-Length", "Access-Control-Allow-Origin"},
        AllowCredentials: true,
    }))
}

Here is an example of allowing cross-domain requests from the local address http://localhost:4200, which can be modified according to the actual situation.

4. Writing the front-end code

After the above work is completed, you can start writing the front-end code. You can create your own component in the src/app directory. For example, you can create a component named "users" to display the user list. The specific method is as follows:

ng generate component users

This command will generate a component named "users" in the src/app directory, including an HTML template file, a CSS style file, a TypeScript script file, etc.

In the HTML template file, you can write HTML code for displaying the user list. For example, you can use Angular's *ngFor directive to traverse all users:

<ul>
    <li *ngFor="let user of users">
        {{ user.name }}
    </li>
</ul>

In the TypeScript script file, you can write Code to load user list data. You can use Angular's HttpClient module to send requests to the backend API and obtain data, for example:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  users: any[];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('/api/users').subscribe(
      (data: any[]) => {
        this.users = data;
      }
    );
  }
}

This code will send a GET request to the "/api/users" interface in the Beego backend API when the component is initialized. , obtain the user list data, and save the data to the "users" attribute in the component.

5. Run the front-end code

After writing the front-end code, you can use the ng command to compile the front-end code and start the development server for debugging. The specific command is as follows:

ng build --watch

This command will generate compiled front-end code in the "frontend/dist" directory, monitor changes in the source code, and automatically recompile. You can start the development server in the root directory of the Beego project, enable the back-end API, and access http://localhost:4200 in the browser to access the front-end page.

6. Conclusion

This article introduces how to use Angular for front-end development in Beego, including installing Angular CLI, creating Angular projects, configuring the front-end development environment, writing front-end code and Steps such as running the front-end code. Angular is a powerful front-end development framework that can help us quickly build user interfaces and enhance user experience. Using Angular for front-end development in Beego can achieve front-end and back-end separation more efficiently and improve work efficiency.

The above is the detailed content of Front-end development using Angular in Beego. For more information, please follow other related articles on the PHP Chinese website!