ChaITSimpleLove的博客

使用 nvm 管理 node.js 多版本并存，并配置前端框架 ng 的相关环境依赖。

首先我们来看下【Angular官网模块】的定义：NgModules 用于配置注入器和编译器，并帮你把那些相关的东西组织在一起。NgModule 是一个带有 @NgModule 装饰器的类。 @NgModule 的参数是一个元数据对象，用于描述如何编译组件的模板，以及如何在运行时创建注入器。 它会标出该模块自己的组件、指令和管道，通过 exports 属性公开其中的一部分，以便外部组件使用...

本节学习父子路由，应用场景如下图网站所示：我们来分析下 ng官网，上面部分是导航栏，下面部分分别是左侧导航栏和右边内容部分，继续我们之前的路由基础知识环节的学习，上面导航栏部分就相当于在根组件中实现a标签的路由导航，接下来左侧边导航栏就类似子组件，当点击左侧导航栏的时候，在右侧内容部分展示对应的信息，这个环节就涉及到本节要学习的父子路由（或者嵌套路由）；CLI创建项目和路由的基...

静态路由get传参 动态路由get传参

本节我们学习路由知识点，假如我们有三个自定义组件，分别是【首页|home】，【设置|set】和【更多|more】，需要动态挂载在根组件【app.component.html】中，当浏览器url地址输入对应组件名称，动态显示该组件对应的内容，这就是动态路由；创建一个项目：ng new demo01 --routing在新建的项目【demo01】的根组件上面就会多一个ts文件【app-...

本节知识点是对【异步编程】的学习，首先我们来认识几个概念： 什么是异步和同步？ 同步的概念：执行一个方法或者功能，在没得到结果前，其他方法不执行，一定得等当前方法执行完，才会执行下一步骤； 异步的概念：执行一个方法或者功能，不需要等待到当前方法执行完，其他方法也可以执行；同步比较符合我们常规思维，相对简单，容易理解接受，异步不会按规定格式（硬编码顺序）按步骤执行，执行无序，相对复杂，...

相对于上篇【Angular父子组件通讯（@Input，@ViewChild）】文章中【子组件给父组件通讯】是父组件通过使用【@ViewChild】主动获取子组件的数据和方法，下面我们在学习另外一种相对复杂的方式实现：一、前提准备：首先使用CLI 创建两个组件，分别是【parent】和【news】分别扮演父子组件（相对）；二、演示步骤：子组件通过 @Output触发父组件的方法...

首先我们使用AngularCLI创建一个组件【aside】,创建命令如下：ng generate component components/aside接下来我们在创建好的组件【aside.component.html】编写如下代码：<section> <h3>dom操作CSS3页面动画</h3> <aside id="a...

为了演示【父子组件通讯】，我们首先通过CLI创建两个组件分别扮演父子组件（相对），分别是【parent】和 【child】://父子组件相对，这里方便演示组件直接取名【parent】和【child】ng generate component components/parentng generate component components/child1.在组件【parent】中...

继续上一篇【ToDoList 功能】功能完善，通过ng服务和BOM对象【Local Storage】实现数据的持久化。首先通过 Angular CLI命令【nggenerate serviceservices/data-storange】创建一个服务【data-storange】，代码示例如下：import { Injectable } from '@angular/core';...

应用知识点，使用 ng 实现用户注册功能，废话不多说，需求比较简单不在描述，页面构建原型大概如下图所示：同样先使用Angular CLI脚手架命令创建一个项目demo01, 依次构建组件【userRegistrationInfo】:html 页面构建如下：<hr/><h3 [ngClass]="{'h3': isTrue}">表单实现【MVVM】双向数据绑...

继续之前ng 学习笔记的补充，使用 html 表单模仿京东/JD 搜索记录页面，大概需求如下：当用户在搜索框中输入信息，点击【搜索????】按钮或者敲回车【Enter】按键时，把用户输入的信息保存，并且对信息归类：【代办事项】或【已办事项】，添加搜索信息的时候记录添加时间，每项信息可以被删除，默认保存信息为【代办事项】，当历史信息被选择时，进入【已办事项】，实现大概页面如下：了解上面的需求后...

1.Angular CLI是一个命令行界面，它可以创建项目、添加文件以及执行一大堆开发任务（测试、打包和发布）；https://cli.angular.io/ 2.开发环境搭建：2.1在安装Angular CLI之前，先检查电脑里面安装最新版Node.js和npm；node.js 官网：https://nodejs.org/en/ 中文网： http://nodejs.cn/...

1.接着之前的项目文件【my-app】,创建自定义组件，使用命令：ng g component components/[组件名称]，项目演示如下：此时项目文件夹【my-app】的 src =》app =》components 下面就创建了一个 header 组件；2.header 组件内容解析，代码注释说明如下：3.此时注意观察app.module.ts 文件里面的变化，说明注...

在上一节中，Angular框架的开发环境已经搭建完毕，在终端输入命令：ng -v 检查Angular框架的版本号，执行如下：  继续使用Angular CLI脚手架创建项目，打开VS-Code在终端输入命令：ng new [项目名称] 创建一个项目，操作如下： 1.桌面新建文件夹Demo\AngularDemo(正式开发环境根据项目要求把代码存放相应的盘符，此处只做演示)；...

Angular6.X项目【我的应用】目录结构分析：项目中使用Angular CLI创建的名称【my-app】,创建的目录结构如下： 对应文件描述：1.e2e —— 在e2e/下是端到端（End-to-End）测试；2.node_modules —— 安装的第三方模块都放在这里；3.src —— 自定义项目的所有文件存放在src里面；4.app —— 组件以及 app.m...

1.Angular CLI常用命令：Angular CLI脚手架常用命令 脚手架名称 用法命令 解释说明 零件 ng g component my-new-component   指示 ng g directive my-new-directive   管 ng g pipe my-new-pipe   服务 ng g s...

 1.使用服务的目的：服务是为不同组件之间共享信息提供的方法， 如组件不应该直接获取或者保存数据，不应了解是否展示假数据， 而（组件）更应该聚焦数据展示，把数据访问的职责委托给某个服务；使用服务的总结：   1.1提取多个组件之间重复的代码；   1.2抽象多个组件之间相同逻辑的代码；   1.3提供组件之前的相互通信；   1.4封装工具库，供组件使用；2.服务的...

1.HttpClient 介绍：是Angular中提供的简化版的API，用来实现HTTP客户端功能，它基于浏览器的XMLHttpRequest接口，通过HTTP协议实现前端应用和后端服务器的通讯，HttpClient在@angular/common/http中；2.使用HttpClient： 2.1在app.module.ts中引入HttpClientModule；imp...

1.Angular6.X介绍：1.1Angualr 是一款来自谷歌的开源的 web 前端框架，诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。（据项目统计Angular[1.X、2.X、4.X]是现在网上使用量最多的框架）2015年之前Angular 1.X 得到广泛应...