From Zero to Wow: Building a Beginner-Friendly Angular GPT-Powered App

Section 1: Introduction ?️

What This Article is About

Welcome to the exciting journey of building your very first Angular application! This article is designed specifically for beginners who want to dive into the world of web development. Together, we’ll build a simple yet powerful chat application powered by OpenAI’s GPT API. Along the way, you’ll discover how Angular, a popular front-end framework, enables developers to create scalable, modern web applications.

Whether you’re entirely new to coding or just starting with Angular, this article will guide you every step of the way, ensuring no prior experience is required.

Why Angular?

Angular is one of the most versatile frameworks for building interactive and dynamic web applications. Here’s why we’ve chosen it for this project:

• Beginner-Friendly: Angular provides a structured and consistent development experience, making it an excellent choice for those just starting out.
• TypeScript Integration: It leverages TypeScript, a strongly typed superset of JavaScript, to enhance productivity and catch errors during development.
• Powerful Ecosystem: With features like built-in dependency injection, reusable components, and an active community, Angular equips you to build professional-grade applications.

What You’ll Achieve

By the end of this article, you will have:

1. A Fully Functional GPT-Powered App: A simple, interactive chat application where users can ask questions and receive responses from OpenAI’s GPT model.
2. Angular Knowledge: A foundational understanding of how Angular components, services, and configurations come together to create a web application.
3. API Integration Experience: Learn how to connect Angular applications to external APIs, like OpenAI’s GPT, through HTTP requests.

What Makes This Article Special

Unlike many tutorials, this guide not only walks you through creating an app but also provides clear explanations for every step, helping you grasp the underlying concepts of Angular. By the end, you’ll not only have a working app but also the confidence to build your own projects.

? Ready to start coding? In the next section, we’ll explore the basic tools and setup required to build this app.

? Full Code Repository: You can find the complete source code for this tutorial here.

Section 2: Getting Ready to Learn Angular: Becoming an Angular developer

Before you start building your Angular GPT-powered app, it’s important to prepare your environment and familiarize yourself with the tools and concepts you’ll be using. This section guides you step-by-step to ensure a smooth setup and learning experience.

What You Need to Learn First

To build an Angular app, there are a few foundational skills you need to acquire:

1. HTML and CSS

• What They Are:
  • HTML (HyperText Markup Language) defines the structure of your webpage.
  • CSS (Cascading Style Sheets) is used to style the content.
• Why They’re Important: Angular components rely on HTML templates and CSS styles to define their structure and appearance.
• Resources:
  • HTML and CSS for Beginners: Article
  • HTML Crash course: Video

2. TypeScript

• What It Is: TypeScript is a strongly typed superset of JavaScript, used by Angular to enhance code quality and maintainability.
• Why It’s Important: Angular uses TypeScript for features like type checking, interfaces, and decorators.
• Resource:
  • TypeScript Official Docs
  • Typescript Crash Course: Video

3. Node.js

• What It Is:
  Node.js is a JavaScript runtime that Angular uses to manage dependencies and run development tools.

• How to Install:

1. Download the installer for your OS from Node.js Official Website.
2. Follow the instructions to complete the installation.
3. Verify the installation:

   node -v
   npm -v

4. Git Basics

• What It Is: Git is a version control system that allows you to track changes and collaborate effectively.
• Key Steps:
  1. Install Git: Git Installation Guide.
  2. Initialize a repository:

   git init

• Resource:
  • Git Basics Guide

Setting Up Angular CLI

The Angular CLI (Command Line Interface) is a powerful tool that helps you scaffold and manage Angular projects effortlessly.

1. Install the Angular CLI globally using npm:

   npm install -g @angular/cli

1. Verify the installation:

   ng version

1. Resource:
   • Angular CLI Documentation

Getting Your OpenAI API Key

You’ll need an API key to connect your Angular app to OpenAI’s GPT API.

1. Create an OpenAI Account:
   • Sign up at OpenAI.
2. Generate Your API Key:
   • Navigate to the API Keys section.
   • Click Create New Key and copy the generated key.

⚠️ Important: Keep your API key private to avoid unauthorized access.

Familiarizing Yourself with Angular

Take time to understand Angular’s structure and ecosystem. Here are some helpful resources:

1. Official Tutorials:
   • The Angular team provides beginner-friendly guides to help you get started.
   • Angular Tutorials
2. Angular Documentation:
   • Use the official documentation as a reference throughout your journey.
   • Angular Documentation
3. Communities to Join:
   • Angular Reddit
   • Stack Overflow - Angular Questions
   • Angular Discord Community: Engage with developers to ask questions and share knowledge.

? You’re Ready!

With the environment set up and foundational knowledge in place, you’re prepared to start planning your GPT-powered app.

Next up: Section 3: Planning the GPT-Powered Chat App.

Section 3: Planning the GPT-Powered Chat App

Before diving into coding, it’s essential to have a clear plan. In this section, you’ll understand the app’s purpose, the technologies involved, and how the app will function.

Overview of the App

The goal is to build a GPT-powered chat interface that allows users to send a prompt and receive responses from OpenAI’s GPT API. The app will focus on simplicity and usability while introducing key Angular concepts.

Key Features:

• A user-friendly chat interface.
• Integration with OpenAI’s GPT API to handle prompts and generate responses.
• A responsive design for better usability.

Technologies You’ll Use

To bring this app to life, you’ll rely on the following technologies:

1. Angular:

   • Angular serves as the frontend framework for building a dynamic and scalable user interface.
   • You’ll leverage Angular features such as components, services, and dependency injection.

2. OpenAI’s GPT API:

   • The GPT API will power the chatbot’s responses.
   • You’ll use the Chat Completions API to send and receive user prompts.

How the App Works

Here’s a step-by-step breakdown of how your app will function:

1. User Input:
   • The user types a prompt into the chat input field.
2. API Request:
   • The input is sent to OpenAI’s GPT API using Angular’s HTTP client service.
3. Response Handling:
   • The GPT API generates a response based on the prompt and sends it back.
4. Display Response:
   • The response is displayed in the chat interface for the user to see.

Preparing for Development

API Key Reminder:

Before you proceed, ensure you have:

1. Registered for an OpenAI account.
2. Generated and securely saved your API key. You’ll need it to configure the GPT service in your app.

? Next Steps: Now that you have a plan, it’s time to set up your Angular project in Section 4: Setting Up the Angular Project.

Fantastic! Ready to move forward with Section 4: Setting Up the Angular Project. Let’s get it done! ??️

Section 4: Setting Up the Angular Project

With your environment ready and a clear plan in place, it’s time to create the foundation of your GPT-powered Angular app. In this section, you’ll set up the Angular project, explore its structure, and ensure everything runs correctly.

Install Angular CLI

If you haven’t already installed the Angular CLI, here’s a quick recap:

1. Open your terminal and run the following command to install the CLI globally:

   node -v
   npm -v

1. Verify the installation:

   git init

Create and Explore Your Project

1. Generate a New Project:
   • Use the Angular CLI to scaffold a new project:

   npm install -g @angular/cli

1. Navigate to Your Project Directory:
   • Once the project is created, move into the project folder:

   ng version

Project Structure Overview

Angular generates a default project structure. Here are the key folders and files:

• src/app:
  • The main folder where your app’s code lives.
  • You’ll create components, services, and modules here.
• angular.json:
  • The configuration file for your Angular app.
• package.json:
  • Lists all dependencies and scripts for your project.
• node_modules:
  • Contains all installed dependencies for the app.

Understanding this structure will help you navigate your project as you develop.

First Run: Test Your Setup

1. Start the Angular development server:

   node -v
   npm -v

1. Open your browser and navigate to:

   git init

1. You should see the default Angular app running. If the page loads successfully, your setup is complete!

? Next Steps: With the foundation in place, it’s time to start building the core features of your GPT-powered chat app in Section 5: Building the Chat App.

Section 5: Building the GPT Powered Angular Chat App

Now that your Angular project is set up, it’s time to build the core feature: the GPT-powered chat app. In this section, you’ll create a chat component, implement the GPT service, and connect them together for a fully functional experience.

Create the Chat Component

Angular components are the building blocks of your application. Follow these steps to create a standalone chat component:

1. Generate the Component:
   • Use the Angular CLI to generate a standalone chat component:

   npm install -g @angular/cli

1. What Happens:
   • This command creates the following files in src/app/components/chat/:
     • chat.component.ts (logic and structure)
     • chat.component.html (HTML template)
     • chat.component.css (styles)

Update the Chat Component Template

