一、简单操作

a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/cli@1.0.0安装CLI,为CLI的位置设置环境变量,然后就可以全局使用ng命令了。

执行ng new –ng4 angular-hello-world可以创建Angular4项目,会自动生成基础的文件夹和文件,还会自动进行npm i操作,下载并安装所需的依赖。

然后执行ng serve就可以编译并启动这个程序了,但ng并不会自动打开浏览器。

b) 创建一个组件

组件是Angular的核心,运行ng generate componenthello-world可以生成hello-world组件,如果VSCode安装了Angular Files插件,也通过可以方便地右键-添加组件,会为一个组件自动创建四个文件。

组件的基本组成部分为装饰器(Component Decorator)和组件定义类(ComponentDefinition class)。

上图右侧的hello-world.component.ts文件中,import引入两个依赖Component和OnInit;@Component部分便是装饰器了,这部分代码将HelloWorld类装饰成了一个组件。因为selector属性的值为“app-hello-world”,<app-hello-world>标签就可以在html中使用了。templateUrl定义了模板的路径,还可使用template并使用倒引号(`…`)直接在ts文件中嵌入模板内容;styleUrl指定当前组件专属的CSS文件路径。

如此,一个组件就创建好了,在app.component.html中加入<app-hello-world>标签就可以使用这个组件了。

c) 在组件中使用数据。

用插件的功能添加一个user-item组件,会自动创建所有的文件,并已将组件添加到了app.component.html。

在组件的ts文件添加name属性并在构造函数初始化

随后在模板中使用这个属性,语法为{{name}}。

d) 数组的使用。

数组的遍历使用*ngFor,这与razor中的遍历类似,会自动创建包含数组成员的标签。在ts文件中定义字符串数组,可以用string[]或Array<string>的写法。然后*ngFor的使用方式为:

试了下把let换成var就不行了,let声明的变量作用域被限制在了块级,比var安全,可能这儿的模板语法废弃了var吧。

e) 组件的使用

前面创建的user-item组件中的name属性只是使用了默认的值‘Felipe’。实际使用中,组件是可复用的,属性的值应该从外部指定。

要在user-list组件中使用user-item,可以这样修改user-list的模板:

[name]=***这样的写法是在向user-item组件传递值。

修改后的user.item.components.ts如下,导入了Input,并在属性前面加上@Input(),这样就可以从父模板传入值了。

 

二、Angular的启动过程

a) 每个程序都有启动入口,在执行ng serve后,ng会在.angular-cli.json中查找入口,.angular-cli.json指向main.ts文件,而main.ts便是程序的入口。在main.ts中platformBrowserDynamic().bootstrapModule(AppModule)语句表示启动程序会执行AppModule,AppModule在app.module.ts中定义。

b) app.module.ts中的具体内容有:

@NgModule装饰器包含四个属性:declarations、imports、providers和bootstrap。

declaration属性声明了当前AppModule模块包含的组件,创建的新组件会自动添加到这里。

imports属性导入了AppModule依赖的模块。关于imports与头部的import的区别作者后面会细说。

prividers属性用于进行依赖注入,现在不懂了。

bootstrap属性指定了运行该模块时,加载的第一个组件。

学习资料:The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda

Angular基础(二) 组件的使用的更多相关文章

  1. react基础用法二(组件渲染)

    react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 />  ...

  2. 第214天:Angular 基础概念

    一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...

  3. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  4. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  5. Bootstrap<基础二十七> 多媒体对象(Media Object)

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  6. Bootstrap <基础二十二>超大屏幕(Jumbotron)

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

  7. Bootstrap<基础二> 网格系统

    Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格 ...

  8. Angular动态创建组件之Portals

    这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Por ...

  9. 将 Shiro 作为应用的权限基础 二:shiro 认证

    认证就是验证用户身份的过程.在认证过程中,用户需要提交实体信息(Principals)和凭据信息(Credentials)以检验用户是否合法.最常见的“实体/凭证”组合便是“用户名/密码”组合. 一. ...

随机推荐

  1. LabVIEW(十三):同一个控件的输入和输出转换

    1.实现功能:读取某些文件的数据并将这些数据显示在一个界面上,对界面上的数据进行修改后,将修改后的数据保存到源文件中. 2.显示功能: 程序框图右键>文件I/O>读取分隔符电子表格> ...

  2. apache环境之困扰,Rewrite导致无法加载多个不同的.html文件

    又是一个项目,为访问多个纯静态html页面h5游戏页,能够做一些简单分享和跳转即可.原本是一个简单得不能的项目,但是却多生了事端. 我按照apache的惯例,将文件上传到服务器的DocumentRoo ...

  3. pdf.js显示合同签名问题

    需求 pdf页面显示在ios11以下的环境,合同的签名印章或签字会显示不出 解决方案(初步处理参考下文引用,这里是后续具体做法) 现在通过使用pdf.js插件,参考下文,引入自己的代码 我把gener ...

  4. 3-2 模板语法(vue中的内容写法)

    插值表达式.v-text.v-html的用法

  5. [EXP]Apache Tika-server < 1.18 - Command Injection

    #################################################################################################### ...

  6. 全网最详细的Eclipse里如何正确新建普通的Java web项目并发布到Tomcat上运行成功【博主强烈推荐】(图文详解)

    不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 如果是在Myeclipse里,则是File -> new -> ...

  7. Spring Boot应用的后台运行配置(转载)

    作者:程序猿DD 酱油一篇,整理一下关于Spring Boot后台运行的一些配置方式.在介绍后台运行配置之前,我们先回顾一下Spring Boot应用的几种运行方式: 运行Spring Boot的应用 ...

  8. 【NGINX】配置文件

    ######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_ ...

  9. win32编程简介

    win32编程简介 复习Win32整理下知识. 为什么学习win32? 我们要编写windos程序.都离不开API. 也就是我们所说的win32程序. 所以学好win32是你能不能再windows下编 ...

  10. ThreadLocalMap里Entry为何声明为WeakReference?

    Java里,每个线程都有自己的ThreadLocalMap,里边存着自己私有的对象.Map的Entry里,key为ThreadLocal对象,value即为私有对象T.在spring MVC中,常用T ...