步骤 1:安装 Angular CLI
首先,确保你已经安装了 Node.js(包括 npm)。然后,在命令行中运行以下命令安装 Angular CLI:
npm install -g @angular/cli
步骤 2:创建一个新的 Angular 项目
使用 Angular CLI 创建一个新的 Angular 项目。在命令行中运行:
ng new my-angular-app
按照提示选择一些配置选项,这将创建一个新的 Angular 项目。
步骤 3:进入项目目录
进入新创建的项目目录:
cd my-angular-app
步骤 4:启动本地开发服务器
在项目目录下运行以下命令启动本地开发服务器:
ng serve
默认情况下,应用程序将在 http://localhost:4200/ 上运行。在浏览器中打开这个地址,你应该能够看到你的 Angular 应用程序。
步骤 5:编辑应用程序
使用你喜欢的文本编辑器打开项目,尝试编辑 src/app/app.component.ts 文件。你可以修改组件的内容,观察到这些变化实时反映在浏览器中。
步骤 6:创建新组件
使用 Angular CLI 创建一个新的组件。在命令行中运行:
ng generate component my-component
这将在项目中生成一个新的组件,并自动更新相关的文件。
步骤 7:使用组件
在 src/app/app.component.html 文件中使用新创建的组件。例如:
<h1>Welcome to my Angular App!</h1>
<app-my-component></app-my-component>
步骤 8:构建应用程序
在命令行中运行以下命令,以构建应用程序用于生产:
ng build --prod
这将生成一个 dist/ 目录,其中包含构建好的应用程序文件。
步骤 9:总结
这只是 Angular 的基础,你可以继续学习和探索更多的概念,如路由、服务、模块等。Angular 官方文档是一个很好的资源,可以帮助你更深入地了解 Angular 框架。
这个简单的教程希望能够帮助你建立起对 Angular 的基础认识。从这里开始,你可以尝试构建更复杂的应用程序,学习更多高级的 Angular 特性。
转载请注明出处:http://www.pingtaimeng.com/article/detail/5017/Angular