To create the chat interface, update chat.component.html:

   ng version

Explanation:

1. Dependency Injection: The GptService is injected into the component through the constructor.
2. Two-Way Binding: The userInput variable is bound to the for seamless input handling.</li> <li> <strong>API Integration</strong>: The sendPrompt() function calls the GPT service, handles responses, and updates the response variable.</li> </ol> <h2> Create the GPT Service </h2> <p>Services in Angular manage data and logic that can be reused across components. Follow these steps to create and configure the GPT service:</p> <ol> <li> <strong>Generate the Service</strong>: <ul> <li>Run the following command: </li> </ul> </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> npm install -g @angular/cli </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <ol> <li> <strong>Update the GPT Service Logic</strong>: <ul> <li>Open src/app/services/gpt.service.ts and update it as follows: </li> </ul> </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> ng version </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <p><strong>Explanation</strong>:</p> <ol> <li> <strong>HttpClient</strong>: Used to send HTTP requests to OpenAI’s GPT API.</li> <li> <strong>generateResponse()</strong>: Sends the user prompt to the API and returns an observable with the response.</li> <li> <strong>API Key</strong>: Replace 'your-api-key-here' with your actual OpenAI API key.</li> </ol> <h2> Style the Chat Component </h2> <p>Add basic styling to chat.component.css:<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> node -v npm -v </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <p><strong>Explanation</strong>:</p> <ul> <li>The chat-container centers the chat interface.</li> <li>The textarea and button styles ensure usability and aesthetics.</li> </ul> <h2> Securing Your API Key with Environment Variables </h2> <p>Hardcoding sensitive data like API keys in your service files is risky. A better approach is to use <strong>environment variables</strong> to keep your keys secure. This section will guide you on how to set up and use environment files in your Angular project.</p> <h3> Step 1: Create Environment Files </h3> <ol> <li>Navigate to the src/ directory in your project.</li> <li>Create a new folder named environments if it doesn’t already exist.</li> <li>Inside the environments/ folder, create two files: <ul> <li> environment.ts: For development settings.</li> <li> environment.prod.ts: For production settings.</li> </ul> </li> </ol> <h3> Step 2: Add Your API Key </h3> <ol> <li>Open the environment.ts file and define your API key: </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> git init </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <ol> <li>Open the environment.prod.ts file and add the same key for production: </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> npm install -g @angular/cli </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <hr> <h3> Step 3: Update the GPT Service </h3> <p>Modify the gpt.service.ts file to use the environment variable instead of a hardcoded API key:<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> ng version </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <hr> <h3> Step 4: Prevent Sensitive Data from Being Committed </h3> <ol> <li>Open the .gitignore file in your project’s root directory.</li> <li>Add the following line to ignore your environment files: </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> npm install -g @angular/cli </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <p>This ensures your API keys and sensitive data won’t be included in version control.</p> <hr> <h3> Step 5: Share Environment Setup Instructions </h3> <p>When working on a team or sharing the project, provide clear instructions (like this section) on how to create and configure environment files. Avoid sharing actual API keys.</p> <hr> <p>? <strong>Why Use Environment Variables?</strong><br><br> This approach keeps your sensitive information secure while allowing different configurations for development and production environments. It’s a best practice for modern web development.</p> <p>? <strong>Next Steps</strong>: Now that the chat component and GPT service are ready, you’ll integrate the component into your app in <strong>Section 6: Testing Your Application</strong>.</p> <h2> Section 6: Testing Your Application </h2> <p>Now that your GPT-powered chat app is built, it’s time to test it and ensure everything works as expected. This section will guide you through running your app locally, testing its features, and troubleshooting common issues.</p> <h2> Run the App Locally </h2> <ol> <li>Start the development server: </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> node -v npm -v </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <ol> <li>Open your browser and navigate to: </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> git init </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <ol> <li> <strong>What You Should See</strong>:</li> </ol> <p><img src="https://img.php.cn/upload/article/000/000/000/173791657235976.png" alt="Image description" loading="lazy" style="max-width:90%" style="max-width:90%"></p> <ul> <li>The default Angular app should load with your custom GPT-powered chat component at the center.</li> <li>If you can interact with the chat interface and get responses from the API, congratulations! Your app is working.</li> </ul> <h2> Interact with the Chat Interface </h2> <ol> <li>Enter a message or question into the chat input field.</li> <li>Click the <strong>Send</strong> button.</li> <li>Wait for the GPT API to respond. The reply should display in the response area below the input.</li> </ol> <p><img src="https://img.php.cn/upload/article/000/000/000/173791657346022.png" alt="Image description" loading="lazy" style="max-width:90%" style="max-width:90%"></p> <h2> Troubleshooting Tips </h2> <p>If something isn’t working as expected, use the following checklist to debug your app:</p> <h3> Common Issues and Solutions </h3> <ol> <li> <strong>The Page Doesn't Load</strong>: <ul> <li>Check the terminal output for errors when running ng serve.</li> <li>Ensure all dependencies are installed: </li> </ul> </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> npm install -g @angular/cli </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <ol> <li> <p><strong>No Response from GPT API</strong>:</p> <ul> <li>Verify your API key in the environment.ts file.</li> <li>Check for typos in your GPT service URL (https://api.openai.com/v1/chat/completions).</li> <li>Ensure you’ve included the necessary headers (Authorization and Content-Type).</li> </ul> </li> <li> <p><strong>CORS Issues</strong>:</p> <ul> <li>Ensure your browser isn’t blocking API requests due to Cross-Origin Resource Sharing (CORS).</li> <li>If needed, use a browser extension or configure your backend to allow CORS.</li> </ul> </li> <li> <p><strong>Error in the Console</strong>:</p> <ul> <li>Look for error messages in the browser developer console.</li> <li>If the error relates to the API, double-check your service configuration.</li> </ul> </li> <li> <p><strong>Styling Issues</strong>:</p> <ul> <li>Ensure the styles in chat.component.css are applied correctly.</li> <li>Use browser developer tools to inspect the DOM and debug CSS.</li> </ul> </li> </ol> <p>? <strong>Pro Tip</strong>: Regularly check the terminal and browser console for any warnings or errors. These often provide useful hints for troubleshooting.</p> <p>? <strong>Next Steps</strong>: Once your app is tested and functional, you can enhance it further in <strong>Section 7: Taking the Next Steps</strong>.</p> <h2> Section 7: Taking the Next Steps </h2> <p>Congratulations! You’ve successfully built and tested a GPT-powered chat app using Angular. Now, let’s explore Angular-specific enhancements and techniques to elevate your app and expand your skillset.</p> <h2> Enhancing Your App </h2> <ol> <li> <p><strong>Loading Indicators</strong>:</p> <ul> <li>Improve user experience by adding a loading spinner or message while waiting for a response.</li> <li>Use Angular’s *ngIf directive to display a spinner conditionally during HTTP calls.</li> </ul> </li> <li> <p><strong>Styling with Angular Material</strong>:</p> <ul> <li>Enhance your app’s appearance with Angular Material components.</li> <li>Install Angular Material: </li> </ul> </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> node -v npm -v </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <ul> <li>Add prebuilt components like buttons, input fields, and dialog boxes for a polished look.</li> <li>?️ <strong>Resource</strong>: Angular Material Documentation.</li> </ul> <ol> <li> <strong>Form Validation</strong>: <ul> <li>Implement validation for user inputs to ensure prompts meet criteria (e.g., non-empty, character limits).</li> <li>Use Angular’s FormBuilder and reactive forms to manage form state and validation logic. </li> </ul> </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> git init </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <ol> <li> <p><strong>Reusability with Shared Components</strong>:</p> <ul> <li>Extract reusable UI elements, such as buttons or input fields, into shared components.</li> <li>Use these components across multiple parts of your app to maintain consistency.</li> </ul> </li> <li> <p><strong>Routing</strong>:</p> <ul> <li>Add multiple pages to your app, such as a settings page for customization or a help page for user guidance.</li> <li>Use Angular Router to set up and navigate between these pages.</li> <li>?️ <strong>Resource</strong>: Angular Routing Guide.</li> </ul> </li> <li> <p><strong>State Management</strong>:</p> <ul> <li>Manage app-wide state, such as chat history or user preferences, using Angular services or state management libraries like NgRx.</li> <li>?️ <strong>Resource</strong>: Introduction to NgRx.</li> </ul> </li> </ol> <h2> Connecting to Other Endpoints </h2> <p>Learning how to work with APIs is a crucial skill in Angular development. Practice by integrating additional endpoints into your app:</p> <ol> <li> <p><strong>REST API Integration</strong>:</p> <ul> <li>Experiment with connecting to public APIs, such as weather or news APIs.</li> <li>Use Angular’s HttpClient to fetch data and display it dynamically in your app.</li> <li>?️ <strong>Resource</strong>: Angular HTTPClient Guide.</li> </ul> </li> <li> <p><strong>CRUD Operations</strong>:</p> <ul> <li>Build a simple feature to Create, Read, Update, and Delete data using a RESTful API.</li> <li>Practice building forms for input, lists for data display, and edit/delete functionality.</li> </ul> </li> <li> <p><strong>Error Handling</strong>:</p> <ul> <li>Learn to handle API errors gracefully using Angular’s catchError operator in rxjs.</li> <li>Display user-friendly error messages for better usability.</li> </ul> </li> </ol> <h2> Share Your Work </h2> <ol> <li> <p><strong>Deploy Your App</strong>:</p> <ul> <li>Host your app using platforms like Firebase, Vercel, or Netlify.</li> <li>?️ <strong>Resource</strong>: Angular Deployment Guide.</li> </ul> </li> <li> <p><strong>Collaborate with Others</strong>:</p> <ul> <li>Share your code on GitHub and invite feedback or contributions from the Angular community.</li> <li>Include a README file with setup instructions and a project overview.</li> </ul> </li> </ol> <p>? <strong>Next Steps</strong>:<br> Keep refining your app, experimenting with Angular’s features, and building more projects to deepen your understanding. Angular offers powerful tools to build dynamic and scalable web applications—mastering them is your next milestone!</p> <h2> Section 8: Conclusion </h2> <p>You’ve come a long way! From setting up your development environment to building and testing your GPT-powered chat app, you’ve successfully taken your first steps into Angular development. Along the way, you’ve learned critical skills like creating components, managing services, and integrating APIs.</p> <h2> What You’ve Accomplished </h2> <ul> <li> <strong>Built a Functional Angular App</strong>: You created a GPT-powered chat interface using Angular's powerful framework and tools.</li> <li> <strong>Learned Angular Fundamentals</strong>: From components to dependency injection, you’ve explored Angular’s core features.</li> <li> <strong>Connected to External APIs</strong>: You integrated a third-party API and handled HTTP requests and responses effectively.</li> <li> <strong>Followed Best Practices</strong>: By using environment variables and secure development techniques, you’ve adopted professional coding standards.</li> </ul> <h2> Call to Action </h2> <p>Your journey into Angular development has only just begun. Here’s how you can keep progressing:</p> <ol> <li> <p><strong>Practice Regularly</strong>:</p> <ul> <li>Build more projects to solidify your understanding of Angular concepts.</li> <li>Experiment with features like routing, state management, and animations.</li> </ul> </li> <li> <p><strong>Explore Advanced Angular Topics</strong>:</p> <ul> <li>Learn about lazy loading, optimizing performance, and testing Angular applications.</li> <li>?️ <strong>Resource</strong>: <ul> <li> Angular Advanced Topics.</li> <li>Angular & AI</li> </ul> </li> </ul> </li> <li> <p><strong>Join the Community</strong>:</p> <ul> <li>Engage with other Angular developers for inspiration and support.</li> <li>Contribute to open-source Angular projects to sharpen your skills.</li> </ul> </li> <li> <p><strong>Stay Updated</strong>:</p> <ul> <li>Angular is a constantly evolving framework. Follow the official Angular blog and community channels to stay informed about new features and best practices.</li> </ul> </li> </ol> <h2> Encouragement </h2> <p>Starting something new can be daunting, but remember: <strong>every expert was once a beginner.</strong> The effort you’ve put into learning Angular will pay off as you continue to build and grow. With the resources and knowledge you now have, you’re well-equipped to tackle more ambitious projects.</p> <p>? <strong>Keep Building</strong>: The world of web development is vast and full of opportunities. Angular is just the beginning—dive deeper, experiment, and make your ideas come to life. Please feel free to ask questions if any or make contributions, you are highly welcomed!</p> <blockquote> <p>? <strong>Explore the Code</strong>: The full source code for this project is available on GitHub. Feel free to clone, modify, or contribute to the project!</p> </blockquote> <p>The above is the detailed content of From Zero to Wow: Building a Beginner-Friendly Angular GPT-Powered App. For more information, please follow other related articles on the PHP Chinese website!</p> </div> </div> <div style="display: flex;"> <!-- <div style="display: inline-flex;float: right; color:#333333;">source：dev.to</div> --> </div> <div class="wzconOtherwz"> <a href="https://www.php.cn/faq/1796761348.html" title="Buy Verified PayPal Accounts"> <span>Previous article：Buy Verified PayPal Accounts</span> </a> <a href="https://www.php.cn/faq/1796761352.html" title="Buy Verified Square Accounts"> <span>Next article：Buy Verified Square Accounts</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">Statement of this Website</div> <div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzconZzwz"> <div class="wzconZzwztitle">Latest Articles by Author</div> <ul> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Latest Issues</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/wenda/176411.html" target="_blank" title="function_exists() cannot determine the custom function" class="wdcdcTitle">function_exists() cannot determine the custom function</a> <a href="https://www.php.cn/wenda/176411.html" class="wdcdcCons">Function test () {return true;} if (function_exists ('test')) {echo "test is function...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-29 11:01:01</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>3</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2679</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/wenda/176410.html" target="_blank" title="How to display the mobile version of Google Chrome" class="wdcdcTitle">How to display the mobile version of Google Chrome</a> <a href="https://www.php.cn/wenda/176410.html" class="wdcdcCons">Hello teacher, how can I change Google Chrome into a mobile version?</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-23 00:22:19</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>11</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2812</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/wenda/176407.html" target="_blank" title="The child window operates the parent window, but the output does not respond." class="wdcdcTitle">The child window operates the parent window, but the output does not respond.</a> <a href="https://www.php.cn/wenda/176407.html" class="wdcdcCons">The first two sentences are executable, but the last sentence cannot be implemented.</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-19 15:37:47</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2373</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/wenda/176406.html" target="_blank" title="There is no output in the parent window" class="wdcdcTitle">There is no output in the parent window</a> <a href="https://www.php.cn/wenda/176406.html" class="wdcdcCons">document.onclick = function(){ window.opener.document.write('I am the output of the child ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-18 23:52:34</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2234</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/wenda/176405.html" target="_blank" title="Where is the courseware about CSS mind mapping?" class="wdcdcTitle">Where is the courseware about CSS mind mapping?</a> <a href="https://www.php.cn/wenda/176405.html" class="wdcdcCons">Courseware</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-16 10:10:18</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>0</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2336</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>Related Topics</div> <a href="https://www.php.cn/faq/zt" target="_blank">More> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/gbdjrjg"><img src="https://img.php.cn/upload/subject/202407/22/2024072213225240138.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Dogecoin price today" /> </a> <a target="_blank" href="https://www.php.cn/faq/gbdjrjg" class="title-a-spanl" title="Dogecoin price today"><span>Dogecoin price today</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/dropdelete"><img src="https://img.php.cn/upload/subject/202407/22/2024072213324188756.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The difference between drop and delete" /> </a> <a target="_blank" href="https://www.php.cn/faq/dropdelete" class="title-a-spanl" title="The difference between drop and delete"><span>The difference between drop and delete</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/rhckjvmncsyqk"><img src="https://img.php.cn/upload/subject/202407/22/2024072213280859266.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to check jvm memory usage" /> </a> <a target="_blank" href="https://www.php.cn/faq/rhckjvmncsyqk" class="title-a-spanl" title="How to check jvm memory usage"><span>How to check jvm memory usage</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/smsbqfh"><img src="https://img.php.cn/upload/subject/202407/22/2024072212082960350.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What is the copyright symbol" /> </a> <a target="_blank" href="https://www.php.cn/faq/smsbqfh" class="title-a-spanl" title="What is the copyright symbol"><span>What is the copyright symbol</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/vivoxybshxysq"><img src="https://img.php.cn/upload/subject/202407/22/2024072212232826541.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The difference between vivox100s and x100" /> </a> <a target="_blank" href="https://www.php.cn/faq/vivoxybshxysq" class="title-a-spanl" title="The difference between vivox100s and x100"><span>The difference between vivox100s and x100</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/exceldbllsj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214295968820.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Compare the similarities and differences between two columns of data in excel" /> </a> <a target="_blank" href="https://www.php.cn/faq/exceldbllsj" class="title-a-spanl" title="Compare the similarities and differences between two columns of data in excel"><span>Compare the similarities and differences between two columns of data in excel</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/javascriptyja"><img src="https://img.php.cn/upload/subject/202407/22/2024072212164715352.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Introduction to the difference between javascript and java" /> </a> <a target="_blank" href="https://www.php.cn/faq/javascriptyja" class="title-a-spanl" title="Introduction to the difference between javascript and java"><span>Introduction to the difference between javascript and java</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/dnywdllqdbkwy"><img src="https://img.php.cn/upload/subject/202407/22/2024072214282764498.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The computer has Internet access but the browser cannot open the web page" /> </a> <a target="_blank" href="https://www.php.cn/faq/dnywdllqdbkwy" class="title-a-spanl" title="The computer has Internet access but the browser cannot open the web page"><span>The computer has Internet access but the browser cannot open the web page</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzrOne"> <div class="wzroTitle">Popular Recommendations</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="what does js mean" href="https://www.php.cn/faq/482163.html">what does js mean</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to convert string to array in js?" href="https://www.php.cn/faq/461802.html">How to convert string to array in js?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to refresh the page using javascript" href="https://www.php.cn/faq/473330.html">How to refresh the page using javascript</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to delete an item in js array" href="https://www.php.cn/faq/475790.html">How to delete an item in js array</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to use sqrt function" href="https://www.php.cn/faq/415276.html">How to use sqrt function</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>Popular Tutorials</div> <a target="_blank" href="https://www.php.cn/course.html">More> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Related Tutorials <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Popular Recommendations<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Latest courses<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="https://www.php.cn/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="https://www.php.cn/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a> <div class="wzrthreerb"> <div>1431833 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/74.html" title="PHP introductory tutorial one: Learn PHP in one week" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP introductory tutorial one: Learn PHP in one week"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP introductory tutorial one: Learn PHP in one week" href="https://www.php.cn/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a> <div class="wzrthreerb"> <div>4286257 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA Beginner's Video Tutorial" href="https://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div>2614551 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="https://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div>513261 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/2.html" title="PHP zero-based introductory tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP zero-based introductory tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP zero-based introductory tutorial" href="https://www.php.cn/course/2.html">PHP zero-based introductory tutorial</a> <div class="wzrthreerb"> <div>872151 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="https://www.php.cn/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a> <div class="wzrthreerb"> <div >1431833 times of learning</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA Beginner's Video Tutorial" href="https://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div >2614551 times of learning</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="https://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div >513261 times of learning</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/901.html" title="Quick introduction to web front-end development" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Quick introduction to web front-end development"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Quick introduction to web front-end development" href="https://www.php.cn/course/901.html">Quick introduction to web front-end development</a> <div class="wzrthreerb"> <div >216631 times of learning</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/234.html" title="Master PS video tutorials from scratch" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Master PS video tutorials from scratch"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Master PS video tutorials from scratch" href="https://www.php.cn/course/234.html">Master PS video tutorials from scratch</a> <div class="wzrthreerb"> <div >909880 times of learning</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/course/1648.html" title="[Web front-end] Node.js quick start" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Node.js quick start"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web front-end] Node.js quick start" href="https://www.php.cn/course/1648.html">[Web front-end] Node.js quick start</a> <div class="wzrthreerb"> <div >8853 times of learning</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/1647.html" title="Complete collection of foreign web development full-stack courses" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Complete collection of foreign web development full-stack courses"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Complete collection of foreign web development full-stack courses" href="https://www.php.cn/course/1647.html">Complete collection of foreign web development full-stack courses</a> <div class="wzrthreerb"> <div >7053 times of learning</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/1646.html" title="Go language practical GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go language practical GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go language practical GraphQL" href="https://www.php.cn/course/1646.html">Go language practical GraphQL</a> <div class="wzrthreerb"> <div >5998 times of learning</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/1645.html" title="550W fan master learns JavaScript from scratch step by step" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W fan master learns JavaScript from scratch step by step"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W fan master learns JavaScript from scratch step by step" href="https://www.php.cn/course/1645.html">550W fan master learns JavaScript from scratch step by step</a> <div class="wzrthreerb"> <div >782 times of learning</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/1644.html" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" href="https://www.php.cn/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a> <div class="wzrthreerb"> <div >30040 times of learning</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>Latest Downloads</div> <a href="https://www.php.cn/xiazai">More> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">Web Effects <div></div></div> <div class="swiper-slide" data-id="twof">Website Source Code<div></div></div> <div class="swiper-slide" data-id="threef">Website Materials<div></div></div> <div class="swiper-slide" data-id="fourf">Front End Template<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery enterprise message form contact code" href="https://www.php.cn/toolset/js-special-effects/8071">[form button] jQuery enterprise message form contact code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 music box playback effects" href="https://www.php.cn/toolset/js-special-effects/8070">[Player special effects] HTML5 MP3 music box playback effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 cool particle animation navigation menu special effects" href="https://www.php.cn/toolset/js-special-effects/8069">[Menu navigation] HTML5 cool particle animation navigation menu special effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery visual form drag and drop editing code" href="https://www.php.cn/toolset/js-special-effects/8068">[form button] jQuery visual form drag and drop editing code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS imitation Kugou music player code" href="https://www.php.cn/toolset/js-special-effects/8067">[Player special effects] VUE.JS imitation Kugou music player code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Classic html5 pushing box game" href="https://www.php.cn/toolset/js-special-effects/8066">[html5 special effects] Classic html5 pushing box game</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery scrolling to add or reduce image effects" href="https://www.php.cn/toolset/js-special-effects/8065">[Picture special effects] jQuery scrolling to add or reduce image effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 personal album cover hover zoom effect" href="https://www.php.cn/toolset/js-special-effects/8064">[Photo album effects] CSS3 personal album cover hover zoom effect</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8328" title="Home Decor Cleaning and Repair Service Company Website Template" target="_blank">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8327" title="Fresh color personal resume guide page template" target="_blank">[Front-end template] Fresh color personal resume guide page template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8326" title="Designer Creative Job Resume Web Template" target="_blank">[Front-end template] Designer Creative Job Resume Web Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8325" title="Modern engineering construction company website template" target="_blank">[Front-end template] Modern engineering construction company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8324" title="Responsive HTML5 template for educational service institutions" target="_blank">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8323" title="Online e-book store mall website template" target="_blank">[Front-end template] Online e-book store mall website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8322" title="IT technology solves Internet company website template" target="_blank">[Front-end template] IT technology solves Internet company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8321" title="Purple style foreign exchange trading service website template" target="_blank">[Front-end template] Purple style foreign exchange trading service website template</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3078" target="_blank" title="Cute summer elements vector material (EPS PNG)">[PNG material] Cute summer elements vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3077" target="_blank" title="Four red 2023 graduation badges vector material (AI EPS PNG)">[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3076" target="_blank" title="Singing bird and cart filled with flowers design spring banner vector material (AI EPS)">[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3075" target="_blank" title="Golden graduation cap vector material (EPS PNG)">[PNG material] Golden graduation cap vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3074" target="_blank" title="Black and white style mountain icon vector material (EPS PNG)">[PNG material] Black and white style mountain icon vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3073" target="_blank" title="Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses">[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3072" target="_blank" title="Flat style Arbor Day banner vector material (AI+EPS)">[banner picture] Flat style Arbor Day banner vector material (AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3071" target="_blank" title="Nine comic-style exploding chat bubbles vector material (EPS+PNG)">[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8328" target="_blank" title="Home Decor Cleaning and Repair Service Company Website Template">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8327" target="_blank" title="Fresh color personal resume guide page template">[Front-end template] Fresh color personal resume guide page template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8326" target="_blank" title="Designer Creative Job Resume Web Template">[Front-end template] Designer Creative Job Resume Web Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8325" target="_blank" title="Modern engineering construction company website template">[Front-end template] Modern engineering construction company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8324" target="_blank" title="Responsive HTML5 template for educational service institutions">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8323" target="_blank" title="Online e-book store mall website template">[Front-end template] Online e-book store mall website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8322" target="_blank" title="IT technology solves Internet company website template">[Front-end template] IT technology solves Internet company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8321" target="_blank" title="Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Public welfare online PHP training，Help PHP learners grow quickly！</p> </div> <div class="footermid"> <a href="https://www.php.cn/about/us.html">About us</a> <a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a> <a href="https://www.php.cn/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1738915172"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <!-- Matomo --> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> </body> </html>