入门总结(angular篇)
要放假了,赶紧总结一下,不然都忘光了
正文
关于Angular
1.安装、创建、运行hello word
npm install -g @angular/cli
ng new <app-name>
补充:"–skip-install" 跳过package.jsom.dependencies下声明的包安装(npm install
),因为有时候网络环境那啥,最后的结果就是吃力不讨好。然后 cd <app-name> && npm i
ng new <app-name> --skip-install
如果有各种询问,相信你也能看懂,基本就是 y。
运行
ng s -o #运行服务,并在浏览器打开
2.在angular中使用过的命令
写在前面
- 如果不需要spec.ts 文件,应该增加参数
--skip-tests=true
, 即ng g m/c/s <component-name> --skip-tests=true
- 官网给的建议是 m 在 c之前创建
2.1 module
ng g m <module-name>
- 用于创建模块,module-name 从根开始创建,但不会创建同名文件夹,所以如果你在组织目录结构的时候,需要将前面的文件夹写入,不然他就直接在根创建xxx.module.ts。
2.2 component
ng g c <component-name>
- 用于创建组件,component-name 从根开始创建,并且会创建同名文件夹,包含四个文件 html、css/less/scss、ts、spec.ts
2.3 service
ng g s <service-name>
- 用于创建服务,同模块一样,从根开始创建,所以根据自己需要,是否要增加目录层级
2.4 routing
ng g m <routing-name> --routing=true
- 用于创建路由模块 xxx-routing.module.ts
注意
如果此时你的module没有创建,它会同时创建module,和routing.module
2.5 guard
ng g guard <guard-name> --routing=true
- 用于创建路由守卫模块 xxx.guard.ts,出现询问我都是默认第一个
CanActivate
,其他的还没用过
3.重点记录下
路由:
<router-outlet></router-outlet> //路由器出口
一个占位符,Angular 会根据当前的路由器状态动态填充它。
我理解的就是路由内的组件,被指定渲染在里面。
- 全局路由
主要配置好,404与默认地址,且在最后被导入。
2.子路由
子路由配置情况如上图,访问的形式类似与目录查找,./ 当前路由下的 ../上级路由
,访问如下图,
3.路由守卫
主要关心 canActivate 函数的返回值,因为它的值决定了子路由是否能访问,如下图
4.解决过的一些问题
问题1:
Can't bind to 'ngModel' since it isn't a known property of 'input'
解决:
在使用angular的双向绑定的时候,没有导入FormsModule
模块。
同时注意,需要在包含当前component的module中导入。这个在之后其他类似问题的解决很有帮助。
...
import { FormsModule} from '@angular/forms';
...
@NgModule({
imports:[
...
FormsModule
...
]
})
延申
Can't bind to 'AAAA' since it isn't a known property of 'BBBBB'
一般这个问题的出现,都是由于没有导入相应的模块,或者说你导入了,但是你的component和module的关系不对应。
问题2:
明明配置了路由,但是就是不能按照正确的逻辑来跳转
解决:
·根路由一定是要最后导入的
(目录构建有点乱)