angular4笔记系列之搭建环境

最新推荐文章于 2025-08-04 19:14:12 发布

weixin_34306593

最新推荐文章于 2025-08-04 19:14:12 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript 测试 ViewUI

原文链接：https://segmentfault.com/a/1190000012548899

本文介绍如何使用Angular CLI快速搭建Angular项目环境，包括安装TypeScript、Angular CLI及创建新项目等步骤，并介绍了如何配置项目以使用Sass样式，还涵盖了如何引入第三方UI库、JS库以及Angular Material等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

快速搭建环境

npm install -g typescript        //安装TypeScript
npm install -g @angular/cli
ng --version                     //检测是否安装成功
ng new my-app                    //生成一个新项目以及应用的骨架代码
cd my-app
npm i
ng serve --open                  //使用--open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/

快速搭建sass项目

npm install -g @angular/cli
ng new sass-project --style=scss / --style=sass

npm install node-sass --save-dev
npm install sass-loader --save-dev  //安装sass依赖和loader

//修改.angular-cli.json文件
"styles": [
    "styles.scss"
],
"defaults":{
    "styleExt": "scss",
    "component": {}
}

//命令行
//If you are changing your existing style in your project
ng set defaults.styleExt scss

angular-cli.json配置

Angular CLI的配置文件。在这个文件中，我们可以设置一系列默认值，还可以配置项目编译时要包含的那些文件。

引入第三方 UI 库

{
  "apps": {
     "styles": [
         "styles.css",
         "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ]
  }
}

引入第三方 js 库

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../test.ts"
]

引入angular material

安装

npm install --save @angular/material @angular/cdk

npm install --save @angular/animations //某些组件需要用到，不是必须
npm install --save hammerjs            //某些组件需要用到，不是必须

引入CSS样式

//styles.css
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';             //引用主题样式

引入MaterialModule

import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

ng 命令

ng generate class my-class: 新建 class // ng g cl my-class
ng generate component my-component: 新建组件 // ng g c my-component
ng generate directive my-directive: 新建指令 // ng g d my-directive
ng generate enum my-enum: 新建枚举 // ng g e my-enum
ng generate module my-module: 新建模块 // ng g m my-module
ng generate pipe my-pipe: 新建管道 // ng g p my-pipe
ng generate service my-service: 新建服务 // ng g s my-service
ng generate interface my-interface: 新建服务 // ng g i my-interface

可用选项

--spec: boolean, 默认为 false, 表示是否生成单元测试相关的 spec 文件

ng g c my-component --spec