angular环境搭建:
- 安装node.js<node -v><npm -v>
- 安装angular:npm install -g @angular/cli<ng v>
- 创建项目:ng new angulardemo (安装依赖失败可以先cd到目录里,然后cnpm i(提前安装cnpm))
- 运行项目:ng serve --open
开发工具
vscode
在拓展商店安装angular提示
angular项目目录
- package.json项目配置文件,定义项目名称、版本,项目所需要的依赖,放在node_modules里
- README项目说明文件
- tsconfig:ts的配置文件
- src是代码编写的地方
app是各个ts、html、css
一个html+css+ts构成一个组件,module.ts是模块文件,
app.component
ts文件:
导入核心模块Component
@component中selector:'app-root'可以用html标签挂载组件
app.module.ts是根模块,告诉angular如何组装应用
BrowserModule浏览器解析模块
Ngmodule核心模块
AppModule创建的根组件
@NgModule装饰器
declarat:当前项目运行的组件(AppComponent)
imports:当前项目依赖的模块(BrowserModule)
provider:当前项目所需的服务
bootstrap:指定应用主视图(Appmodule)
- assets是静态资源(图片啥的)
- browserlist是支持的浏览器版本
- favicon是浏览器上面的图标
- 入口文件
index.html
main.ts
style.css全局样式
Angular cli
- 创建组件:ng g component components/popober
- 创建页面:ng g page details
- 在根模块中会自动导入并在declaration中配置