摘要：
安装 依赖 Node 6.9.0 or higher NPM 3 or higher Python C++ 编译工具 安装 npm install -g @angular/cli 使用帮助 ng help 初始化项目 ng new <项目名称> 启动开发服务 ng serve ng serve 默认 阅读全文
posted @ 2022-03-19 14:52
1640808365
阅读(96)
评论(0)
推荐(0)
摘要：
基本用法 添加 AppRoutingModule ng generate module app-routing --flat --module=app app-routing.module.ts import { NgModule } from '@angular/core'; import { R 阅读全文
posted @ 2022-03-19 14:45
1640808365
阅读(43)
评论(0)
推荐(0)
摘要：
起步 下载模板： git clone https://github.com/tastejs/todomvc-app-template.git --depth 1 初始化项目： ng new todomvc-angular cd todomvc-angular ng serve 将 todomvc-a 阅读全文
posted @ 2022-03-19 14:38
1640808365
阅读(268)
评论(0)
推荐(0)
摘要：
表单交互： 参考文档: https://angular.io/guide/user-input 启用 Http 服务 open the root AppModule, import the HttpClientModule symbol from @angular/common/http, add 阅读全文
posted @ 2022-03-19 14:34
1640808365
阅读(25)
评论(0)
推荐(0)
摘要：
在 Angular 中最常用的指令分为两种，它们分别是 属性型指令 和 结构型指令。 NgClass 作用：添加或移除一组 CSS 类 NgStyle 作用：添加或移除一组 CSS 样式 NgModel 作用：双向绑定到 HTML 表单元素 NgIf 作用：根据条件添加或移除 DOM 语法： <di 阅读全文
posted @ 2022-03-19 14:31
1640808365
阅读(64)
评论(0)
推荐(0)
摘要：
Class 与 Style 绑定 Class https://angular.io/guide/template-syntax#ngClass <!-- standard class attribute setting --> <div class="bad curly special">Bad c 阅读全文
posted @ 2022-03-19 14:24
1640808365
阅读(184)
评论(0)
推荐(0)
摘要：
文本 <p>{{ message }}</p> <input type="text" [(ngModel)]="message"> 运行之后你会发现报错了，原因是使用 ngModel 必须导入 FormsModule 并把它添加到 Angular 模块的 imports 列表中。 导入 FormsM 阅读全文
posted @ 2022-03-19 14:18
1640808365
阅读(35)
评论(0)
推荐(0)
摘要：
列表渲染 基本用法： export class AppComponent { heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; } <p>Heroes:</p> <ul> <li *ngFor="let hero of heroes" 阅读全文
posted @ 2022-03-19 14:15
1640808365
阅读(33)
评论(0)
推荐(0)
摘要：
插值 文本绑定 <p>Message: {{ msg }}</p> <p [innerHTML]="msg"></p> 属性绑定 <!-- 写法一 --> <img src="{{ heroImageUrl }}"> <!-- 写法二，推荐 --> <img [src]="heroImageUrl" 阅读全文
posted @ 2022-03-19 14:11
1640808365
阅读(57)
评论(0)
推荐(0)
摘要：
组件生命周期 参考文档：https://angular.io/guide/lifecycle-hooks ngOnChanges() ngOnInit() 只执行一次 ngDoCheck() ngAfterContentInit() 只执行一次 ngAfterContentChecked() ngA 阅读全文
posted @ 2022-03-19 13:59
1640808365
阅读(34)
评论(0)
推荐(0)
摘要：
组件通信 参考官方文档：https://angular.io/guide/component-interaction 组件就像零散的积木，我们需要把这些积木按照一定的规则拼装起来，而且要让它们互相之间能进行通讯，这样才能构成一个有机的完整系统。 在真实的应用中，组件最终会构成树形结构，就像人类社会中 阅读全文
posted @ 2022-03-19 13:57
1640808365
阅读(231)
评论(0)
推荐(0)
摘要：
几乎所有前端框架都在玩“组件化”，而且最近都不约而同地选择了“标签化”这种思路，Angular 也不例外。 对新版本的 Angular 来说，一切都是围绕着“组件化”展开的，组件是 Angular 的核心概念模型。 组件的定义 以下是一个最简单的 Angular 组件定义： import { Com 阅读全文
posted @ 2022-03-19 13:52
1640808365
阅读(78)
评论(0)
推荐(0)
摘要：
概念 模块通信：导出 export default xxx export const foo: string = 'bar'; export const bar: string = 'foo'; 模块通信：导入 // 加载默认成员 import xxx from '模块标识' // 按需加载模块成员 阅读全文
posted @ 2022-03-19 12:07
1640808365
阅读(30)
评论(0)
推荐(0)
摘要：
1.认识Angular 1.Angular介绍 2.安装Angular-CLI脚手架工具 3.使用AngularCLI初始化Angular项目 4.Angular应用启动过程 5.Angular 核心特性 2.TypeScript入门 1.TypeScript介绍 2.TypeScript入门 3. 阅读全文
posted @ 2022-03-19 12:07
1640808365
阅读(83)
评论(0)
推荐(0)
摘要：
函数参数 参数及返回值类型 function add(x: number, y: number): number { return x + y } 可选参数 function add(x: number, y?: number): number { return x + 10 } 默认参数 func 阅读全文
posted @ 2022-03-19 12:05
1640808365
阅读(17)
评论(0)
推荐(0)
摘要：
基本示例 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } sayHello() { console.log(t 阅读全文
posted @ 2022-03-19 12:02
1640808365
阅读(53)
评论(0)
推荐(0)
摘要：
数组解构 let input = [1, 2]; let [first, second] = input; console.log(first); // outputs 1 console.log(second); // outputs 2 上面的写法等价于： first = input[0]; s 阅读全文
posted @ 2022-03-19 11:58
1640808365
阅读(42)
评论(0)
推荐(0)
摘要：
TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。 基本示例 function printLabel(labelledObj: { label: 阅读全文
posted @ 2022-03-19 11:53
1640808365
阅读(53)
评论(0)
推荐(0)
摘要：
布尔值 let isDone: boolean = false; 数字 let amount: number = 6; 字符串 类型 模板字符串 支持换行 支持内嵌表达式 和 JavaScript 一样，可以使用双引号，也可以使用单引号，推荐单引号 let nickname: string = '张 阅读全文
posted @ 2022-03-19 11:51
1640808365
阅读(37)
评论(0)
推荐(0)
摘要：
变量声明 在ES6（ES2015）出现之前，JavaScript中声明变量就只有通过 var 关键字，函数声明是通过 function 关键字，而在ES6之后，声明的方式有 var 、 let 、 const 、 function 、 class ，下面我们来讨论 var 、 let 和 const 阅读全文
posted @ 2022-03-19 11:45
1640808365
阅读(56)
评论(0)
推荐(0)
摘要：
搭建 TypeScript 开发环境 什么是 compiler？ less 编译器：less EcmaScript 6 编译器：babel TypeScript 编译器：typescript 一句话：把 TypeScript 转换为 JavaScript ，浏览器就具有运行了 在线测试编译环境 co 阅读全文
posted @ 2022-03-19 11:43
1640808365
阅读(73)
评论(0)
推荐(0)
摘要：
TypeScript 介绍 TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。 Typ 阅读全文
posted @ 2022-03-19 11:40
1640808365
阅读(305)
评论(0)
推荐(0)
摘要：
本章节主要为大家描述 Angular “概念模型”（ Mental Model ）的构建。我发现，很多开发者已经做过非常多的项目，但是当你跟他聊的时候，你很快就会发现他并没有掌握这门框架的精髓。打几个比方，当别人提到 Spring 的时候，你的大脑里面第一个想到一定是 DI、IOC、AOP 这些东西 阅读全文
posted @ 2022-03-19 11:28
1640808365
阅读(166)
评论(0)
推荐(0)
摘要：
启动流程示意图 目录结构 . ├── e2e 端到端测试（暂且不关心） ├── node_modules npm安装的第三方包 ├── src 存放业务源码 ├── .angular-cli.json AngularCLI脚手架工具配置文件 ├── .editorconfig 针对编辑器的代码风格约 阅读全文
posted @ 2022-03-19 11:20
1640808365
阅读(215)
评论(0)
推荐(0)
摘要：
执行命令: ng new my-app Angular CLI 将会自动帮你把目录结构创建好，并且会自动生成一些目录文件，就像这样： 请特别注意：Angular CLI 在自动生成好项目骨架之后，会立即自动使用 npm 来安装所依赖的 Node 模块，所以这里你懂的，一道墙又会阻止我们通往自由的道路 阅读全文
posted @ 2022-03-19 11:16
1640808365
阅读(59)
评论(0)
推荐(0)
摘要：
目前，无论你使用什么前端框架，都必然要使用到各种 NodeJS 工具，Angular 也不例外。与其它框架不同，Angular 从一开始就走的“全家桶”式的设计思路，因此 @angular/cli 这款工具里面集成了日常开发需要使用的所有 Node 模块，使用 @angular/cli 可以大幅度降 阅读全文
posted @ 2022-03-19 11:08
1640808365
阅读(410)
评论(0)
推荐(0)
摘要：
Angular 是什么？ Angular（读音['æŋgjʊlə]）是一套用于构建用户界面的 JavaScript 框架。由 Google 开发和维护，主要被用来开发单页面应用程序。 类似于 Vue.js MVVM（数据驱动视图思想） 组件化 模块化 指令 ...... 由 Google 开发和维护 阅读全文
posted @ 2022-03-19 11:01
1640808365
阅读(2330)
评论(0)
推荐(0)
浙公网安备 33010602011771号