发表于: 2021-01-31 23:51:47

1 1073


今天完成的事情:

开始学习angular9,之前并不清楚angularjs与angular有区别,查资料容易造成混淆

看angluar的基本概念,主要是文字内容,今天有许多不懂的概念


Angular的特性:

1. 跨平台

2. 速度与性能

3. 生产率

4. 完整开发


安装步骤:

安装:npm install -g @angular/cli

创建angular工作区:ng new xxxx(文件夹名字)

转到文件夹:cd xxxx(文件夹名字)

启动命令:ng serve --open


Angular基本概念:

构架:

Angular 的基本构造块是 NgModule,它为组件提供了编译的上下文环境


组件:

每个 Angular 应用都至少有一个组件,也就是根组件,它会把组件树和页面中的 DOM 连接起来。 每个组件都会定义一个类,其中包含应用的数据和逻辑,并与一个 HTML 模板相关联,该模板定义了一个供目标环境下显示的视图


模块、指令及数据绑定:

模板会把 HTML 和 Angular 的标记(markup)组合起来,这些标记可以在 HTML 元素显示出来之前修改它们

模板中的指令会提供程序逻辑,而绑定标记会把你应用中的数据和 DOM 连接在一起。 有两种类型的数据绑定:

a.事件绑定让你的应用可以通过更新应用的数据来响应目标环境下的用户输入

b.属性绑定让你将从应用数据中计算出来的值插入到 HTML 中


服务与依赖注入:

对于与特定视图无关并希望跨组件共享的数据或逻辑,可以创建服务类。 服务类的定义通常紧跟在 “@Injectable()” 装饰器之后


路由:

Angular 的 Router 模块提供了一个服务,它可以让你定义在应用的各个不同状态和视图层次结构之间导航时要使用的路径。 

浏览器导航约定:

a.在地址栏输入 URL,浏览器就会导航到相应的页面。

b.在页面中点击链接,浏览器就会导航到一个新页面。

c.点击浏览器的前进和后退按钮,浏览器就会在你的浏览历史中向前或向后导航


Angular模块简介:

@NgModule 元数据

NgModule 是一个带有 @NgModule() 装饰器的类。@NgModule() 装饰器是一个函数,它接受一个元数据对象,该对象的属性用来描述这个模块

重要的属性:

declarations(可声明对象表) —— 那些属于本 NgModule 的组件、指令、管道

exports(导出表) —— 那些能在其它模块的组件模板中使用的可声明对象的子集

imports(导入表) —— 那些导出了本模块中的组件模板所需的类的其它模块

providers —— 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。(你也可以在组件级别指定服务提供者,这通常是首选方式)

bootstrap —— 应用的主视图,称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性


问题:

常用的框架angular,react,vue为什么优先学习angular,angluar的优势是什么?我感觉其劣势是变动频繁且网上资料大都是旧版本,容易造成学习产生误会。

组件怎么写?

路由不懂


明天的计划:

学习实现angular的部分概念


返回列表 返回列表
评论

    分享到