Angular4 开发环境搭建

时间:2022-02-21 11:03:13

Angular4 开发环境搭建

安装:

  • Nodejs
  • Angular CLI
  • 自己喜欢的编译器

angular-cli安装命令:
npm install -g angular-cli
新版:npm install -g @angular/cli
设置淘宝镜像:npm config set registry “https://registry.npm.taobao.org/
安装完成使用 ng -v 查看结果
Angular4 开发环境搭建


创建HelloWorld程序

  1. 使用 ng new HelloWorld 命令创建项目,生成目录结构如下:
    Angular4 开发环境搭建
    目录结构解释:
    e2e : 端对端测试目录,主要用于自动化测试
    node_modules : 第三方依赖包目录
    src : 项目源代码目录
    .angular-cli.json : Angular命令行工具配置文件,可以修改它引入第三方的包,如jquery,bootstrap
    .editorconfig : 编辑器配置文件
    .gittgnore : git配置文件
    karma.conf.js : karma是单元测试的执行器,karma.conf.js是karma的配置文件
    package.json : npm工具配置文件,列出该应用使用的依赖包
    protractor.conf.js : 自动化测试配置文件
    REAADME.md : 说明文件
    tsconfig.json : 指定ts编译的一些参数信息
    tslint.json : tslint的配置文件,定义TypeScript代码质量检测规则
    src目录结构:
    Angular4 开发环境搭建
    app : 包含应用的组件和模块,我们要写的代码都在这个目录
    assets : 资源目录,主要存放静态资源,如图片
    environment : 环境配置。Angular是支持多环境开发的,我们可以在不同的环境下(开发环境,测试环境,生产环境)共用一套代码
    favicon.ico : 网站标题栏图标
    index.html:应用的根页面,程序启动访问页面
    main.ts:应用的入口,Angular通过此文件启动应用
    polyfills.ts:导入一些库使Angular能在老版本运行
    styles.css:全局的css样式
    tsconfig.app.json:TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件

2.修改 app.components.ts 如下:
Angular4 开发环境搭建

3.使用命令 ng serve 启动应用
Angular4 开发环境搭建

4.浏览器打开地址 localhost:4200 查看结果
Angular4 开发环境搭建
成功!


写完了喝杯可乐!