使用angular cli初始化一个新项目 NG

shuke 2018-9-25 1525

新项目搭建

ng new命令新建项目

首先到工作目录底下,然后使用ng new命令初始化一个新项目:

ng new newProject // 后面跟的是项目名称1

命令执行结果如下:
image

这个命令会自动帮我们生成所需要的一些基本文件,注意上图,在create完成一些命令之后,它还会自动调用npm install命令,使用npm把对应的依赖包下载下来。这个时候请使用ctrl+C,进行中断,因为我们不需要使用使用npm自动安装,我们会稍后自己使用cnpm安装对应的依赖包(npm速度慢,而且有被墙的风险)。

命令执行完成之后,生成的项目目录结构如下:
这里写图片描述
由图可知,这个命令会生成项目对应的目录结构,以及一些所需要的文件。
从图中我们可以看到package.json这样一个文件,对于每一个nodejs项目来说,它都必须有一个package.json配置文件。
这个文件中定义了有项目的名称,version,license之类的信息。最重要的是,在这个文件中声明了项目所需要依赖的所有的包dependencies、devDependencies。
在我们使用npm install命令安装依赖包时,node会自动读取package.json文件,然后获取到所有的依赖包列表并一一安装。

文件列表中还有一个.angular-cli.json文件,这个文件是angular/cli会自动去读取的。

cnpm install 命令安装依赖包

在项目新建完成之后,我们需要安装所需要的依赖包,进入到项目目录下,使用cnpm install命令,这样node会自动去读取项目中的package.json文件,然后根据文件中配置的这些依赖包,然后一一会进行下载,如图所示:
image

图中可以看到几个警告,第一个说的是karma-cli@\^1.0.1这个依赖包用v8.2.1的版本不适配,需要低一些的版本。然后后面的是karma@1.7.1>ckokidar@1.7.0>fsevents@\^1.0.0这些歌依赖包需要darwin操作系统,windows的操作系统无法匹配的问题。

所以好像前面有谁说最新的node版本在angular/cli会有点问题,不知道说的是不是这个,所以这个时期,还是先安装6.x的版本好了。

安装完了之后,我们可以看到项目目录多出了一个node_modules目录(如下图),node默认是把所有的依赖包都安装到了这个文件夹下,所以如果依赖包安装过程中发生了什么错误,或者我新添加了什么依赖包需要重新安装依赖包的情况下,我们需要先把项目底下的node_modules文件夹删除,然后重新运行cnpm install命令。
image

ng serve 开启服务

项目新建完成,依赖包下载完成。之后就可以跑起项目了,我们需要使用ng serve的命令开启一个轻量级的开发状态的httpserver。
我们在做前端开发的时候,不要启动后台,只要开启一个前端就好了。
image
从上面图中,我们可以看到只需要打开浏览器访问http://localhost:4200即可。
image

最后,在浏览器中看到上图所示的界面,就相当于我们已经用angular/cli建立好了一个新项目。

在Chrome浏览器的调试工具中发现网络请求里面,中vendor.bundle***啥的,某个文件特别大,俺么我们就可以重启服务,使用production模式,即使用命令ng serve --prod,这样就会减小文件大小。
但是使用这个命令,我们会发现下面的错误:
这里写图片描述

这个错误发生的原因其实是由于angular/cli的最新版本有bug吧,所以我们不要用最新的版本,将下图中angular/cli的对应版本改为1.2.6(这个版本是没有问题的)。随后需要扫除node_modules文件夹,然后重新运行cnpm install命令
这里写图片描述

在依赖包重新安装之后,我们再设置ng serve --prod,就会有效减小请求中文件的大小:
image

至此,使用@angular/cli初始化一个新项目已经完成。

工具搭建的新项目剖析

新搭建的项目中,有自动生成的应用根页面模板,应用根组件,应用根模块:
这里写图片描述

css修改使用scss

将所有的css后缀文件,修改为scss,然后其余各个文件中对原来css的引用也都改成scss。这样项目就会使用scss进行编译。

添加依赖包

我们需要使用其他依赖包的,就直接到package.json中添加对应的依赖包,然后通过cnpm install安装即可。比我,我们要引用bootstrap还有font-awesome依赖包的时候,就需要在package.json配置文件的dependencies节点下添加上对应的依赖信息:"bootstrap": "^3.3.7","font-awesome": "^4.7.0"
随后在styles.scss文件中,使用import语句,@import "~bootstrap/dist/css/bootstrap.min.css";@import "~font-awesome/css/font-awesome.min.css";就能将bootstrap和font-swesome中的css样式导入过来了。路劲中的~表示,路径查找时,不要查询项目路径,直接到node_modules目录下面去找。因为bootstrap是我们使用cnpm install的依赖包,所以当然在node_modules文件夹下。

新建组件Component

在终端中使用组件创建命令

> ng generate c UserList   // c表示component,命令中的generate可以简写为g,组件名称使用驼峰命名1

这样写,会自动生成目录结构,并且生成组件:
- 会自动在src目录下生成一个user-list目录,目录下有UserList组件对应的html,scss,ts文件
 - user-list.component.html
 - user-list.component.scss
 - user-list.component.spec.ts
 - user-list.component.ts
- 同时,会更新src/app/app.module.ts根模块中的信息(将这个新组件import到根模块中)。

随后使用,是在user-list.component.ts文件的@Component()声明中,找到selector节点,节点内容为selector: 'app-user-list(app这个前缀是通过修改.angular-cli.json配置文件中的"prefix": "app"项可以修改的),然后就可以直接在项目的根html模板中使用<app-user-list></app-user-list>标签即可,这个标签到底包含哪些内容,就需要看组件自身的html文件user-list.component.html中写了哪些内容了。

最新回复 (0)
全部楼主
返回