如何快速搭建Angular项目

好的工具能帮你省去繁琐的环境配置时间,让你专注于开发的细节。所以这里我推荐使用Angular-cli,相比于vue-cli,搭建更加简单快捷。

Angular CLI是一个命令行界面工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。

本文主要讲解的是如何搭建并运行一个简单的Angular(4.x)应用。

设置开发环境

开始前请先确定安装了Node和npm。

请先在命令行窗口中运行命令 node -v 和 npm -v, 确保你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。更老的版本可能会出现错误。

然后全局安装Angular CLI

1
npm install -g @angular/cli

创建新项目

接下来会新建一个文件夹,在合适的磁盘下右键单击,打开命令窗口,运行下列命令来生成一个初始化的新项目。

1
ng new my-app

完成上面两步说明一个简单的应用基本搭建完成了,是不是so easy,接下来启动服务器浏览你的应用。

启动服务器

进入项目目录,启动web服务器。

1
2
cd my-app
ng serve --open

ng serve命令不仅会启动服务器,还能监听本地文件的变化,当你修改这些文件时,应用会被重新构建,并自动刷新浏览器。
使用--open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/

请注意

  • 第三方库放在assets目录下,angular应用要引用时,请在项目根目录找到angualr-cli.json,如下,在styles里添加样式文件,scripts里添加脚本,地址是相对于localhost:4200根目录的路径,也就是src/。引用图片资源时地址要这样写:/assets/images/**.jpg

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    "apps": [
    {
    ...
    "styles": [
    "styles.css"
    ],
    "scripts": [assets/venors/velocity.min.js]
    },
    ...
    ]
  • 如果不想每次启动服务器都输入--open参数,可以修改package.json:

    1
    2
    3
    4
    5
    {
    "scripts": {
    "start": "ng serve --open"
    }
    }

✧(≖‿≖)✧ 谢谢您的支持 (●'◡'●)ノ♥
0%