
Angular4
eaglezsx
这个作者很懒,什么都没留下…
展开
-
Typescript
TypeScript是微软开发的一门脚本语言,它是JavaScript的超集,它遵循ES6语言规范。Angular2框架是谷歌发明的,他用的就是TypeScript。ES5,ES6都是脚本语言的规范JavaScript和TypeScript是两种脚本语言。JavaScript实现了ES5,TypeScript实现了ES6搭建TypeScript开发环境需要安装编译器compiler,来把TypeSc原创 2017-11-01 09:15:26 · 3348 阅读 · 9 评论 -
Angular4-在线竞拍应用-数据绑定
使用插值表达式将一个表达式的值显示在模板上<h1>{{productTitle}}</h1>使用方括号将HTML标签的一个属性绑定到一个表达式上<img [src]="imgUrl">使用小括号将组件控制器的一个方法绑定为模板上一个事件的处理器<button (click)="toProductDetail()">商品详情</button>默认的绑定是单向的事件绑定如果处理事件的方法需要了解事件的属原创 2017-10-31 18:56:52 · 1020 阅读 · 1 评论 -
Angular4-在线竞拍应用-依赖注入
依赖注入:Dependency Injection 简称DI注入器 constructor(private productServie:ProductService){...}提供器providers:[{provider:ProductService,useClass:ProductService}]providers:[ProductService]//如果provider和useClass一原创 2017-10-31 18:44:47 · 1307 阅读 · 2 评论 -
Angular4-在线竞拍应用-路由
angular是单页应用需要配置路由来实现页面跳转。 路由的例子通过超链接导航新建一个项目,ng new router --routing然后用webstorm打开项目生成项目时添加了–routing参数后,会多生成一个app-routing.module.ts文件import { NgModule } from '@angular/core';import { Routes, RouterMo原创 2017-10-31 18:36:45 · 812 阅读 · 3 评论 -
Angular4-在线竞拍应用-开发组件
在线竞拍项目要开发七个组件 执行命令ng g component navbar生成导航栏组件。(这个命令的全称是ng generate component navbar)想学习Angular CLI指令可以查看README.md文档,也可以访问https://github.com/angular/angular-cli/blob/master/README.md然后依次执行,生成其他组件ng g原创 2017-10-31 17:09:05 · 843 阅读 · 5 评论 -
Angular4-在线竞拍应用-引入第三方的库
引入第三方类库进入到auction文件,在cmd中输入cnpm install jquery --save,save是将jquery的信息保存的在package.json文件中。或者在WebStorm中打开一个Terminal输入这个命令。之后在输入cnpm install bootstrap --save都装好后,可以看看package.json文件会多两句话"bootstrap": "^3.3.原创 2017-10-31 16:55:19 · 532 阅读 · 4 评论 -
Angular4-在线竞拍应用-项目启动过程
查看.angular-cli.json{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "auction" }, "apps": [ { "root": "src", "outDir": "dist", "a原创 2017-10-31 16:48:00 · 474 阅读 · 4 评论 -
Angular4-在线竞拍应用-项目结构分析
用WebStorm打开auction项目auction e2e:端到端的测试目录node_modules:下载的包src:应用源代码目录.angular-cli.json:angular的命令行工具的配置文件.editorconfig:给IDE用的配置文件.gitignore:给Git用的配置文件karma.conf.js:测试用的配置文件package.json:npm工具用的配原创 2017-10-31 16:28:32 · 760 阅读 · 1 评论 -
Angular4-在线竞拍应用-开发环境的搭建
安装Nodejs,Angular CLI,WebStorm安装Node.js去Node.js的官网,https://nodejs.org/en/,点击下载按钮,node-v6.11.3-x64.msi,直接下一步下一步安装即可,软件会自动写入环境变量中,这样就能直接在cmd命令窗口中直接使用node或npm(包管理工具)命令。安装完后执行node -v,会显示出其版本号,代表安装成功。Angular原创 2017-10-31 16:24:13 · 559 阅读 · 2 评论 -
Angular4介绍
Angular是由谷歌维护的一个开源JavaScript框架。目前有两个大的版本,一个是Angular 1.5,一个是Angular 4.0。两个版本的差别非常大,4.0是一个完全重写的版本。Angular1.5叫AngularJS,Angular 2.0之后的都只叫Angular。Angular新特性全新的命令行工具AngularCLI服务器端渲染移动和桌面的兼容组件:是Angular应用原创 2017-10-31 16:14:46 · 3150 阅读 · 3 评论 -
Angular4-在线竞拍应用-管道
<p>我的生日是{{birthday}}</p>birthday:Date=new Date();显示结果为我的生日是Sun Oct 01 2017 19:31:09 GMT+0800 (中国标准时间)修改html<p>我的生日是{{birthday|date}}</p>显示结果为我的生日是Oct 1, 2017还可以用多个管道,修改html<p>我的生日是{{birthday|date|upper原创 2017-11-01 08:22:29 · 1098 阅读 · 5 评论 -
Angular4-在线竞拍应用-组件间通信
angular应用就是一个组件树 要创建松耦合的组件 组件通信的例子新生成一个项目ng new demo2或者通过webstorm,File,New,Project..,Angular CLI,然后把项目名改成demo2因为要用双向绑定,在app.module.ts中添加import{FormsModule} from '@angular/forms'imports: [ BrowserM原创 2017-11-01 08:26:42 · 592 阅读 · 2 评论 -
Angular4-在线竞拍应用-组件的生命周期
红色的被调用一次,绿色的会被调用多次。这里分为了三个阶段,组件初始化阶段,变化检测,组件销毁。会在组件初始化后看到组件,在变化检测阶段让属性值和页面展示保持一致。变化检测中的四个方法和组件初始化中的四个方法是一样的。一共只有9个方法。生命周期的例子新建一个项目demo3新建组件ng g component lifeexport class LifeComponent implements OnIni原创 2017-11-01 08:39:35 · 1481 阅读 · 6 评论 -
Angular4-在线竞拍应用-ngContent指令
ngContent指令新建项目demo6新建组件ng g component child投影,在某些情况下,需要动态改变模板的内容,可以用路由,但路由是一个相对比较麻烦的东西,而我要实现的功能没有那么复杂,,没有什么业务逻辑,也不需要重用。这个时候可以用投影。可以用ngContent将父组件中任意片段投影到子组件中修改child.component.html<div class="wrapper">原创 2017-11-01 08:50:16 · 1684 阅读 · 4 评论 -
Angular4-在线竞拍应用-与服务器通信
创建web服务器使用Nodejs创建服务器使用Express创建restful的http服务监控服务器文件的变化用webstorm建立一个名为server的空项目在文件中,执行命令npm init -y执行cnpm i @types/node –save在server中新建一个tsconfig.json{ "compilerOptions": { "module": "commo原创 2017-11-01 09:00:07 · 2335 阅读 · 7 评论 -
Angular4-在线竞拍应用-响应式编程
可观察者Observable(流):表示一组值或者事件的集合观察者Observer:一个回调函数的集合,它知道怎样去监听被Observable发送的值订阅Subscription:表示一个可观察对象,主要用于取消注册操作符Operators:纯粹的函数,使开发者可以以函数编程的方式处理集合。A被赋值为B和C的值。这时,如果我们改变B的值,A的值并不会随之改变。而如果我们运用一种机制,当B或者原创 2017-10-31 19:14:16 · 1664 阅读 · 5 评论