Angular4.0基础知识之组件
Angular4.0基础知识之路由
Angular4.0依赖注入
Angular4.0数据绑定&管道

最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app。

先上个效果图:

环境&版本信息声明

运行ng -v

@angular/cli: 1.2.0
node: 8.1.2
os: win32 x64
@angular/* 4.2.5
...

好吧,那就顺便写个笔记/教程/备忘/博客咯

安装Angular脚手架

安装的时候选择全局安装

npm install @angular/cli -g

创建Angular项目

运行命令

ng new AngularStudy

其中AngularStudy是项目文件夹名称

启动项目开发环境

在当前创建的项目目录下运行 如下命令

ng serve或者npm run start,然后在浏览器中进入所提示的地址,默认是http://127.0.0.1:4200/

当你访问页面的时候出现AngularLogo的时候,说明你的项目已经创建成功了,反之,请检查错误信息或日志

提示:在我学习的过程中遇到了一个问题,就是在Windows10系统中,当你的用户文件夹是中文名称的时候,你就要小心了,你很有可能会在创建过程中遇到错误,具体是什么错误...额我忘了,那个错误百度谷歌都找不到答案,如果你解决不了,检查一下是不是这个问题,百度有修改用户文件夹名称的教程(需要修改注册表,小白慎入)

安装jQuery和Bootstrap

在我们的开发流程中,jQuery和Bootstrap这两个框架已经是不可或缺的一部分了,那么,如何在Angular中优雅地安装并使用呢?

其实这很简单,首先运行以下两条命令安装jQuery和Bootstrap:

npm install jquery --save
npm install bootstrap --save

这时候,两个框架就已经安装到了我们的node_modules模块目录下了

但是你会发现,在TypeScript中尝试使用$符号的时候,编辑器仍然不能识别,这是为什么呢?

经过Google的提示,终于解决了这个问题

安装JQuery的类型描述文件,运行如下命令

npm install @types/jquery --save-dev

同理安装Bootstrap的TypeScript类型描述文件

npm install @types/bootstrap --save-dev

安装这两个类型描述模块的目的是让TypeScript认识jQuery和Bootstrap的语法,进而能在ts文件中使用它们

OK,是不是很简单呢?

生成组件

Angular毕竟是有Google做后台的,功能方面也相当齐全,component不需要我们手动地去创建,只需要一条命令即可生成

在项目根目录运行ng g component navbar 生成导航条组件

这条命了的意思就是angular generate component navbar,简单明了

有了这条命令,我们就能很轻易地生成项目中的组件

就这样,我们的项目骨架就搭建完成了

对模块进行布局

模块创建完成了,那么,我们下一步需要做什么?当然是就像拼图一样,使用创建好的模块,拼接起来,成为一个简单的单页面应用咯!

至于我们的拼图底板是什么,分析Angular的启动,app作为默认显示出来的component,肯定是在app.component.html中进行拼接了。

打开我们的app.component.html,删除里面无用的内容,使用我们刚刚创建的component在里面拼图吧

一般情况下,我们创建的组件所对应的css元素选择器(也就是标签),名字是app-componentName

最终拼合结果如下所示,这样,我们的单页面应用的基本骨架就搭建出来啦~

组件编写

Angular的组件复用是很重要的一个功能,就比如上面的星级评分组件,不管是商品展示,还是用户评论打分,都会用到,只需要一次知错,就能一直使用

导航条navbar

组件html内容如下

.main-wrap{
  margin-top: 70px;
}

这时候,我们需要在css文件中添加样式,使中间部分内容乡下偏移约70px,因为fix格式的导航条会盖住内容。

默认的全局css文件是/src/style.css当然也可以在配置文件中更改或者添加新的css文件

当然,每一个组件对应的css样式我们应该分开写,比如navbar的css写在navbar.component.css文件中

底部信息footer

由于尚未编写业务逻辑,简单地先做一下占位即可

footer{
  text-align: center;
}

商品搜索组件

就是上面那个套路,都是使用Bootstrap框架所带的那些css样式,直接贴代码,学过的应该都能看懂。

  

    商品名称 : 
    
  
  

    商品价格 : 
    
  
  

    商品类别 : 
    
  
  

    商品名称 : 
    
  

轮播图组件

轮播图稍微有些复杂,因为不仅仅使用了HTML,同时也使用了少量的JavaScript和jQuery。当然我相信，来学Angular的肯定不是小白咯。

当然,这一部分主要就是实现一个简单的轮播图,也没有用到什么Angular代码

.slide-image{
  width:100%;
}

从下一部分开始我们就需要接触到更多Angular的知识了

商品详情组件

首先,每一件商品都是一个对象,那么我门可以建立如下的模型:

product.component.ts

export class Product {
  constructor(
    public id: number,
    public title: string,
    public price: number,
    public rating: number,
    public desc: string,
    public categories: Array
  ) {

  }
}

然后,在这个ts文件中进行商品(对象)的实例化(因为现在还没有学到http)

export class ProductComponent implements OnInit {

  public products: Array;

  constructor() {
  }

  ngOnInit() {
    this.products = [
      new Product(1, '第一个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']),
      new Product(2, '第二个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']),
      new Product(3, '第三个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']),
      new Product(4, '第四个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']),
      new Product(5, '第五个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']),
      new Product(6, '第六个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电'])
    ]
  }

}

这样,即可在模块实例化的时候获取到商品对象列表,并传递到component模板中

ngOnInit()方法会在component实例化的时候自动调用一次,这个知识点稍后会更详细讲到

有了数据之后,下一步当然是制作component模板咯,顺便吧数据也显示出来呗(满满的都是套路额)

  

    
    

      
￥{{product.price}}
      
{{product.title}}
      
{{product.desc}}
    
    

      
    
  

ngFor可以理解为在html中对一个数组进行循环遍历,同时循环这个html标签......就类似PHP那样,慢慢理解吧,挺简单的额,稍后也会讲到
但是这个指令反映出来的思想很重要,Angular的数据绑定,也叫作数据驱动

然后,从开始搞事情以来第一个比较难的地方已经过去了(以后你回头看的时候还会发现...其实好简单的哦)

星级评分组件

别看这个组件很小不起眼,但是星际评分组件是当前所有组件里最复杂的一个(相对复杂...)

主要使用了 :

*ngFor指令
class绑定
组件属性值输入@Input()

直接上代码呗

控制器代码如下,这部分代码的关键点在于把Production component的product.rating注入到Star Component中

export class StarsComponent implements OnInit {
  @Input()
  public rating: number;
  public stars = [];

  constructor() {
  }

  ngOnInit() {
    const full: number = Math.floor(this.rating);
    const half: number = Math.ceil(this.rating - full);
    const empty: number = 5 - full - half;
    for (let i = 0; i < 5; i++) {
      if (i < full) {
        this.stars.push('full');
      } else if (i === full && half !== 0) {
        this.stars.push('half')
      } else {
        this.stars.push('empty')
      }
    }
  }
}

如何注入呢?上面有一个装饰器@Input()标识着rating变量是外部注入的

那么,在实例化star component的位置......

就是这里!!!

就是这么简单

接下来当然是模板代码咯,关键点都在这里

  
  {{rating}}星

这里首先使用ngFor指令对i标签(星星)进行遍历
接下来使用[class.xxx]进行样式绑定,根据控制器里组合成的数组进行星星标签的生成
这里使用了Font-Awesome图标

代码只要稍微细心看就能看懂,主要就在于样式绑定,根据数组中不同的字符串绑定不同的星星样式

就这样,我们的基本组件已经实现了大部分了,等有空了进行下一章的学习......