标签：39 TypeScript angular TodoMVC 通讯录组件 Angular

某马Angular 39(全) 学到这里就会感觉自己离大佬越来越近了嘿嘿

2019

https://www.bilibili.com/video/BV1Wx411R7qt * 1

last new angular 19

0-介绍

Angular（读音['engjula]）是一套用于构建用户界面的JavaScript框架。由Google开发和维护，主要被用来开发单页面应用程序。
类似于 Vue.js MVVM（数据驱动视图思想）组件化模块化
指令
由 Google 开发和维护开发单页面应用程序（SPA）a

特性
MVVM
组件化
模块化
指令
服务
依赖注入
TypeScript

起源
2009年，Misko hevery和Adam abrons在业余时间打造了GetAngular

由于已不再是个人项目，所以开发团队将 GetAngular 重新命名为了AngularJs

至此，AngularJS 就进入了漫长的发展迭代阶段。
经过了3年的发展，AngularJS 在2012年6月份，1.0.0 版本正式推出。
AngularJS 在1.2之后的版本不再支持IE 6和7
AngularJS 在1.3 之后不再支持 IE8
AngularJS 在1.5 增加了类似组件化的开发方式
。为过渡到 Angular2 做铺垫
AngularJS 1.x.x 当前已发布到了 1.6.x

https://angularjs.org old htmluse

angularjs.io cli

困境
饱受诟病的性能问题
脏检查
落后于当前 Web 发展理念
例如组件化
模块化支持不好
对移动端支持不够友好

Angular 2 横空出世
Angular 1.x 由于问题太多，历史包袱太重，重构几乎不可能。
不过早在2014年3月，官方博客就有提及开发新版本 Angular 的计划。
2014年9月下旬一个大会上，Angular2 正式亮相。
2016年9月15号，Angular2 正式发布。
由于ng2几乎完全重写了ng1，所以官方把2之后的版本都称之为Angular

1.x 2.x+19

5.x 19.x

ng2相比 ng1移除了controller+$scope的设计方式，改用了当前主流的组件化构建相比 ng1 性能更好
优先为移动端设计
更贴合未来标准
o EcmaScript 6
o Web Component TypeScript反正就是更现代化，更好了.....

现状·自Angular 2之后，官方承诺之后的版本都会兼容至Angular 2·当前Angular 最新发布版为5.×.新版的Angular在Github 上也已收获了3万+使用量低于React和Vue

2016 2017x 2019

那我为什么要学习使用Angular？任何一种技术或者框架，一定要有自己的特色，如果跟别人的完全一样，解决的问题也和别人一样，那存在的意义和价值就会遭到质疑。·企业需求·增加职业竞争力·技术的本质思想都是一样的，也许你在其它技术中无法理解的事物，在这门课程中你能找到答案。这里我们要明白技术只是工具，主要目的还是用来帮助我们解决业务问题。作为开发人员，我们对待技术的态度应该博学开放，多学习和了解不同技术。只有当你见得东西多了才能有自己的想法，才不会人云亦云，不至于迷失在技术更新迭代的浪潮之中！

·读官方文档·写demo测试·写小项目练手·参与实际项目开发经验·日积月累……

01-安装Angular-CLI脚手架工 z具

目前，无论你使用什么前端框架，都必然要使用到各种NodeJs 工具，Angular 也不例外。与其它框架不同，Angular从一开始就走的“全家桶”式的设计思路，因此@angular/cli 这款工具里面集成了日常开发需要使用的所有Node模块，使用@angular/cli可以大幅度降低搭建开发环境的难度。Angular CLI类似于Vue CLI，是Angular 官方开发的一个脚手架工具，专门用来开发构建Angular 应用程序。·Angular 应用程序初始化·内置开发服务器·代码变更浏览器自动刷新·创建组件、指令、服务等集成工具·测试和维护………………

node python c++

npm install --global --production windows-build-tools

cnpm i -g @angular/cli

E:\code\Angular>ng --version
19.0.2

02-使用AngularCLI初始化Ang

ng new app

npm start ng serve

Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)

