如何在我的Angular项目中使用Node.js?

huangapple go评论58阅读模式
英文:

how can i use nodejs with my angular project?

问题

我不知道从哪里开始,要把后端文件,比如server.js文件,放在我的Angular项目中,如何实现服务器和我的Angular前端的实时重新加载?有什么最佳实践吗?这只是一个空的Angular项目。

我只是想在Angular中从我的后端进行一些使用硬编码数据的GET请求。

英文:

I dont even know where to start, where to put backend files like server.js file in my angular project, how can i live reload both the server and my angular frontend? What are the best practices for this? It just an empty angular project.

I just want to make some get requests in angular from my backend with hardcoded data.

答案1

得分: 0

以下是翻译好的部分:

1- 首先,您应该创建您的后端项目。我假设您已经安装了Node.js。

2- 通过输入以下命令安装Nodemon:'npm install -g nodemon'。这是一个工具,可以通过在检测到目录中的文件更改时自动重新启动Node.js应用程序来帮助开发基于Node.js的应用程序。

3- 首先打开您的后端文件夹,打开命令行,然后输入'npm init -y'。这个命令通过运行前面的命令来初始化一个新的Node.js项目。

4- 运行以下命令安装Express:'npm i express'。通过使用Express,您可以更快速地创建具有较少代码和开销的服务器端应用程序和API。

5- 创建一个名为index.js的文件并打开它。这是一个Express服务器的示例:

const express = require('express');
const app = express();

const books = [
  { title: 'Book 1', author: 'Author 1' },
  { title: 'Book 2', author: 'Author 2' },
  { title: 'Book 3', author: 'Author 3' }
];

app.get('/', (req, res) => {
  return res.send('Hello, World!');
});

app.get('/books', (req, res) => {
  return res.status(200).send({'data': books})
});

const port = 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

6- 打开您的package.json文件,然后添加这些行:

"scripts": {
  "start": "node index.js",
  "dev": "nodemon index.js"
},

7- 保持终端打开,然后转到浏览器并输入http://localhost:3000/books,您将看到书籍列表。

8- 创建前端文件夹,打开终端,然后输入'npm init -y'以初始化项目(我假设您已安装了Angular CLI)。

9- 输入以下命令'ng new my-angular-app'以生成一个Angular项目,并保留所有默认设置。

10- 通过在my-angular-app目录中运行以下命令创建一个新的Angular服务:ng generate service book。

11- 打开src/app/book.service.ts文件并使用以下代码更新它:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class BookService {
  private apiUrl = 'http://localhost:3000/books';

  constructor(private http: HttpClient) {}

  getBooks(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl);
  }
}

12- 打开src/app/app.component.ts文件并使用以下代码更新它:

books: any[];

constructor(private bookService: BookService) {}

ngOnInit() {
  this.bookService.getBooks().subscribe(books => {
    this.books = books;
  });
}

最后,使用以下命令运行Angular开发服务器:ng serve

打开浏览器,让魔法发生。

希望这个小教程对您有所帮助。我建议您学习如何将代码拆分成小块,并阅读一些关于项目结构、错误处理、连接到外部数据库、中间件等基本概念的文章(后端部分)。

在前端部分,您需要:

  • 通过构建小型项目来练习,逐渐增加复杂性,并应用不同的Angular功能,如组件生命周期、服务、路由和表单。
  • 通过加入论坛、参加网络研讨会和阅读文章/博客来参与Angular社区,以了解最佳实践、模式和新兴趋势。

我知道这是一个很长的评论,希望它能激励您。不要害怕提问,因为这是学习的好方法。愉快的编码!

英文:

First you should create your backend projet. I assume you have already installed node js.

0- Install nodemon by typing &#39;npm install -g nodemon&#39;. It is a tool that helps develop Node.js based applications by automatically restarting the node application when file changes in the directory are detected.
1- First open your backend folder, open the cmd and then type &#39;npm init -y&#39;. This command initialize a new Node.js project by running the previous command.
2- Install Express by running the following command: &#39;npm i express&#39;. 
By using Express, you can quickly create server-side applications and APIs with less code and overhead
3- Create a file called index.js and open it.
This is an example of express server 

const express = require(&#39;express&#39;);
const app = express();

const books = [
  { title: &#39;Book 1&#39;, author: &#39;Author 1&#39; },
  { title: &#39;Book 2&#39;, author: &#39;Author 2&#39; },
  { title: &#39;Book 3&#39;, author: &#39;Author 3&#39; }
];

app.get(&#39;/&#39;, (req, res) =&gt; {
  return res.send(&#39;Hello, World!&#39;);
});

app.get(&#39;/books&#39;, (req, res) =&gt; {
  return res.status(200).send({&#39;data&#39;: books})
});

const port = 3000;
app.listen(port, () =&gt; {
  console.log(`Server is running on port ${port}`);
});

4- Open your package.json file and then add these lines:
&quot;scripts&quot;: {
  &quot;start&quot;: &quot;node index.js&quot;,
  &quot;dev&quot;: &quot;nodemon index.js&quot;
},

5- Leave the terminal open then go to your browser and type http://localhost:3000/books et voila. You will see the list of books.

6- Create the frontend folder, open the terminal and  type &#39;npm init -y&#39; to initialize the project. (I assumed that you&#39;ve installed angular CLI).

7- Type this command &#39;ng new my-angular-app&#39; to generate an angular project and leave everything as default.

8- Create a new Angular service by running the following command in my-angular-app directory: ng generate service book

9- Open the src/app/book.service.ts file and update it with the following code:

import { Injectable } from &#39;@angular/core&#39;;
import { HttpClient } from &#39;@angular/common/http&#39;;
import { Observable } from &#39;rxjs&#39;;

@Injectable({
  providedIn: &#39;root&#39;
})
export class BookService {
  private apiUrl = &#39;http://localhost:3000/books&#39;;

  constructor(private http: HttpClient) {}

  getBooks(): Observable&lt;any[]&gt; {
    return this.http.get&lt;any[]&gt;(this.apiUrl);
  }
}

10- Open the src/app/app.component.ts file and update it with the following code:
and add this snippet

 books: any[];

  constructor(private bookService: BookService) {}

  ngOnInit() {
    this.bookService.getBooks().subscribe(books =&gt; {
      this.books = books;
    });
  }

Here, we inject the BookService into the AppComponent and call the getBooks() method in the ngOnInit() lifecycle hook to retrieve the list of books and assign it to the books property.

11- Finally, run the Angular development server using the following command:
ng serve

12- Open the browser and let the magic work.

I hope this little tutorial might help you. My recommendation is to learn how to split your code into small chunks and read some articles about what the project structure could be. Learn basic concepts such as error handling, connecting to external databases, middleware, and more (Backend).

In frontend part you have to : 
- Practice by building small projects, gradually increasing complexity, and applying different Angular features like components life cycle, services, routing, and forms.
- Engage with the Angular community by joining forums, attending webinars, and reading articles/blogs to stay updated on best practices, patterns, and emerging trends.

I know this is a long comment and i hope it motivates you. Don&#39;t be afraid to ask questions because it is a good way to learn. Happy coding.

</details>



huangapple
  • 本文由 发表于 2023年7月6日 22:38:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76629986.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定