发表于: 2021-06-04 22:51:10
0 2100
今天完成的事情:get得到了,要展现到表单页面的数据; Angular Service(服务);
明天计划的事情:(一定要写非常细致的内容)任务进行,表单页面渲染。
遇到的问题:当要渲染到表单页面时(子组件内),发现获取到的数据是在父组件的兄弟组件,渲染遇到问题,了解到angular的Service(服务)可以完成(尝试中)。
收获:
angular 的学习一晃半个月了,知识充沛,需要学的还有太多。下面写一些我理解的。
深度思考:angular的核心思想,怎样体现在代码中:
angular核心包括六个方面,分别是组件、模板、指令、服务、依赖注入和路由。
组件:
Angular框架基于组件设计,它最小的功能执行单元就是组件。组件类似于HTML页面抽出的公共元素,但并不仅限于这些。一个应用程序就是由这些大大小小的组件组成,它们之间会有一定的关系。直接采用Angular的命令创建的组件包括四个文件,HTML、CSS、Spec.ts、Component.ts。HTML和CSS文件展示模板视图的;Component.ts是组件类,做功能逻辑的处理的;Spec.ts是放测试代码的。
模板:
模板是基于HTML的,普通的HTML文件或者代码都可以。上面代码显示的是一种引入模板的方式,也可以利用下面的模式引入:
template: '<div>...</div>' , // 直接在template标签下写HTML代码,需要用反单引号引起来
模板还有一套强大的语法体系。数据绑定是模板最基本的功能。数据绑定分为两种,分别是单向数据绑定和双向数据绑定。单向数据绑定包括属性绑定、事件绑定和插值。单向数据绑定和双向数据绑定指的是数据流向是单向还是双向的,单向和双向指的是模板和组件类之间。
指令:指令和模板关系密切,指令可以与DOM进行灵活交互,它可以改变样式,也可以改变布局,即控制DOM元素的显示与否。一般指令分为两种:结构指令和属性指令
结构指令能够添加、修改或删除DOM,从而改变布局。例:
当panDuan为true时,该div会显示;当panDuan为false时,该div会被移除。
属性指令用来改变元素的外观或行为,使用起来跟普通的HTML元素属性非常相似,例如ngStyle和ngClass命令,用来动态控制样式.例:
这样就可以把divClass这个class对应的样式渲染到该div上面。
服务: 服务是封装单一功能的单元,类似于工具库,常被引用于组件内部,作为组件的功能扩展。服务的形式不限,可以是一个简单的字符串或者JSON数据,也可以是一个函数甚至是一个类。(正在学习,要利用起来!)通过依赖注入的方式来引入使用所定的服务。
依赖注入:
依赖注入是Angular很重要的一部分,通过依赖注入的机制,服务等可以被引入到任何一个组件或者模块,或者其他服务中,而开发者无需关心服务的初始化,Angular 框架会帮忙做这件事,包括该模块本身依赖的其他模块。
路由:
路由控制了组件的发生和销毁,从而达到页面之间的跳转。它可以有指令形式,也可以通过配置。指令形式是指<router-outlet></router-outlet>,该标签的功能是根据当前的URL路径,匹配插入对应的组件节点,实现了页面的刷新。路由通过配置形式也可以实现,而且可以配置子路由,下面是简单的配置代码:
评论