Anguler入门开发_anglur

进行一下简单的Angular入门，开发第一版股票管理系统的静态页面布局。

一.Angular程序架构

• Parent component:组件是Angular应用的基本构建块，你可以把一个组件理解为一段带有业务逻辑和数据的HTML
• Service1：服务用来封装可重用的业务逻辑
• 指令：允许你向HTML元素添加自定义行为
• 模块用来将应用中不同的部分组织成一个Angular框架可以理解的单元

二.搭建Anguler开发环境

• 安装Nodejs,Angular CLI,WebStorm
  • 安装Nodejs、WebStorm请自行百度
  • 利用sudo npm install -g @angular/cli安装Angular命令行工具,使用ng -v命令查看
  • 使用ng new first-app创建项目名为first-app的项目
• 使用Angular CLI创建并运行Angular项目
  • 使用WebStorm打开创建的first-app项目
  • 目录结构（除非明确知道要做什么，否则不要修改目录文件）
    • e2e文件夹：用来做测试
    • src文件夹：应用源代码目录（app文件夹包含应用组件和模块；assets文件夹存静态资源如图片；environments文件夹进行环境配置；favicon.ico图标文件；index.html应用的根html；main.ts整个web应用脚本执行的入口点；polyfills.ts用来导入必要的库；styles.css应用的全局样式；test.ts自动化测试文件；tsconfig.json是typescript编译器的配置）
    • .editorconfig：webstorm的配置文件
    • .gitignore：git的配置文件
    • angular-cli.json：angular命令行工具的配置文件
    • karma.conf.js：执行自动化测试的文件
    • package.json：标准的npm工具的配置文件
    • protractor.conf.js：自动化测试的配置文件
    • README.md：项目的标注说明
    • tslint.json：tslint的配置文件，用于定义typescript检查的文件
• 分析Angular项目的目录结构及Angular CLI生成的基础代码

三.与组件相关的基本概念

1.组件元数据装饰器（简称：装饰器）@Component【必备元素】

• 用来告知angular框架如何处理TypeScript类

• 实例代码

  //组件元数据装饰器
  @Component({
    //元数据
    selector: 'app-root',//css选择器，表示此组件可以通过app-root标签调用，组件的内容就是templateUrl定义
    templateUrl: './app.component.html',//templateUrl模板，指定了一个html文件作为模板，最终在index.html中的app-root标签中显示
    styleUrls: ['./app.component.css']//styleUrls指向了一组css文件，可以指定html模板中的样式
  })
  //通过装饰器将元数据附加到TypeScript类上
  export class AppComponent {//定义了控制器，包含模板相关的所有属性和方法，与页面相关的逻辑都写在控制器中
    title = 'first-app';//属性的值会通过{{title}}显示到页面中,将模板和控制器连接起来，常见方式：插值表达式{{}}
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [//声明组件、指令和管道
      AppComponent
    ],
    imports: [//声明此模块依赖的其他模块
      BrowserModule//浏览器模块
    ],
    providers: [],//声明模块中提供了什么服务
    bootstrap: [AppComponent]//声明模块的主组件
  })
  export class AppModule { }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

2.模板Templete【必备元素】

• 通过组件自带的模板，定义组件的外观
• 模板以html的形式存在，告诉angular如何来渲染组件

3.控制器Controller【必备元素】

• 普通的TypeScript类，会被component的装饰器装饰
• 页面逻辑写在控制器中
• 模板显示数据，控制器处理数据

4.【可选的可注入对象】

• 注入属性@Inputs()：接受外部传入的数据，使父组件可以直接传递给子组件
• 提供器providers：做依赖注入
• 生命周期钩子Lifecycle Hooks

5.【可选的输出对象】

• 生命周期钩子Lifecycle Hooks
• 样式表styles
• 动画Animations
• 输出属性@Outputs：在组件间共享数据

四.Angular的启动过程

• index.html是Angular应用启动时加载的文件

• main.ts为Angular启动时加载的脚本

• 启动Angular

  • 添加npm的脚本命令Edit Configuration -> + -> npm ->自定义名称并选择start脚本
  • 点”播放“按钮运行脚本命令

• 启动后，Angular会自动侦测src文件夹信息的改变，任何改变都会刷新页面

五.开发准备

1.引入类库

• 将第三方类库安装到本地

  • 可以当前项目目录下使用npm install命令安装，如npm install jquery --save npm install bootstrap --save

• 将两个库引入到项目中

  • 修改angular-cli.json文件的styles和scripts

  • 添加内容

    "styles":[
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],
    "scripts":[
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
    ]
    1
    2
    3
    4
    5
    6
    7
    8

• 安装类型描述文件

  • 为了让typescript认识bootstrap和jquery的方法，需要引入类型描述文件

    npm install @types/jquery --save-dev npm install @types/bootstrap --save-dev

2.生成组件

• 生成组件（会生成到app文件夹下）

  • 在项目目录下使用命令ng g component navbar生成navbar组件——会生成4个文件并且更新app.module.ts，将新生成的组件注册到模块中
  • 在项目目录下使用命令ng g component footer生成footer组件
  • 在项目目录下使用命令ng g component search生成search组件
  • 在项目目录下使用命令ng g component carousel生成carouse组件
  • 在项目目录下使用命令ng g component product生成product组件
  • 在项目目录下使用命令ng g component stars生成stars组件

