发表于: 2017-05-22 23:40:43

1 908


今天完成的事情:

详解组件


1.模板 (Templates)是由 Angular 扩展的 HTML 语法组成,组件 (Components)类用来管理这些模板,应用逻辑部分通过服务 (Services)来完成,然后在模块中打包服务与组件,最后通过引导根模块来启动应用。


2.组件(Components)

组件是一个模板的控制类用于处理应用和逻辑页面的视图部分。

组件是构成 Angular 应用的基础和核心,可用于整个应用程序中。

组件知道如何渲染自己及配置依赖注入。

组件通过一些由属性和方法组成的 API 与视图交互。

创建 Angular 组件的方法有三步:

从 @angular/core 中引入 Component 修饰器

建立一个普通的类,并用 @Component 修饰它

在 @Component 中,设置 selector 自定义标签,以及 template 模板


3.插值 : 在 HTML 标签中显示组件值。

<h3>{{title}}<img src="{{ImageUrl}}"></h3>

属性绑定: 把元素的属性设置为组件中属性的值。

<img [src]="userImageUrl">

事件绑定: 在组件方法名被点击时触发。

<button (click)="onSave()">保存</button>

双向绑: 使用Angular里的NgModel指令可以更便捷的进行双向绑定。

<input [value]="currentUser.firstName"

       input)="currentUser.firstName=$event.target.value" >


4.依赖注入

当 Angular 创建组件时,会首先为组件所需的服务找一个注入器( Injector ) 。

注入器是一个维护服务实例的容器,存放着以前创建的实例。

如果容器中还没有所请求的服务实例,注入器就会创建一个服务实例,并且添加到容器中,然后把这个服务返回给 Angular 。当所有的服务都被解析完并返回时, Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。


明天计划的事情:

       继续学习angular


问题:
      陡峭的学习曲线


收获:

     

Angular 应用是由模块化的,它有自己的模块系统:NgModules。

每个 Angular 应该至少要有一个模块(根模块),一般可以命名为:AppModule。

Angular 模块是一个带有 @NgModule 装饰器的类,它接收一个用来描述模块属性的元数据对象。

几个重要的属性如下:

declarations (声明模块中有什么东西) - 视图类属于这个模块。 Angular 有三种类型的视图类: 组件 、 指令 和 管道 。

exports - 声明( declaration )的子集,可用于其它模块中的组件模板 。

imports - 本模块组件模板中需要由其它导出类的模块(应用正常运转还需要什么东西)

providers - 服务的创建者。本模块把它们加入全局的服务表中,让它们在应用中的任何部分都可被访问到。

bootstrap - 应用的主视图,称为根组件,它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。


index.html寻找启动模块(app.module.ts)指定的主组件AppModule(app.component.ts)对应的css选择器(app-root),找到之后angular会用主组件(app.component.ts)指定的模块内容:templateUrl:‘../app.component.html'替换掉index.html<app-root>标签中的内容


返回列表 返回列表
评论

    分享到