开发者社区> 华章计算机> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Angular从零到一1.4 第一个组件

简介:
+关注继续查看

1.4 第一个组件


现在,为我们的App增加一个Component吧,在命令行窗口输入 ng generate component login --inline-template --inline-style 。 顾名思义,参数generate是用来生成文件的,参数component是说明我们要生成一个组件,login是我们的组件名称,你可以自己想个其他有意思的名字。后面的两个参数是告诉angular-cli:生成组件时,请把组件的HTML模板和CSS样式和组件放在同一个文件中(其实分开文件更清晰,但第一个例子我们还是采用inline方式了):

wangpengdeMacBook-Pro:blog wangpeng$ ng generate component login --inline-template --inline-style

installing component

  create src/app/login/login.component.spec.ts

  create src/app/login/login.component.ts

wangpengdeMacBook-Pro:blog wangpeng$?

是不是感觉这个命令行太长了?幸运的是Angular团队也这么想,所以你可以把上面的命令改写成  ng g c login -it -is  ,也就是说可以用generate的首字母g来代替generate,用component的首字母c来代替component,类似的--inline-template的两个词分别取首字母变成-it。

angular-cli为我们在login目录下生成了两个文件,其中 login.component.spec.ts 是测试文件,我们这里暂时不提。另一个login.component.ts 就是我们新建的Component了。

Angular提倡的文件命名方式是这样的:组件名称.component.ts ,组件的HTML模板命名为:组件名称.component.html,组件的样式文件命名为: 组件名称.component.css。建议读者在编码中尽量遵循Google的官方建议。

我们新生成的Login组件源码如下:

import { Component, OnInit } from '@angular/core';

 

//@Component是Angular提供的装饰器函数,用来描述Compoent的元数据

//其中selector是指这个组件的在HTML模板中的标签是什么

//template是嵌入(inline)的HTML模板,如果使用单独文件可用templateUrl

//styles是嵌入(inline)的CSS样式,如果使用单独文件可用styleUrls

@Component({

  selector: 'app-login',

  template: '

    <p>

      login Works!

    </p>

  ',

  styles: []

})

export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

这个组件建成后我们怎么使用呢?注意上面的代码中@Component修饰配置中的 selector: ‘app-login’,这意味着我们可以在其他组件的template中使用 <app-login></app-login> 来引用我们的这个组件。

现在我们打开  src/app/app.component.html 加入我们的组件引用:

<h1>

  {{title}}

</h1>

<app-login></app-login>

保存后返回浏览器,可以看到我们的第一个组件也显示出来了,如图 1.5所示。

 

图1.5 第一个组件的显示

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
angular24-angular安全
angular24-angular安全
7 0
angular10-MVC的组成部分
angular10-MVC的组成部分
11 0
angular11-MVC的组成部分
angular11-MVC的组成部分
14 0
创建第一个Angular应用的正确姿势
作为Google公司提供的一套开源的项目框架,Angular的模版功能强大且丰富,是一个比较完善的前端框架,包含服务,模版,数据双向绑定,模版化,路由,过滤器,自定义指令,依赖注入等所有功能,ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。
378 0
了解Node.js-to-Angular 套件组件
Node.js-to-Angular套件最常见的,并且我们相信也是最好的版本是包括MongoDB、Express、Angular和Node.js 的Node.js-to-Angular 套件。 在Node.js-to-Angular 套件中,Node.js 提供了开发的基础平台。
1838 0
第214天:Angular 基础概念
一、Angular 简介 1、 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开发和维护这个库 - 有了这一类框架就可以轻松构建 SPA 应用程序 - 轻松构建 SPA(单一页面应用程序) - 单一页面应用程序:   + 只有一个页面(整个应用的一个载体)   + 内容全部是由AJAX方式呈现出啦的 - 其核心就是通过指令扩展了 HTML,通过表达式绑定数据到 HTML。
1329 0
Angular2组件库 - Modal组件实现详解(一)
       这篇文章其实写的有点晚了。去年6月份,Angular2的版本刚升级到rc-4,一切都还处于蛮荒时期(虽然现在依然不是太稳定...)。当时为我们的[组件库](http://zorro.alibaba.net/#/docs/angular/introduce)开发[Modal组件](http://zorro.aliba
14944 0
10057
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载