Loading

摘要: 安装 依赖 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 阅读(67) 评论(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 阅读(30) 评论(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 阅读(249) 评论(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 阅读(19) 评论(0) 推荐(0) 编辑
摘要: 在 Angular 中最常用的指令分为两种,它们分别是 属性型指令 和 结构型指令。 NgClass 作用:添加或移除一组 CSS 类 NgStyle 作用:添加或移除一组 CSS 样式 NgModel 作用:双向绑定到 HTML 表单元素 NgIf 作用:根据条件添加或移除 DOM 语法: <di 阅读全文
posted @ 2022-03-19 14:31 1640808365 阅读(47) 评论(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 阅读(148) 评论(0) 推荐(0) 编辑
摘要: 文本 <p>{{ message }}</p> <input type="text" [(ngModel)]="message"> 运行之后你会发现报错了,原因是使用 ngModel 必须导入 FormsModule 并把它添加到 Angular 模块的 imports 列表中。 导入 FormsM 阅读全文
posted @ 2022-03-19 14:18 1640808365 阅读(23) 评论(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 阅读(21) 评论(0) 推荐(0) 编辑
摘要: 插值 文本绑定 <p>Message: {{ msg }}</p> <p [innerHTML]="msg"></p> 属性绑定 <!-- 写法一 --> <img src="{{ heroImageUrl }}"> <!-- 写法二,推荐 --> <img [src]="heroImageUrl" 阅读全文
posted @ 2022-03-19 14:11 1640808365 阅读(50) 评论(0) 推荐(0) 编辑
摘要: 组件生命周期 参考文档:https://angular.io/guide/lifecycle-hooks ngOnChanges() ngOnInit() 只执行一次 ngDoCheck() ngAfterContentInit() 只执行一次 ngAfterContentChecked() ngA 阅读全文
posted @ 2022-03-19 13:59 1640808365 阅读(22) 评论(0) 推荐(0) 编辑
摘要: 组件通信 参考官方文档:https://angular.io/guide/component-interaction 组件就像零散的积木,我们需要把这些积木按照一定的规则拼装起来,而且要让它们互相之间能进行通讯,这样才能构成一个有机的完整系统。 在真实的应用中,组件最终会构成树形结构,就像人类社会中 阅读全文
posted @ 2022-03-19 13:57 1640808365 阅读(170) 评论(0) 推荐(0) 编辑
摘要: 几乎所有前端框架都在玩“组件化”,而且最近都不约而同地选择了“标签化”这种思路,Angular 也不例外。 对新版本的 Angular 来说,一切都是围绕着“组件化”展开的,组件是 Angular 的核心概念模型。 组件的定义 以下是一个最简单的 Angular 组件定义: import { Com 阅读全文
posted @ 2022-03-19 13:52 1640808365 阅读(61) 评论(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 阅读(21) 评论(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 阅读(66) 评论(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 阅读(10) 评论(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 阅读(33) 评论(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 阅读(29) 评论(0) 推荐(0) 编辑
摘要: TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。 基本示例 function printLabel(labelledObj: { label: 阅读全文
posted @ 2022-03-19 11:53 1640808365 阅读(36) 评论(0) 推荐(0) 编辑
摘要: 布尔值 let isDone: boolean = false; 数字 let amount: number = 6; 字符串 类型 模板字符串 支持换行 支持内嵌表达式 和 JavaScript 一样,可以使用双引号,也可以使用单引号,推荐单引号 let nickname: string = '张 阅读全文
posted @ 2022-03-19 11:51 1640808365 阅读(25) 评论(0) 推荐(0) 编辑
摘要: 变量声明 在ES6(ES2015)出现之前,JavaScript中声明变量就只有通过 var 关键字,函数声明是通过 function 关键字,而在ES6之后,声明的方式有 var 、 let 、 const 、 function 、 class ,下面我们来讨论 var 、 let 和 const 阅读全文
posted @ 2022-03-19 11:45 1640808365 阅读(42) 评论(0) 推荐(0) 编辑