我爱编程

第一、二章 Angular环境搭建与组件开发

2018-01-02  本文已影响332人  耦耦

Angular 版本

Angular 4.0并不是在原有基础上改的，而是一个完全重写的版本，不同于Angular 1.5。
Angular 2.0之前的版本，统一称为AngularJs。Angular 2.0之后的版本就称之为Angular。

第一章：简介

1、AngularJs的优点

2、AngularJs的一些问题

3、AngularJs的新特性

4、AngularJs架构

AngularJs是典型的MVC架构。

AngularJs架构示例图 Angular的架构

5、AngularJs与React对比

React的优点

6、AngularJs与Vue对比

Vue的优点

Angular与AngularJs、React.js、Vue.js

第二章：开始学习Angular

1、Angular程序架构

Angular 程序框架

2、Angular开发环境

如果你的PC上安装过nodejs或npm，可能会涉及到版本过低的问题，更新的话就自行百度吧！

3、新建项目

ng new auction   //auction为项目的名称

执行这个命令之后，angular命令行工具工具会在当前所在路径下新建一个名为auction的项目。

4、组件的必备元素

模板和控制器通过数据绑定来讲控制器中的数据绑定到模板上，以上是称之为一个属性所必须的所有东西。当然还有一些可选的注入对象，比如：

Angular项目结构

Angular项目结构详解点击这里查看

5、启动Angular过程介绍

要解释Angular的启动过程，要明白三个问题：

我们先来看看前面两个问题

在.angular.cli.json文件里面，有一个apps的数组，数组里面有一些属性，其中：

main.ts的文件内容：

//前面是导入几个必要的库
import { enableProdMode } from '@angular/core';   //用来关闭angular的开发者模式
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';    //整个应用的主模块
import { environment } from './environments/environment';   //导入环境配置

if (environment.production) {     //判断，如果是生产环境，就关闭开发者模式
  enableProdMode();
}

//调用bootstrapModule方法，传入AppModule作为启动模块来启动应用。这里是整个应用程序的起点。
platformBrowserDynamic().bootstrapModule(AppModule) 
  .catch(err => console.log(err));

在执行到AppModule时，angular会分析AppModule要依赖哪些模块，并加载那些模块，我们可以在app/app.module.ts里面看到所需要导入的模块。然后看这些模块需要哪些模块，以此类推，直到加载完所有的模块。加载完成后，angular会在index.html中寻找启动模块指定的主组件（也就是app.module.ts里面的bootstrap: [AppComponent]）对应的css选择器（app.component.ts里面的app-root）。

启动过程了解之后，我们看一下实际的效果：

下面是运行界面：

运行界面

到这里，angular的启动过程就已经完成了，我们接着往下来！

6、开发准备

一般来说，我们会用到bootstrap和jQuery，下面就以安装这两个库为例。

首先设置第三方的依赖。

一般情况下，如果要在angular项目中使用第三方类库， 需要一下几步

下面开始来写代码

angular框架的设计目标中，最主要的设计目标之一就是帮助开发人员开发出可重用的开发组件。现在很多特性都是为这个目标服务的。所以在开发angular应用时也要用一种组件化的思路来思考要解决的问题。

利用组件来实现下面这个页面。

目标页面

angular命令行工具提供了自动生成组件的功能。通过命令行在auction目录下生成一个组件，app那个组件命令行工具在创建项目的时候就已经创建了，把其他需要的六个组件生成出来就可以了。

以上每个命令执行时都会生成css、html、ts以及测试文件spec.ts，同时还会更新app.module.ts文件。执行完以上命令后，app这个目录下会多出六个文件夹，然后在app.module.ts文件里面，在declarations的这个属性里多了刚声明的六个组件。

到这里呢，就已经用angular的命令行工具把我们要编写的代码写出来了。接下来只需要一个个编写组件就可以，在这个过程中我们会一步步强化组件的概念。

7、 开发app组件

前面说了这么多，终于要开始写代码了，上面我们把页面分成了七个组件，现在我们从最基础的app组件开始，首先来改一下app.component.html文件

每一个组件都可以用app.module.ts文件里面selector声明的标签来引用。

根据上面的目标页面设置下面的布局，具体的bootstrap的标签的使用，你可以参考官网的Bootstrap全局样式

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>

app.component.css