新版自带ssr+

03-一个Angular应用是如何启动的

"scripts"：{
"ng"："ng"，运行查看Angular CLI 脚手架工具使用帮助
"start"：|"ng serve"，运行开发模式
"build"：ng buld--prod"，运行项目打包构建（用于发布到生成环境）
"test"："ng test"，运行karma单元测试
"lint"："ng lint"，运行TypeScript代码校验
"e2e"："ng e2e"运行protractor端到端测试
}，

了解Angular核心特性(概念模型）本章节主要为大家描述Angular“概念模型”（Mental Model）的构建。我发现，很多开发者已经做过非常多的项目，但是当你跟他聊的时候，你很快就会发现他并没有掌握这门框架的精髓。打几个比方，当别人提到Spring的时候，你的大脑里面第一个想到一定是Dl、I0C、AOP 这些东西；当别人提到 Hibernate 或者Mybatis 的时候，你的大脑里面立即会浮现出ORM的概念；当别人提到React的时候，你想到的应该是VDom、JsX;当别人提到jQuery的时候，你首先想到的应该是S对吧？所以，你可以看到，任何一个成功的框架都有自己独创的“概念模型”，或者叫“核心价值”也可以。这是框架本身存在的价值，也是你掌握这门框架应该紧扣的主线，而不是上来就陷入到茫茫多的技术细节里面去。

在Angular中，组件就是一个类(构造函数的另一种写法)@Component 组件的装饰器selector 用来定义组件渲染的标签名称，说白了就是组件的名字templateUrl 用来指定组件的模板文件styleurls一个数组，用来存放组件相关的样式文件T

01核心特性-组件

ng generate component foo

imports: [RouterOutlet,FooComponent],

//控制器
<p>{{count}}</p>
<button (click)='add()'>add</button>

export class FooComponent {
  count=0
  add=()=>{
    this.count++
  }
}

NgModule（模块）是组织业务代码的利器，按照你自己的业务场景，把组件、服务、路由打包到模块里面，形成一个个的积木块，然后再用这些积木块来搭建出高楼大厦。

数据绑定{{}}
双向数据绑定[（ngModel）]

02-核心特性-其它

Services（服务）Service服务是一个广义范畴，包括：值、函数，或应用所需的功能。说白了服务就是针对某个单一或系统功能的封装，例如在Angular核心包里面，最典型的一个服务就是Http 服务。几乎任何东西都可以是一个服务。典型的服务是一个类，具有专注的、明确的用途。它应该做一件特定的事情，并把它做好。

service module 指令模板 ....

我们学到的这些只是关于 Angular 应用程序的八个主要构造块的基础知识：·

模块组件·模板·元数据·数据绑定·指令·服务·依赖注入

这里是一个简短的、按字母排序的列表，列出了其它重要的 Angular特性和服务。·动画·表单·HTP·组件生命周期·管道过滤器·路由·测试

元数据（Metadata)Metadata元数据告诉Anigular 如何处理组件类。

@Component

安装ts 编译器 ....ds

03-TypeScript介绍-01
04-TypeScript介绍-02
05-搭建TypeScript开发环境
06-TypeScript数据类型
07-TypeScript-解构赋值
08-TypeScript-剩余参数-数组
09-TypeScript-类的基本用法
10-TypeScript-类的继承
11-TypeScript-类成员访问修饰

public private protest statics

12-TypeScript-属性的get和
13-TypeScript-类的静态成员和
14-TypeScript-函数
15-TypeScript-for-of循环

for-of循环·for循环• forEach。不支持break· for in。会把数组当作对象来遍历• for of。支持break

16-TypeScript-模块
17-TypeScript总结
18-组件介绍

01-TodoMVC-案例介绍

todomvc.com

除了语法上的区别，\*ngIf还具有一个特殊的功能，它可以在元素显示或隐藏时，自动将其添加或移除DOM中。这意味着，当使用\*ngIf时，被隐藏的元素不会占用DOM空间，从而可以更加灵活地控制页面布局。

