[真传弟子]JS-陈振华|2019年10月16日的日报-技能树.IT修真院

发表于： 2019-10-16 17:44:13

1 781

今天完成的事情：

搭建好脚手架

搭建好JS任务6的环境

弄好之后angular进去之后就会变成这样

相当于一个插件，和栅格系统差不多的一个东西

然后之后的一切东西就都是在这个里面运行和修改了

而今天的脚手架工具是一个可以快速搭建项目的一个插件

装全局的angular-cli， npm install -g @angular/cli

或者
cnpm install -g @angular/cli@v1.0.0-rc.2 – 国内淘宝源(cnpm的安装自行搜索)
或者
yarn add global @angular/cli

第二步

查看各插件是否已经安装，ng -v会出来一堆东西，如第一个图git命令所示！

第三步

生成项目代码为：ng new 项目名称

angular-cli可以初始化ng2或者ng4的项目，我这里说2+；

脚手架的命令很多，我这里只列出最常用的；

新建东东

范围	命令	作用
new	ng new new_project	初始化新项目
Component	ng g component my-new-component	新建一个组件
Directive	ng g directive my-new-directive	新建一个指令
Pipe	ng g pipe my-new-pipe	新建一个管道
Service	ng g service my-new-service	新建一个服务
Class	ng g class my-new-class	新建一个类
Interface	ng g interface my-new-interface	新建一个接口
Enum	ng g enum my-new-enum	新建一个枚举
Module	ng g module my-module	新建一个模块

测试及检测

范围	命令	作用
e2e	ng e2e	跑自动化测试-自己写测试测试用例
test	ng test	跑单元测试 – 自己写
lint	ng lint	调用tslint跑整个项目，可以收获一堆警告和错误，–force –fix –format可以帮助格式和修复部分问题

第四步

现在已经创建完成了，cd进入项目，会看到一些这样的东西，说明已经创建完成了，接下来就是执行项目就可以了，跟vue2.0一样，此时执行用到的代码为：ng serve --open（和vue的npm run dev效果是一样，自动监听修改内容），这一点也是不同于angularjs（官方称1.x为angularjs，过了2.0就直接称为angular）

学习父子路由

父子路由

1. 创建组件引入组件

import { NewsaddComponent } from './components/newsadd/newsadd.component';
import { NewslistComponent } from './components/newslist/newslist.component';

2. 配置路由

{
  path: 'news',
  component:NewsComponent,
  children: [
    {
      path:'newslist',
      component:NewslistComponent
    },
    {
      path:'newsadd',
      component:NewsaddComponent
    }
  ]
  }