新项目搭建
ng new命令新建项目
首先到工作目录底下,然后使用ng new命令初始化一个新项目:
ng new newProject // 后面跟的是项目名称1
命令执行结果如下:
这个命令会自动帮我们生成所需要的一些基本文件,注意上图,在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文件,然后根据文件中配置的这些依赖包,然后一一会进行下载,如图所示:
图中可以看到几个警告,第一个说的是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命令。
ng serve 开启服务
项目新建完成,依赖包下载完成。之后就可以跑起项目了,我们需要使用ng serve
的命令开启一个轻量级的开发状态的httpserver。
我们在做前端开发的时候,不要启动后台,只要开启一个前端就好了。
从上面图中,我们可以看到只需要打开浏览器访问http://localhost:4200即可。
最后,在浏览器中看到上图所示的界面,就相当于我们已经用angular/cli建立好了一个新项目。
在Chrome浏览器的调试工具中发现网络请求里面,中vendor.bundle***啥的,某个文件特别大,俺么我们就可以重启服务,使用production模式,即使用命令ng serve --prod
,这样就会减小文件大小。
但是使用这个命令,我们会发现下面的错误:
这个错误发生的原因其实是由于angular/cli的最新版本有bug吧,所以我们不要用最新的版本,将下图中angular/cli的对应版本改为1.2.6(这个版本是没有问题的)。随后需要扫除node_modules文件夹,然后重新运行cnpm install
命令。
在依赖包重新安装之后,我们再设置ng serve --prod
,就会有效减小请求中文件的大小:
至此,使用@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中写了哪些内容了。