最近搞到手了一部 Angular4 的视频教程, 这几天正好有时间变学了一下, 可以用来做一些前后端分离的网站, 也可以直接去打包 web app。
先上个效果图:
运行
- ng -v
- @angular/cli: 1.2.0
- node: 8.1.2
- os: win32 x64
- @angular/* 4.2.5
- ...
好吧, 那就顺便写个笔记 / 教程 / 备忘 / 博客咯
安装的时候选择全局安装
- npm install @angular/cli -g
运行命令
- ng new AngularStudy
其中
是项目文件夹名称
- AngularStudy
在当前创建的项目目录下运行 如下命令
或者
- ng serve
, 然后在浏览器中进入所提示的地址, 默认是
- npm run start
- http://127.0.0.1:4200/
当你访问页面的时候出现 AngularLogo 的时候, 说明你的项目已经创建成功了, 反之, 请检查错误信息或日志
提示: 在我学习的过程中遇到了一个问题, 就是在 Windows10 系统中, 当你的用户文件夹是中文名称的时候, 你就要小心了, 你很有可能会在创建过程中遇到错误, 具体是什么错误... 额我忘了, 那个错误百度谷歌都找不到答案, 如果你解决不了, 检查一下是不是这个问题, 百度有修改用户文件夹名称的教程 (需要修改注册表, 小白慎入)
在我们的开发流程中, 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 instakll @types/bootstrap --save-dev
安装这两个类型描述模块的目的是让 TypeScript 认识 jQuery 和 Bootstrap 的语法, 进而能在 ts 文件中使用它们
OK, 是不是很简单呢
Angular 毕竟是有 Google 做后台的, 功能方面也相当齐全, component 不需要我们手动地去创建, 只需要一条命令即可生成
在项目根目录运行
生成导航条组件
- ng g component navbar
这条命了的意思就是
, 简单明了
- angular generate component navbar
有了这条命令, 我们就能很轻易地生成项目中的组件
组件名 | 用途 |
---|---|
app | 项目自带的默认 component |
navbar | 网页 / APP 导航条 |
search | 搜索区域 |
product | 商品详情 |
stars | 星级评分 |
foot | 底部信息 |
就这样, 我们的项目骨架就搭建完成了
模块创建完成了, 那么, 我们下一步需要做什么? 当然是就像拼图一样, 使用创建好的模块, 拼接起来, 成为一个简单的单页面应用咯!
至于我们的拼图底板是什么, 分析 Angular 的启动,
作为默认显示出来的 component, 肯定是在
- app
中进行拼接了。
- app.component.html
打开我们的
, 删除里面无用的内容, 使用我们刚刚创建的 component 在里面拼图吧
- app.component.html
一般情况下, 我们创建的组件所对应的 CSS 元素选择器 (也就是标签), 名字是
- app-componentName
最终拼合结果如下所示, 这样, 我们的单页面应用的基本骨架就搭建出来啦~
- <!--导航条-->
- <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>
- <!--/底部信息-->
Angular 的组件复用是很重要的一个功能, 就比如上面的星级评分组件, 不管是商品展示, 还是用户评论打分, 都会用到, 只需要一次知错, 就能一直使用
组件 html 内容如下
- <!--Bootstrap导航条-->
- <nav class="navbar navbar-inverse navbar-fixed">
- <!--导航条内容容器-->
- <div class="container">
- <!--导航条头部-->
- <div class="navbar-header">
- <button class="navbar-toggle btn" data-toggle="collapse" data-target="#navbar-collapse-menu">
- <span class="icon-bar">
- </span>
- <span class="icon-bar">
- </span>
- <span class="icon-bar">
- </span>
- </button>
- <!--//商标/Logo-->
- <a class="navbar-brand" href="javascript:void(0)">
- 在线竞拍
- </a>
- </div>
- <!--/导航条头部-->
- <!--导航条列表菜单-->
- <div class="collapse navbar-collapse" id="navbar-collapse-menu">
- <ul class="nav navbar-nav">
- <li>
- <a href="javascript:void(0)">
- 关于我们
- </a>
- </li>
- <li>
- <a href="javascript:void(0)">
- 联系我们
- </a>
- </li>
- <li>
- <a href="javascript:void(0)">
- 网站地图
- </a>
- </li>
- </ul>
- </div>
- <!--/导航条列表菜单-->
- </div>
- <!--/导航条内容容器-->
- </nav>
- <!--/Bootstrap导航条-->
- .main-wrap{
- margin-top: 70px;
- }
这时候, 我们需要在 css 文件中添加样式, 使中间部分内容乡下偏移约 70px, 因为 fix 格式的导航条会盖住内容。
默认的全局 css 文件是
当然也可以在配置文件中更改或者添加新的 css 文件
- /src/style.css
当然, 每一个组件对应的 css 样式我们应该分开写, 比如 navbar 的 css 写在 navbar.component.css 文件中
由于尚未编写业务逻辑, 简单地先做一下占位即可
- <div class="container">
- <hr>
- <footer>
- <div class="row">
- <div class="col-md-12">
- <p>
- Angular打造竞拍网站
- </p>
- </div>
- </div>
- </footer>
- </div>
- footer{
- text-align: center;
- }
就是上面那个套路, 都是使用 Bootstrap 框架所带的那些 css 样式, 直接贴代码, 学过的应该都能看懂。
- <form role="form" name="searchForm">
- <div class="form-group">
- <label for="productTitle" class="control-label">
- 商品名称 :
- </label>
- <input id="productTitle" type="text" class="form-control" placeholder="商品名称">
- </div>
- <div class="form-group">
- <label for="productPrice" class="control-label">
- 商品价格 :
- </label>
- <input id="productPrice" type="number" class="form-control" placeholder="商品价格">
- </div>
- <div class="form-group">
- <label for="productCategory" class="control-label">
- 商品类别 :
- </label>
- <select id="productCategory" class="form-control">
- </select>
- </div>
- <div class="form-group">
- <label for="productTitle" class="control-label">
- 商品名称 :
- </label>
- <input type="submit" class="btn btn-primary btn-block" value="搜索">
- </div>
- </form>
轮播图稍微有些复杂, 因为不仅仅使用了 HTML, 同时也使用了少量的 JavaScript 和 jQuery。当然我相信,来学 Angular 的肯定不是小白咯。
当然, 这一部分主要就是实现一个简单的轮播图, 也没有用到什么 Angular 代码
- <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 src="http://placehold.it/800x300" alt="carousel" class="slide-image">
- </div>
- <div class="item">
- <img src="http://placehold.it/800x300" alt="carousel" class="slide-image">
- </div>
- <div class="item">
- <img src="http://placehold.it/800x300" alt="carousel" class="slide-image">
- </div>
- </div>
- <!--/轮播图片区域-->
- <!--轮播图控制按钮-->
- <a href="javascript:$('.carousel').carousel('prev')" class="left carousel-control">
- <i class="glyphicon glyphicon-chevron-left">
- </i>
- </a>
- <a href="javascript:$('.carousel').carousel('next')" class="right carousel-control">
- <i class="glyphicon glyphicon-chevron-right">
- </i>
- </a>
- <!--/轮播图控制按钮-->
- </div>
- .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<string>
- ) {
- }
- }
然后, 在这个 ts 文件中进行商品 (对象) 的实例化(因为现在还没有学到 http)
- export class ProductComponent implements OnInit {
- public products: Array<Product>;
- 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 模板中
方法会在 component 实例化的时候自动调用一次, 这个知识点稍后会更详细讲到
- ngOnInit()
有了数据之后, 下一步当然是制作 component 模板咯, 顺便吧数据也显示出来呗 (满满的都是套路额)
- <div class="col-sm-4 col-md-4 col-lg-4" *ngFor="let product of products">
- <div class="thumbnail">
- <img src="http://placehold.it/320x150" alt="商品图片">
- <div class="caption">
- <h4 class="pull-right">
- ¥{{product.price}}
- </h4>
- <h4>
- <a>
- {{product.title}}
- </a>
- </h4>
- <p>
- {{product.desc}}
- </p>
- </div>
- <div>
- <app-stars>
- </app-stars>
- </div>
- </div>
- </div>
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')
- }
- }
- }
- }
如何注入呢? 上面有一个装饰器
标识着 rating 变量是外部注入的
- @Input()
那么, 在实例化
的位置......
- star component
就是这里!!!
- <app-stars [rating]="product.rating">
- </app-stars>
就是这么简单
接下来当然是模板代码咯, 关键点都在这里
- <p>
- <i *ngFor="let star of stars" class="fa"
- [class.fa-star]="star==='full'"
- [class.fa-star-half-o]="star==='half'"
- [class.fa-star-o]="star==='empty'"
- ></i>
- <span>{{rating}}星</span>
- </p>
这里首先使用
指令对
- ngFor
标签 (星星) 进行遍历
- i
接下来使用进行样式绑定, 根据控制器里组合成的数组进行星星标签的生成 这里使用了
- [class.xxx]
图标
- Font-Awesome
代码只要稍微细心看就能看懂, 主要就在于样式绑定, 根据数组中不同的字符串绑定不同的星星样式
就这样, 我们的基本组件已经实现了大部分了, 等有空了进行下一章的学习......
来源: http://www.cnblogs.com/wxjblog/p/7104998.html