angular 10 教程,Angular 12
如何快速上手angular12？本文将介绍angular12，教你如何快速上手angular12。有需要的可以参考一下~
通过这篇文章，你能了解到以下几点：
angular环境配置开发工具配置CLI工程结构工程源文件结构工程创建
一、angular环境配置：
Node=NPM/CNPM=Angular CLI
安装node.js是一个软件包，它使用npm来管理项目依赖关系。由于网络原因，cnpm可以作为一个替代的包管理工具。使用angular CLI使我们能够忽略复杂的配置，更多地关注angular。安装完成后，在控制台中输入：npm install -g @angular/cli查看版本angular version。
二、开发工具配置：
vs code的建议扩展：
Chrome推荐扩展：Angular DevTools方便调试程序。Angular DevTools可以在Chrome在线应用商店找到。
三、CLI工程结构：
-我的项目
-.editor config//用于统一不同编辑器中的代码风格。
-.git Ignore//忽略git中的文件列表
- .README.md //Markdown格式指令文件
-. angular . JSON//angular的配置文件
-.browsers list RC//配置浏览器兼容文件
-. karma . conf . js//自动测试框架Karma的配置文件
- .package.json //NPM包定义文件
-.package-lock.json//depend在包版本上锁定文件
-. ts config . app . JSON//应用程序项目的TypeScript配置文件
-. ts config . spec . JSON//用于测试的TypeScript配置文件
-. ts config . JSON//整个工作区的TypeScript配置文件
-. ts config . spec . JSON//用于测试的TypeScript配置文件
- .tslint.json //TypeScript代码静态扫描配置
-. e2e//自动化集成测试项目
-.src//源代码目录
-. favicon . ico//收藏图标
-. index . html//收藏图标
-. main . ts//导入ts文件
-. poly fill . ts//用于加载不同浏览器的兼容版本。
-. style . css//整个项目的全局CSS
-. Test . ts//测试门户
-.app//项目源目录
-.资产//资源目录
-.环境//环境配置
-.环境.产品//生产环境
-. environments . ts//开发环境复制代码
四、工程源码文件结构
1.app目录：
app目录是要编写代码的目录。创建新项目时，默认情况下会生成命令行。
2.app目录中的app.component.ts：
该文件表示组件，组件是Angular应用程序的基本构建块，可以理解为一段带有业务逻辑和数据的html。
从“@angular/core”导入{ Component，}；
@组件({
选择器：“应用程序根目录”，
templateUrl:“”。/app.component.html ，
样式URL:[。/app.component.css]
})
导出类AppComponent {
}接下来，我们来分析app.component.ts文件中的每一段代码：
从“@angular/core”导入{ Component }；复制代码这段代码从Angular核心模块引入了组件装饰器。
@组件({
选择器：“应用程序根目录”，
templateUrl:“”。/app.component.html ，
样式URL:[。/app.component.css]
})这段代码用装饰器定义了一个组件及其元数据。所有组件都必须用这个装饰器进行注释，组件元数据Angular将呈现组件并通过其中的属性执行逻辑。
选择器是一个css选择器。这意味着可以通过app-root的HTML标签调用该组件。有一个app——root loading.index.html中的/app-root标记，用于显示组件的内容。TemplateUrl指定一个html文件作为组件的模板，并定义组件的布局和内容。这里定义了App.component.html，最后index.html的app-root/app-root的内容会显示app.component.html的内容。也就是说，templateUrl定义的页面定义了用户最终看到的页面的布局和内容。StyleUrls指定了一组css文件。您可以在这个css中编写用于这个组件模板的样式。即app.component.css和app.component.css导出类AppComponent {
title=你好砂砾；
}这个类其实就是这个组件的控制器，我们的业务逻辑就是写在这个类里的。
AppComponent是一个普通的typescript类，但是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，需要在这个类中添加一些元数据。Angular会把AppComponent当做一个组件
3.app文件中的app.module.ts：
这个文件代表一个模块。
从“@angular/core”导入{ ng module }；
从“@angular/platform-browser”导入{ browser module }；
从“”导入{ AppRoutingModule }。/app-routing . module ；
从“”导入{ AppComponent }。/app . component ；
从“”导入{ ScrollableTabComponent，ImageSliderComponent }。/components ；
@NgModule({
声明：[
AppComponent，
ScrollableTabComponent，
ImageSliderComponent
],
进口：[
浏览器模块，
逼近模块
],
提供商：[]，
引导：[AppComponent]
})
导出类AppModule {}Angular应用是模块化的，它有自己的模块化系统，叫做NgModule。每个Angular应用程序至少有一个NgModule类，它是根模块。在app.module.ts文件中，这个根模块可以启动您的应用程序。
声明(可声明对象表)3354属于这个NgModule的那些组件、指令和流水线。
Exports (export table) 3354可在其他模块的组件模板中使用的可声明对象的子集。
导入(导入表)3354导入其他模块。
供应商——依赖注射
Bootstrap ——设置根组件
五、项目创建、运行
ng new myProject //项目默认情况下会新建一个目录(project project)。
cd我的项目
Ng serve //将在开发环境中启动Http服务器复制代码参考：Angular官网
有关编程的更多信息，请访问：编程入门！以上就是angular12快速入门的方法。入门指南分享详情请关注我们其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。