ngIf 和

新版指令要导入才可以用部分

[value]

ngOnInit 生命周期

constructorngOnChangesngOnlnitngDoCheckngAfterContentInitngAfterContentCheckedngAfterViewlnitngAfterViewCheckedngOnDestroy

ng cenerate module app-routing --flat --module

02-TodoMVC-下载预览模板
03-TodoMVC-项目初始化
04-TodoMVC-列表渲染（有数
05-TodoMVC-列表渲染（无
06-TodoMVC-添加任务
07-TodoMVC-利用双向绑定显示
08-TodoMVC-处理任务项的样
09-TodoMVC-切换所有任务项
10-TodoMVC-删除单个任务项_bilibili
11-TodoMVC-双击任务项进入
12-TodoMVC-编辑任务
13-TodoMVC-显示所有未完成
14-TodoMVC-清除所有已完成
15-TodoMVC-数据过滤第一步
16-TodoMVC-数据过滤完成
17-TodoMVC-页面刷新保持数
18-TodoMVC-数据持久化到本地
01-通讯录案例介绍
02-通讯录-项目初始化
03-通讯录-初始化案例中的组
04-通讯录-导入登陆和注册的组
05-通讯录-导入顶部导航栏-侧边
06-通讯录-导入路由
07-通讯录-嵌套路由
08-通讯录-表单提交-双向绑定
09-通讯录-表单提交-表单验证
10-通讯录-接口说明
11-通讯录-注册成功跳转到首页
12-通讯录-使用路由守卫拦截保_bilibili
13-通讯录-用户登陆
14-通讯录-登陆成功显示当前登陆
15-通讯录-用户退出
16-通讯录-HTTP拦截器
17-通讯录-联系人列表
18-通讯录-添加联系人
19-通讯录-删除联系人
20-通讯录-编辑联系人第一步
21-通讯录-完成编辑联系人
22-通讯录-简单总结

模块....服务...ds

route http

嵌套路由

componens
import { Component } from '@angular/core';
import {NgClass,NgIf,NgFor} from '@angular/common';
import {FormsModule} from '@angular/forms';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-foo',
  imports: [NgIf,FormsModule,NgFor],
  templateUrl: './foo.component.html',
  styleUrl: './foo.component.scss'
})
export class FooComponent {
  constructor(private http: HttpClient) {
    // This service can now make HTTP requests via `this.http`.
  }
  ngOnInit(): void {
    this.http.get('http://www.baidu.com').subscribe(config => {
      console.log(config)
    })
  }
  count=0
  flag=true
  add=()=>{
    this.count++
    
  }
}

html
<p>foo works!</p>
<p>{{count}}</p>
<button (click)='add()'>add</button>
<div ng-if="flag">
    Welcome back, user!
</div>
<div *ngIf="flag">temp</div>
<ng-template ng-if="flag">temp</ng-template>
<div> @if (true) { Welcome back, user! } </div>
<input (keyup.enter)="add()" type="text" [(ngModel)]="count">
<ol *ngFor="let item of [1,2,3]">
    <li>{{item}}</li>
</ol>

http

app.config
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }),provideHttpClient(), provideRouter(routes)]
};

app.routes
import { Routes } from '@angular/router';
import { FooComponent } from './foo/foo.component';

export const routes: Routes = [
    {
        path: 'foo',
        component:FooComponent,
        // children/
    }
];

标签：39,TypeScript,angular,TodoMVC,通讯录,组件,Angular
From： https://www.cnblogs.com/KooTeam/p/18606622

Angular 39

某马Angular 39(全) 学到这里就会感觉自己离大佬越来越近了嘿嘿

01-TodoMVC-案例介绍

相关文章

赞助商

阅读排行

Angular 39

某马Angular 39(全) 学到这里就会感觉自己离大佬越来越近了 嘿嘿

01-TodoMVC-案例介绍

相关文章

赞助商

阅读排行

某马Angular 39(全) 学到这里就会感觉自己离大佬越来越近了嘿嘿