Angular最新教程-第五节编写第一个组件

简介: Angular最新教程-第五节编写第一个组件

讲了四节了,一行代码都没有敲,虽说磨刀不误砍柴工,但我们也是时候,上场砍点啥啦。
今天我们就来编写我们的第一个组件,效果图如下。

image.png

首先我们使用angular-cli的generate命令来帮我们自动化创建组件。
$ ng generate component site_status

image.png

通过分析效果图我们知道了我们有8个数据需要绑定到页面上。
我们先打开src\app\site-status\site-status.component.html

image.png

编写我们需要的页面元素。并绑定数据变量。
在ng1中,js我们大概会这么写。

var siteStatus  = {
        users:'14978',
        visitors:'20930244',
        articles:'2538',
        comments:'8075',
        maxOnlineNum:'291',
        maxOnlineTime:'17-04-25 17:23',
        onlineNum:'144',
        onlineUsers:'2'
    };

但是在typescript中,要使用变量要先声明变量类型。
所以我们在src\app\site-status\site-status.component.ts中要先编写

siteStatus:{
    users:string,
    visitors:string,
    articles:string,
    comments:string,
    maxOnlineNum:string,
    maxOnlineTime:string,
    onlineNum:string,
    onlineUsers:string
  };

声明siteStatus是一个对象,里面的属性也要声明类型。
然后在之后的函数中再给这个对象赋值。
当你不太确定属性类型时,你可以使用any。
当一个变量类型被声明成any时,他可以接受任意类型的数据,
有点类似var声明。


这节课我们先不讲解http请求这部分内容。
所以我们这里在构造函数中给这个变量赋值。
完整代码如下:

image.png

我们保存运行一下。(调试方法参照前几节课)
我们发现,运行界面并没有我们编写的这个组件,
因为我们还没有在项目中使用到这个组件。


这句话有点废话。但是我们可以明白一个事情,
我们编写过程只是一个声明过程,
在未被使用的时候,系统不会去加载运行他们。
后续使用打包优化的时候,没有使用到的组件,
都不会被打进发布包里面,保证了网站的整体较小。
这在后续章节中讲解。


这里我们在打开src\app\app.component.html,在这里面使用我们新定义的组件。

image.png

保存。

image.png


这时候就有了我们编写的内容了。但是效果和效果图不太一样,
所以我们给这个界面加入一些样式。


我们打开app\site-status\site-status.component.ts组件的ts文件,查看,
该组件关联的样式文件是
'./site-status.component.css' 在里面加入我们想要的样式。

image.png

加入样式之后(详细样式文件请查看源码),如下。

image.png

基本符合效果图了,但是在标题左侧还少了一个小图标。
所以我们到阿里巴巴矢量图库去下一个”仪表盘”的图标,
放到assets文件夹中,这个文件夹里面的文件会被一起打包的。
把图标加到html中并加上样式,完成和效果图一样的效果。

image.png


文中图标来自:http://www.iconfont.cn/search/index?searchType=icon&q=%E4%BB%AA%E8%A1%A8%E7%9B%98
效果图来自:
http://www.angularjs.cn/

源代码:百度云 链接:http://pan.baidu.com/s/1i5pFlXz 密码:o1qw
码云:
https://gitee.com/xiaohuOni/oniplan-ng


有码云的帮忙给个star,感谢。

这节课的内容就到这里完成了。
感谢您的阅读。
我是莽夫,希望你开心。

目录
相关文章
|
6月前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
3月前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
57 0
|
3月前
|
iOS开发 Android开发 MacOS
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
56 0
|
3月前
|
前端开发 UED
Angular 动画教程超赞!掌握让应用更具交互性的技巧,开启精彩的前端动画之旅!
【8月更文挑战第31天】在现代前端开发中,提升用户体验至关重要,而动画是增强应用交互性的有效手段。Angular 提供了强大的动画功能,可轻松添加各种动画效果。本文介绍了 Angular 动画的基本概念、使用动画模块、事件触发动画、动画序列与并行执行、性能优化及结合第三方动画库等最佳实践。通过遵循这些实践,可以充分发挥 Angular 动画的优势,提升用户体验。下面是一个简单的示例应用,展示了如何使用 Angular 动画实现元素的显示和隐藏效果。
44 0
|
3月前
|
JavaScript 测试技术
如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
21 0
|
4月前
|
前端开发 JavaScript
前端框架与库 - Angular基础:组件、模板、服务
【7月更文挑战第16天】Angular,谷歌维护的前端框架,专注构建动态Web应用。组件是核心,包含行为逻辑的类、定义视图的模板和样式。模板语法含插值、属性和事件绑定。服务提供业务逻辑,依赖注入实现共享。常见问题涉及组件通信、性能和服务注入。优化通信、性能并正确管理服务范围,能提升应用效率和质量。学习组件、模板和服务基础,打造高效Angular应用。
63 1
|
5月前
|
JavaScript 小程序 API
技术经验分享:Angular动态创建组件之Portals
技术经验分享:Angular动态创建组件之Portals
|
6月前
快速创建Angular组件并定义传参、绑定自定义事件的方法
快速创建Angular组件并定义传参、绑定自定义事件的方法
|
6月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
6月前
|
前端开发 JavaScript
Angular 组件模版代码里使用 ngIf 进行条件渲染的例子
Angular 组件模版代码里使用 ngIf 进行条件渲染的例子