1.环境搭配
- 安装nodejs 使用npm -v 来查看版本
- 安装angular cli 使用命令(npm install -g @angular/cli) 使用 ng v 来查看版本
-
安装开发工具,使用的是 visual studio code
- 创建项目 ng new projectname
- 进入项目 cd projectname
- 启动项目 ng serve
2.认识angular项目的默认文件
3.开发准备
- 安装bootstrap、jquery
- npm install bootstrap --save(不指定版本) npm install bootstrap@3.3.7 --save (指定版本)
- npm install jquery --save(不指定版本) npm install jquery@1.12.4 --save (指定版本)
-
在angular.json文件中导入
- "node_modules/jquery/dist/jquery.js"
- "node_modules/bootstrap/dist/js/bootstrap.js"
- "node_modules/bootstrap/dist/css/bootstrap.css"
- 安装描述文件(让ts能识别)
- npm install @types/jquery --save-dev
- npm install @types/bootstrap --save-dev
- tips
- --save 是你发布之后还需要依赖的东西
- --save-dev 是你开发时候依赖的东西
- 组件创建
-
<!-- 导航栏组件 --> ng g c navbar <!-- 底边栏组件 --> ng g c footer <!-- 搜索栏组件 --> ng g c search <!-- 商品栏组件 --> ng g c product <!-- 轮播图组件 --> ng g c carousel <!-- 星级组件 --> ng g c stars
-
- app.component.html布局
-
<!-- 导航栏 --> <app-navbar></app-navbar> <!-- 中间栏 --> <div class="container"> <!-- 侧边搜索栏 --> <div class="col-md-3 col-xs-12 search-container"> <app-search></app-search> </div> <!-- 右边内容栏 --> <div class="col-md-9 col-xs-12"> <!-- 轮播图 --> <div class="row carousel-container"> <app-carousel></app-carousel> </div> <!-- 商品信息 --> <div class="row"> <app-product></app-product> </div> </div> </div> <!-- 底边栏 --> <app-footer></app-footer>
.carousel-container, .search-container { margin-bottom: 50px; }
-
- 导航栏界面代码
-
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">在线竞拍</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">竞拍首页</a> </li> <li> <a href="#">关于我们</a> </li> <li> <a href="#">联系我们</a> </li> <li> <a href="#">网站地图</a> </li> </ul> </div> </div> </nav>
-
-
底边栏界面
-
<div class="text-center text-muted footer"> <footer class="container"> angular实战练习 </footer> </div>
.footer { position: fixed; bottom: 0; height: 50px; width: 100%; line-height: 50px; background-color: #f2f2f2; }
-
-
搜索栏界面
-
<form action="" role="form"> <div class="form-group"> <label for="">商品名称</label> <input type="text" class="form-control" id="" placeholder="商品名称"> </div> <div class="form-group"> <label for="">商品价格</label> <input type="text" class="form-control" id="" placeholder="商品价格"> </div> <div class="form-group"> <label for="">商品类别</label> <select name="product-type" id="product-type" class="form-control"> <option value="type1">手机</option> <option value="type2">平板</option> <option value="type3">笔记本</option> <option value="type4">台式机</option> </select> </div> <button type="button" class="btn btn-primary btn-block">搜索</button> </form>
-
-
轮播图界面
-
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- 轮播(Carousel)指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播(Carousel)项目 --> <div class="carousel-inner"> <div class="item active"> <img src="../../assets/images/xiaomi4.jpg" alt="First slide"> </div> <div class="item"> <img src="../../assets/images/xiaomi6.jpg" alt="Second slide"> </div> <div class="item"> <img src="../../assets/images/xiaomi7.jpg" alt="Third slide"> </div> </div> <!-- 轮播(Carousel)导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </a> </div>
.carousel-inner { position: relative; height: 300px; } @media (max-width: 768px) { .carousel-inner { position: relative; height: 120px; } } .carousel-indicators { position: absolute; bottom: 0; left: 50%; z-index: 15; width: 60%; padding-left: 0; margin-left: 0; transform: translateX(-50%); text-align: center; list-style: none; } .carousel-indicators li { margin: 8px 6px; } .carousel-indicators li.active{ margin: 8px 6px; height: 10px; width: 16px; border-radius: 8px; } ul, ol { margin-top: 0; margin-bottom: 0; }
-
-
商品信息界面
-
<div class="row"> <div class="col-lg-4 col-md-4 col-xs-12" *ngFor="let product of products"> <div class="thumbnail"> <img src=" https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3671643272,946673945&fm=26&gp=0.jpg" alt=""> <div class="caption"> <h3 class="pull-right">¥{{product.price}}</h3> <h3>{{product.name}}</h3> <p>{{product.desc}}</p> <p> <!--星级评价的rating属性由产品的rating属性传进去--> <app-stars [rating]="product.rating"></app-stars> <span> {{product.rating}} 星</span> </p> </div> </div> </div> </div>
.thumbnail:hover { transform: scale(1.05) } .thumbnail img { width: 100%; }
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<Products>; constructor() { } ngOnInit() { this.products = [ new Products(1, '第一个商品', 1.99, '这是第一个商品,相关的商品信息', 1.5, ['手机', '苹果']), new Products(2, '第二个商品', 2.99, '这是第二个商品,相关的商品信息', 2.5, ['手机', '苹果']), new Products(3, '第三个商品', 3.99, '这是第三个商品,相关的商品信息', 3.5, ['手机', '苹果']), new Products(4, '第四个商品', 4.99, '这是第四个商品,相关的商品信息', 4.5, ['手机', '苹果']), new Products(5, '第五个商品', 5.99, '这是第五个商品,相关的商品信息', 3.5, ['手机', '苹果']), new Products(6, '第六个商品', 6.99, '这是第六个商品,相关的商品信息', 2.5, ['手机', '苹果']), new Products(7, '第七个商品', 7.99, '这是第七个商品,相关的商品信息', 1.5, ['手机', '苹果'])] } } export class Products { constructor( public id: number, public name: string, public price: number, public desc: string, public rating: number, public type: Array<string> ) { } }
-
-
星级界面
-
<!-- 根据ngclass和ngstyle来判断是否为实心星星 --> <span *ngFor="let star of stars" class="glyphicon glyphicon-star" [ngClass]="{'glyphicon-star-empty':!star}" [ngStyle]="{'color': !star?'yellowgreen':'#eee'}"></span>
import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-stars', templateUrl: './stars.component.html', styleUrls: ['./stars.component.css'] }) export class StarsComponent implements OnInit { //加一个input装饰器:星级评价组件StarsComponent的rating属性应该由它的父组件传递给它 @Input() //定义一个属性:用来接收产品组件传给它的星级评价数值,默认值是0 private rating:number=0; //定义一个Boolean类型的数组:装5颗星 public stars : boolean[]; constructor() { } ngOnInit() { this.stars=[]; for(var i=1;i<=5;i++){ this.stars.push(i>this.rating); } } }
-
-
初版界面