Angular基础 环境搭建和目录分析

angular环境搭建：

1. 安装node.js<node -v><npm -v>
2. 安装angular：npm install -g @angular/cli<ng v>
3. 创建项目：ng new angulardemo （安装依赖失败可以先cd到目录里，然后cnpm i(提前安装cnpm)）
4. 运行项目：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中配置