创建第一个Angular项目

W_法 4月前 ⋅ 378 阅读

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

         这里以Angular中文官网Guide为base,展开第一个Angular项目的创建。Ref:

https://angular.cn/guide/quickstart

1. Angular CLI安装

1.1依赖安装

         Angular CLI工具以来Node.js和npm,在安装Angular CLI前,还需确保已安装合适版本的node和npm。

         在终端/控制台窗口中运行命令 node -v npm -v, 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能会出现错误。

1.2 安装Angular CLI

         使用npm在线安装Angular CLI。执行命令如下:

         npm install –g @angular/cli

        苦等半小时后,提示安装失败。

         提示权限不足。重新执行安装命令。       

         再次苦等半小时,进度条停住不动,很尴尬!

        猜测是由于GFW墙掉了Angular CLI的一些资源。从网上找了镜像,尝试使用这个镜像完成Angular CLI的安装。参考:https://blog.csdn.net/yuzhiqiang_1993/article/details/70858829

        npm install -g cnpm –registry=https://registry.npm.taobao.org

         安装结果如下:

         (1)清除已有版本。在安装新版本angular前,确保已有版本均被卸载,执行如下命令:

         // uninstall old version angular-cli
         npm uninstall -g angular-cli
         npm uninstall –save-dev angular-cli
         // uninstall new version angular-cli
         npm uninstall -g @angular/cli

        (2)清除缓存。为消除缓存的影响,还需清除缓存。        

         npm cache clean --force

          对应执行情况如下: 

       (3)执行安装命令。使用如下命令实现安装: 

        cnpm install -g @angular/cli@latest

        安装情况如下:

        (4)检测安装结果。安装完成之后可以使用ng -v/v/version命令来查看安装结果。显示如下图:  

2. 创建新项目

         在命令行窗口执行创建新项目命令:

        ng new application-name

         注意,在创建第一个Angular时,由于需要安装一些npm包,所以其花费时间略长。

3. 启动开发服务器         

         进入项目目录,并启动服务器。对应命令如下:

        cd my-app-helloworld1
        ng serve --open

        其中,ng serve 命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。使用 --open(或 -o)参数可以自动打开浏览器并访问 http://localhost:4200/ 。      

        第一个Angular项目启动效果如下: 

4. 在VS Code 编辑器中启动Angular项目

         VS Code 提供了终端控制器入口。使用命令行方式创建好Angular项目后,执行code . 命令即可使用VS Code打开Angular项目。

        cd my-app-helloworld1
        code .

        在VS Code的“集成终端”(快捷键是ctrl + `)里执行上述命令,即可加载所建Angular项目的顶层文件夹及子文件夹和文件。参考:

http://baijiahao.baidu.com/s?id=1587298888443548427&wfr=spider&for=pc        

5 编辑Angular项目

       使用VS Code 打开这个新建的Angular项目后,接下来就可使用编辑器实现简单的编码。打开 ./src/app/app.component.ts 文件,并将title 属性从 'app' 改为 'Hello World'。

       export class AppComponent {
              title = 'Hello World';
        }

       然后修改./src/app/app.component.html 文件,移除不必要字符。

       执行保存操作(Ctrl + s后,浏览器会自动刷新,并具有修改之后的标题。


注意:本文归作者所有,未经作者允许,不得转载

全部评论: 0

    我有话说: