前端 angular
文章平均质量分 67
橘柚子
荆棘中爬行
展开
-
Angular4 第一章 环境搭建
1.搭建环境 A. 安装nodejs,检测,npm -v B. 安装命令行工具angular-cli,检测 ng -v C. 创建新项目 ng new 项目名称, ng new first 生成新项目first,目录结构如下:first/src 项目原代码 first/src/app first/src/app/app.com原创 2017-11-09 11:04:42 · 235 阅读 · 0 评论 -
Angular Http服务通讯实战
实战对象:股票列表展示和修改表单,前端采用angular,后端采用php第一步:后端代码实现【angular/index.php】:获取数据<?php header("Access-Control-Allow-Origin: *");header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type,...原创 2018-05-09 14:57:48 · 1025 阅读 · 1 评论 -
Angular 第九章 构建和部署
1.构建:编译和合并 命令【ng build】生成的文件夹dist【1】编译,将typescript编译为javascript【2】合并,2.部署:与服务器整合dist里面的文件夹放到apache环境下的目录【www/angular/client】下面并修改加载静态资源路径在【www/angular/client/index.html】 <base href="/angular/clien...原创 2018-05-09 17:02:14 · 219 阅读 · 2 评论 -
angular 生命周期钩子项目实战—星级评价动态更改数据
1.在星级评价组件stars.component.html模板中<span *ngFor="let star of stars;let i=index" [class.glyphicon-star-empty]="star" (click)="starClick(i)" class="glyphicon glyphicon-star "></spa...原创 2018-05-03 11:39:48 · 142 阅读 · 0 评论 -
angular表单【模板式表单】
模版式表单:其数据模型是通过组件模版中的相关指令来定义,因为受限于HTML的语法,所以只适用于简单的表单场景。模版式表单指令指令隐式创建实例ngFormFormGroupngModelFormControlngModelGroupFormGroupngForm:这个指令用来代表整个表单,在angular应用里面他会被自动的添加到每一个form标签上,会隐式的创建一个FromGroup类的实例,这个...原创 2018-05-03 17:43:03 · 519 阅读 · 0 评论 -
Angular表单【响应式表单】
响应式表单:使用TypeScript创建底层模型,运用特定的指令将模版和底层ts数据模型绑定。【1】使用TypeScript创建底层数据模型:(1)简述数据模型:数据模型是指用来保存表单数据的数据结构,简称模型。他由定义在angular中FormsModule模块中的三个类组成,分别是:##1.FormControl:它是一个为单个表单控件提供支持的类,可用于跟踪控件的值和验证状态,此外还提供了一...原创 2018-05-04 09:56:37 · 344 阅读 · 0 评论 -
Angular4 第五章 数据绑定
1.Dom属性和HTML属性的关系(1)少量的HTML属性和DOM属性之间有着1:1的映射,如id(2)有些HTML属性没有对应的DOM属性,如colspan(3)有些DOM属性没有对应的HTML属性,如textContent(4)就算名字相同,HTML属性和DOM睡醒也不是同一个东西(5)HTML属性的值指定了初始值;DOM属性的值表示当前值。 DOM属性的值可以改变;HTML属...原创 2017-11-21 21:38:27 · 367 阅读 · 0 评论 -
Angular 响应式表单校验
一.angular校验器1.使用内建的验证规则Angular 提供了一些内建的 validators,在表单中使用它们。目前 Angular 支持的内建 validators 如下:required - 设置表单控件值是非空的。email - 设置表单控件值的格式是 email。minlength - 设置表单控件值的最小长度。maxlength - 设置表单控件值的最大长度。pattern - ...原创 2018-05-04 18:08:22 · 2134 阅读 · 0 评论 -
Angular 表单之状态字段
1.touched和untouched 用来判断用户是否获取过焦点,如果获取过焦点则touched=true;untouched=false,如果从来没有获取过焦点,touched=false;untouched=true,这两个字段控制错误信息是否显示。用户未访问密码时,我们控制密码的错误信息不显示:<!-- 密码合法和从来没获取过焦点就将错误信息隐藏 --><div ...原创 2018-05-04 18:37:47 · 1001 阅读 · 1 评论 -
Angular模板式表单校验
在模板式表单校验中只能将校验器方法包装成指令,用这些指令来校验表单1.模板校验器封装成指令,并使用它##1 要封装的校验器在app\validators\validators.ts import { FormGroup, FormControl } from "@angular/forms";//密码校验器export function passwordValidat...原创 2018-05-05 11:18:54 · 850 阅读 · 0 评论 -
第六章 管道
1.Angular4中常用管道(1)大小写转换管道uppercase将字符串转换为大写 ,lowercase将字符串转换为小写<p>将字符串转换为大写{{str | uppercase}}</p>str:string = 'hello'(2)日期管道date,日期管道符可以接受参数,用来规定输出日期的格式。<p>现在的时间是{{today | date:'yyy...原创 2018-04-27 14:19:02 · 128 阅读 · 0 评论 -
Angular 响应式表单实战
将对下图所示的表单进行数据模型的创建和数据模板的绑定【1】数据模型的创建import { Component, OnInit } from '@angular/core';import { ActivatedRoute, Router } from '@angular/router';import { Stock, StockService } from '../../stock.servic...原创 2018-05-05 18:36:40 · 817 阅读 · 0 评论 -
Angular 第八章 Http通讯
第一步:在app.module.ts中导入HttpModule模块import {HttpModule} from '@angular/http';imports: [ BrowserModule, HttpModule ]第二步:在要使用http服务的组件中注入http服务: constructor(http:Http) { } //在此处注入http服务第三步: 使...原创 2018-05-09 14:29:21 · 194 阅读 · 0 评论 -
content 钩子
1.父组件中AppComponent中实现 AfterContentInit,AfterContentChecked,AfterViewInit三个接口export class AppComponent implements AfterContentInit,AfterContentChecked,AfterViewInit { ngAfterViewInit(): void { co...原创 2018-05-02 16:30:56 · 128 阅读 · 0 评论 -
Angular4 第四章 依赖注入基本概念
在Angular中使用依赖注入,可以帮助我们实现松耦合,可以说只有在组件中使用依赖注入才能真正 的实现可重用的组件。如果我们有个服务product.service.ts,其中export了一个ProductService类,类中有一个getProduct方法。 如果不使用依赖注入,假设我们需要在product组件中使用这个服务时就会new一个ProductService类,但如果这个组件被转载 2017-11-17 15:47:02 · 281 阅读 · 0 评论 -
Angular4 第三章(中) 重定向路由,子路由,辅助路由
1.重定向路由:在用户访问一个特定的地址时,将其重定向到另一个指定的地址 eg : www.aaa.com => www.aaa.com/products www.aaa.com/x=>www.aaa.com/yconst routes:Routes = [{path:'', redirectTo: '/home', pa原创 2017-11-10 11:45:34 · 5683 阅读 · 2 评论 -
Augular4 第三章(上) 路由基本概念,路由的配置,路由的参数传递
1.路由的基本概念(1)Routes:路由的配置,保存着哪个URL对应展示哪个组件,以及在哪个RouterOutlet中展示组件(2)RouterOutlet:在html中标记路由内容呈现位置的占位符指令(3)Router :负责在运行时执行路由的对象,可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定的路由(4)RouterLink:在HTML中声明路由导航用...原创 2017-11-09 13:52:31 · 572 阅读 · 0 评论 -
Angular4 第五章 响应式编程
1.观察者模式与Rxjs(1)可观察对象,在初始化时注册观察者对象(2)观察者,在可观察对象发生变化调用观察者的方法做相应的处理import {Observable} from "rxjs"; //javascript的响应式编程包,angular框架依赖于它var subscription=Observable.from([1,2,3,4]) //创建流,就是可观察对象,也叫被观察者.f...原创 2017-11-23 17:13:59 · 397 阅读 · 0 评论 -
中间人模式
应用场景:搜索组件,购物车组件,主组件充当中间人(1)股票搜索组件中,发射一个EventEmitter 类型的事件addCart,并将股票信息也发射出去import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';@Component({ selector: 'app-search-sto原创 2017-11-25 11:30:06 · 449 阅读 · 0 评论 -
Angular4 组件生命周期钩子
1.组件生命周期调用顺序import { Component, OnInit, OnChanges, DoCheck, AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, SimpleChanges, Input } from '@angular/core';let logIndex:number=1原创 2017-11-25 14:58:40 · 777 阅读 · 0 评论 -
Angular4 变更检测和Docheck钩子
1.变更检测机制(1)目的:保证组件属性和浏览器的显示同步,浏览器里面发生任何异步变化都会触发“变更检测”,当变更检测运行时,会检测应用中所有的绑定关系。(2)检测策略: A:Default策略:检查所有组件 B.Onpush策略:阻止检查继续走下去(3)DoCheck钩子的调用import { Component, OnInit, Input, OnC原创 2017-11-25 16:28:45 · 6510 阅读 · 0 评论 -
Augular4 第二章 angular架构的基本概念
angular架构的基本概念(1)组件:是angular应用的基本构建块,你可以把组件理解为一段带有业务逻辑和数据的html, 组件有父组件,子组件,孙子组件(2)服务:用来封装可重用的业务逻辑,组件可以调用服务,服务也可以调用服务(3)指令:允许你向html添加自定义行为(4)模块:模块用来将应用中不同的部分组织成一个Augular框架可以理解的单元(5)原创 2017-11-09 11:23:11 · 418 阅读 · 0 评论 -
angular4 学习笔记一之主组件详解 app.component.ts
//整个应用的基础import { Component } from '@angular/core'; //@Component元数据装饰器,用装饰器定义了一个组件,所有的组件都必须用一个@Component装饰器来注解@Component({ selector: 'app-root', //这个组件可以通过app-root这个HTML标签来调用, <app-root>...原创 2018-04-20 14:39:27 · 5043 阅读 · 0 评论 -
View钩子
1.父组件调用子组件的方法(1)子组件的控制器export class TreeChildComponent implements OnInit { constructor() { } ngOnInit() { } greeting(name:string){ console.log('hello'+name) }}(2)父组件调用A.模板<app-tre...原创 2017-11-25 17:37:56 · 231 阅读 · 0 评论 -
ngContent指令
1.最简单的ng-content的使用,分为以下两步:##1.在子组件中用ng-content标记投影的位置<div style="border:solid 1px red"> <!-- 标记投影的位置 --> <ng-content></ng-content> </div>##2.在父组件调用子组件的html之间的内...原创 2018-05-02 15:18:11 · 852 阅读 · 0 评论 -
第六章 管道实战 关键字搜索股票
开发思路:应用响应式编程获取搜索关键字的值应用管道来根据股票关键字来过滤股票信息思路1实现:第一步:在app.module.ts中加入两个模块,FormsModule,ReactiveFormsModuleimports: [ BrowserModule, RouterModule.forRoot(routerConfig), FormsModule, R...原创 2018-04-28 17:18:51 · 260 阅读 · 0 评论