.carousel-container{
    margin-bottom: 40px;
}

8、开发navbar和footer组件

navbar.component.html

<nav class="navbar navbar-inverse navbar-fixed-top">
    <!--inverse黑底白字-->
    <!--fixed-top是固定在顶部-->
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">在线竞拍</a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">网站地图</a></li>
            </ul>
        </div>
    </div>
</nav>

footer.component.html

<div class="container">
    <hr>
    <div class="row">
        <div class="col-lg-12">
            <p>慕课网Angular入门实战</p>
        </div>
    </div>
</div>

这两个组件比较简单

9、开发search和carousel组件

search.component.html

<form name="searchForm" role="form">
    <div class="form-group">
        <label for="productTitle">商品名称</label>
        <input type="text" id="productTitle" placeholder="商品名称" class="form-control">
        <label for="productPrice">商品价格</label>
        <input type="text" id="productPrice" placeholder="商品名称" class="form-control">
        <label for="productCategory">商品类别</label>
        <select name="" id="productCategory" class="form-control"></select>
    </div>
    <div class="form-group">
        <button type="button" class="btn btn-primary btn-block">搜索</button>
    </div>
</form>

carousel.component.html

<div class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li class="active"></li>
        <li></li>
        <li></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img class="slide-image" src="http://placehold.it/800x300/">
        </div>
        <div class="item">
            <img class="slide-image" src="http://placehold.it/800x300/">
        </div>
        <div class="item">
            <img class="slide-image" src="http://placehold.it/800x300/">
        </div>
    </div>
    <a href="javascript:$('.carousel').carousel('prev')" class="left carousel-control">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="javascript:$('.carousel').carousel('next')" class="right carousel-control">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

carousel.component.css

.slide-image{
    width: 100%;
}

10、开发product组件

product.component.html

<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4">
    <div class="thumbnail">
        <img [src]="imgUrl">
        <div class="caption">
            <h4 class="pull-right">{{product.price}}</h4>
            <h4><a href="">{{product.title}}}</a></h4>
            <p>{{product.desc}}</p>
        </div>
        <div>
            <app-stars [rating]="product.rating"></app-stars>
        </div>
    </div>
</div>

product.component.ts

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

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

    private products: Array<Product>;

    private imgUrl = 'http://placehold.it/320x150';

    constructor() { }

    ngOnInit() {
        this.products = [
            new Product(1, '第一个商品', 1.99, 3.5, '这是第一个商品，是我在学习慕课网Angular入门实战时创建的', ['电子产品', '硬件设备']),
            new Product(2, '第二个商品', 2.99, 2.5, '这是第二个商品，是我在学习慕课网Angular入门实战时创建的', ['图书']),
            new Product(3, '第三个商品', 3.99, 4.5, '这是第三个商品，是我在学习慕课网Angular入门实战时创建的', ['硬件设备']),
            new Product(4, '第四个商品', 4.99, 1.5, '这是第四个商品，是我在学习慕课网Angular入门实战时创建的', ['电子产品', '硬件设备']),
            new Product(5, '第五个商品', 5.99, 3.5, '这是第五个商品，是我在学习慕课网Angular入门实战时创建的', ['电子产品']),
            new Product(6, '第六个商品', 6.99, 2.5, '这是第六个商品，是我在学习慕课网Angular入门实战时创建的', ['图书']),
        ];

        this.products.push(new Product(7, '第六个商品', 7.99, 1.5, '这是第七个商品，是我在学习慕课网Angular入门实战时创建的', ['图书']))
    }

}

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

11、开发stars组件

stars.component.html

<p>
    <span *ngFor="let star of stars" class="glyphicon glyphicon-star glyphicon-star-empty"
    [class.glyphicon-star-empty]="star"></span>
    <span>{{rating}}星</span>
</p>

stars.component.ts

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

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

    @Input()
    private rating = 0;

    private stars: boolean[];

    constructor() { }

    ngOnInit() {
        this.stars = [];
        for (let i = 1; i <= 5; i++){
            this.stars.push(i > this.rating);
        }
    }

}

小结

Angular的环境搭建及基本的组件开发到这里就差不多了。简单的在线竞拍网站也构建完成，接下来会对Angular的每个功能进行详细的讲解，然后对在线竞拍网站进行改造。

上一篇下一篇

猜你喜欢

热点阅读