Angular6基础(一)：在项目中使用less

   在 Angular 项目里使用 Ant Design。

封面摄影：carsten bachmeyer

来自  https://ninghao.net/course/7565#info

我们可以设置一下，让应用延迟加载暂时不需要的模块，这些模块只有在用户访问了特定路由地址的时候才会被加载进来。

使用 canLoad 类型的守卫，可以控制模块的加载，也就是可以判断一些条件再决定是否要加载需要的模块。

   这个课程主要训练的是使用 Angular 的 Guard，中文可以翻译成守卫。应用里的有些地方可能需要用户登录之后或者有特定的权限才能访问。我们可以去创建一些守卫，看守这些特别的地方，就是在用户访问他们的时候，会执行一些代码，判断一些条件，然后再决定是否可以让用户继续访问。

封面摄影：Simon W Xu

导航窗格左侧收藏夹分支下的默认选项、库分支下的默认选项默认是存在的，如果丢失了可按照下面的步骤来找回，操作步骤很简单，需要的朋友可以参考下

<script type="text/javascript">

1)     navigation        [ˌnævɪˈɡeɪʃn]         导航;领航;航行

2)     auxiliary            [ɔːɡˈzɪliəri]             辅助的;备用的;助动词;辅助工;辅助人员

3)     aux            ['əʊ]             辅助的

4)     simulate         [ˈsɪmjuleɪt]         模拟;假装;冒充;装作;(用计算机或模型等)模拟;模仿

5)     occurred        [əˈkɜːd]             发生;出现;存在于;出现在;occur的过去分词和过去式

https://cdn.baomitu.com/

正常情况下 使用  <mat-icon>info</mat-icon>

但这里的 info 为 style=outline  的 info ,所以下图应使用 <mat-icon>info_outline</mat-icon>

Angular 文件上传、下载

https://stackblitz.com/edit/angular-material-file-upload

https://embed.plnkr.co/plunk/JykVqh

https://mdbootstrap.com/docs/jquery/forms/file-input/

https://stackoverflow.com/questions/52622061/how-to-use-input-type-file-in-angular-material

angular cli全局版本大

$ yarn install

yarn install v1.21.0

$ node ./tools/npm/check-npm.js

[1/5] Validating package.json...

error components-srcs@9.0.0-rc.4: The engine "node" is incompatible with this module. Expected version "^12.0.0". Got "10.16.0"

error Found incompatible module.

info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

安装模块报错或警告 node unsupported "node@v8.1.2" is incompatible with eslint之类的

$ yarn install

yarn install v1.21.0

$ node ./tools/npm/check-npm.js

[1/5] Validating package.json...

从Java角度理解Angular之入门篇：npm, yarn, Angular CLI

使用 Yarn 也可以管理 Node.js 的包。你可以用它代替 npm。 yarn 更可靠，也更快一些。

mac 用户如果安装了 homebrew 的话，可以使用它去安装一下 yarn 这个工具。

在Angular中，组件属于特殊的指令，它的特殊之处在于它有自己的模板（html）和样式（css）。因此使用组件可以使我们的代码具有强解耦、可复用、易扩展等特性。通常的组件定义如下：

demo.component.ts：