• 执行完生成组件的命令后，app文件夹下回多出6个组件包，并且app.module.ts中的declarations中会多出组件的声明，如下

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import { NavbarComponent } from './navbar/navbar.component';
  import { FooterComponent } from './footer/footer.component';
  import { SearchComponent } from './search/search.component';
  import { ProductComponent } from './product/product.component';
  import { StarsComponent } from './stars/stars.component';
  import { CarouselComponent } from './carousel/carousel.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      NavbarComponent,
      FooterComponent,
      SearchComponent,
      ProductComponent,
      StarsComponent,
      CarouselComponent
    ],
    imports: [
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28

六.开发app组件

• 在app.component.html中编辑页面布局

<app-navbar></app-navbar>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <app-search></app-search>
        </div>
        <div class="col-md-9">
            <div class="row">
                <app-carousel></app-carousel> 
            </div>
            <div class="row">
                <app-product></app-product>
            </div>
        </div>
    </div>
</div>
<app-footer></app-footer>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 开发导航栏

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">在线竞拍</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-ex1-collapse">
       <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="navbar-nav ">
        <li class="nav-item">
          <a class="nav-link" href="#">关于我们</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">联系我们</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">网站地图</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 开发底部栏

<div class="container">
  <hr>
  <footer>
    <div class="row">
      <div class="col-lg-12">
        <p>Made By Jack 2018</p>
      </div>
    </div>
  </footer>
</div>
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

• 开发左侧搜索内容

<form name="searchForm" role="form">
  <div class="form-group">
    <label for="productTitle">商品名称：</label>
    <input type="text" id="productTitle" placeholder="商品名称" class="form-control">
  </div>
  <div class="form-group">
    <label for="productPrice">商品价格：</label>
    <input type="text" id="productPrice" placeholder="商品价格" class="form-control">
  </div>
  <div class="form-group">
    <label for="productCatagory">商品类别：</label>
    <select id="productCatagory" class="form-control"></select>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-block">搜索</button>
  </div>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 开发轮播图

<div id="demo" class="carousel slide" data-ride="carousel">
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" class="slide-image">
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg" class="slide-image">
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg" class="slide-image">
    </div>
  </div>
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

• 开发商品组件

//模板代码
<!-- Angular指令ngFor含义（在页面上循环创建html）：循环products属性，每次循环的元素放在product变量中 -->
<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4" style="padding:20px;float: left;">
  <div class="img-thumbnail">
    <!-- 利用[]进行属性绑定，[]对标签属性括上，并在值中给出对应控制器的变量，则可以将变量值绑定给标签属性 -->
    <img [src]="imgUrl" style="width:100%">
    <div class="figure-caption">
      <h6 class="float-right">{{product.price}}元</h6>
      <h6><a href="#">{{product.title}}</a></h6>
      <p>{{product.desc}}</p>
    </div>
    <div>
      <!-- 表示star组件中的rating属性，应该由product.rating传递进去 -->
      <app-stars [rating]="product.rating"></app-stars>
    </div>
  </div>
</div>

//控制器代码
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  public products: Array<Product>;

  public imgUrl = 'https://www.baidu.com/img/bd_logo1.png?where=super';

  constructor() { }

  // 组件被实例化的时候，此方法被调用一次，用来初始化组件中的数据
  ngOnInit() {
    this.products = [
      new Product (1, '第一个商品', 1.99, 3.5, '这是第一个商品描述', ['电子产品', '硬件产品']),
      new Product (2, '第二个商品', 2.99, 2.5, '这是第二个商品描述', ['电子产品']),
      new Product (3, '第三个商品', 3.99, 0.5, '这是第三个商品描述', ['电子产品', '硬件产品']),
      new Product (4, '第四个商品', 4.99, 1.5, '这是第四个商品描述', ['硬件产品']),
      new Product (5, '第五个商品', 5.99, 2.5, '这是第五个商品描述', ['电子产品', '硬件产品']),
      new Product (6, '第六个商品', 6.99, 4.5, '这是第六个商品描述', ['电子产品']),
      new Product (7, '第七个商品', 7.99, 3.5, '这是第七个商品描述', ['电子产品', '硬件产品']),
      new Product (8, '第八个商品', 8.99, 1.5, '这是第八个商品描述', ['硬件产品']),
      new Product (9, '第九个商品', 9.99, 2.5, '这是第九个商品描述', ['图书产品'])
    ];
  }

}

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

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

• 开发星级评分组件

//模板代码
<p>
  <!-- 属性绑定之一的样式绑定：下述样式绑定的含义是class的glyphicon-star-empty是否存在是根据star的值决定的 -->
  <span *ngFor="let star of stars" class="glyphicon glyphicon-star"
  [class.glyphicon-star-empty]="star"></span>
  <span>{{rating}}星</span>
</p>
//控制器代码
import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-stars',
  templateUrl: './stars.component.html',
  styleUrls: ['./stars.component.css']
})
export class StarsComponent implements OnInit {

  // rating用来接收产品组件传递来的评价分数
  // @Input装饰器表示rating的属性值应该由它的父组件传递给它
  @Input()
  public rating = 0;

  public stars: boolean[];

  constructor() { }
  
  ngOnInit() {
    this.stars = [];
    for (let i = 1; i <= 5; i++) {
      this.stars.push(i > this.rating);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33