angular2
Angular2学习笔记
前言阴差阳错，当初在选择写网站的时候选择了使用Angular2+RESTfulｌ，现在想起来，这个选择可能有点轻率了。虽然这套框架我个人觉得可能的确比较适合做移动端Web的开发，但是由于网站开发的经验明显不足，加上这套技术还不是相当的成熟，在学习的过程中走了很多的弯路。而且，功利一点的讲，对于找工作的帮助可能并不是很大，很多Web相关的职务招的都是Java方向的，而我直接跳过这种传统框架直接接触新
日期 2023-06-12 10:48:40Angular2入门系列（五）———— 路由参数设置
Angular2入门系列（五）———— 路由参数设置路由配置： { path: '', component: CarProFile, children: [ { path: 'add', component:
日期 2023-06-12 10:48:40![[Angular2] Map keyboards events to Function](/scriptcss/images/15.png)
[Angular2] Map keyboards events to Function
The idea is when we tape the arrow keys on the keyboard, we want the ball move accodingly. const leftArrow$ = Observable.fromEvent(document, 'keydown') .filter(event => event.key
日期 2023-06-12 10:48:40[Angular2 Router] Guard: CanLoad
'canLoad' guard can decide whether a lazy load module can be loaded or not. @Injectable() export class CanLoadPokemon implements CanLoad { constructor(private authService: AuthService) {
日期 2023-06-12 10:48:40![[Angular2 Router] Setup page title with Router events](/scriptcss/images/16.png)
[Angular2 Router] Setup page title with Router events
Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/mergeMap'; import { Component, OnInit } from '@angular/core'; import { Router, Navigation
日期 2023-06-12 10:48:40![[Angular2 Form] Model Driven Form Custom Validator](/scriptcss/images/12.png)
[Angular2 Form] Model Driven Form Custom Validator
In this tutorial we are going to learn how simple it is to create custom form field driven validators while using Angular 2 model driven forms. These type of validators are really just plain function
日期 2023-06-12 10:48:40[Angular2 Animation] Use Keyframes for Fine-Tuned Angular 2 Animations
When easing isn’t enough to get the exact animation you want, you can leverage keyframes to define and precise styles and steps over time. Keyframes allow you to achieve pretty much any Angular 2 ani
日期 2023-06-12 10:48:40[Angular2] @Ngrx/store and @Ngrx/effects learning note
Just sharing the learning experience related to @ngrx/store and @ngrx/effects. In my personal opinion, I fell there are tow different types of coding style by using @ngrx/store only @
日期 2023-06-12 10:48:40[Angular2 Form] Nested formGroup, and usage of formGroupName
We can nest formGorup: this.reactiveForm = fb.group({ username: [ '', [ Validators.required, Validators.minLength(3) ] ], pwds: fb.g
日期 2023-06-12 10:48:40[Angular2 Form] Validation message for Reactive form
<div class="form-field"> <label>Confirm Password: </label> <input type="text" formControlName="confirm" [(ngModel)]="signup.confirm" name="confrim"> <div *ng
日期 2023-06-12 10:48:40![[Angular2 Form] Reactive Form, FormBuilder](/scriptcss/images/11.png)
[Angular2 Form] Reactive Form, FormBuilder
Import module: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MessageComponent } from './message.component'; import messageRoutes from './message.
日期 2023-06-12 10:48:40[Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route
In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router. We are going to learn how to use a CanDeactivate route guard to ask the user if he really wants t
日期 2023-06-12 10:48:40[Angular2 Form] Use RxJS Streams with Angular 2 Forms
Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative
日期 2023-06-12 10:48:40[Angular2 Form] Understand the Angular 2 States of Inputs: Pristine and Untouched
Angular 2’s ngModel exposes more than just validity, it even gives you the states of whether the input has been “touched” or changed. This lesson explains and compares those state
日期 2023-06-12 10:48:40[Angular2 Form] Style Validation in Angular 2 Forms
Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each time the input’s validity changes. These classes allow you easily add your
日期 2023-06-12 10:48:40[Angular2 Form] Group Inputs in Angular 2 Forms with ngModelGroup
The ngModelGroup directive allows you to group together related inputs so that you structure the object represented by the form in a useful and predictable way. ngModelGroup is of
日期 2023-06-12 10:48:40![[Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive](/scriptcss/images/13.png)
[Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive
You can easily show the user which route they are on using Angular 2’s routerLinkActive. Whenever a route matches the routerLink defined on the element, then the routerLInkActive&
日期 2023-06-12 10:48:40Angular2：从AngularJS 1.x 中学到的经验
小编说：Angular 2 的最终版正式发布，Angular 1 的全平台继任者从此诞生。在上一篇文章中我们讨论了Web 的进化和前端开发的变革对Angular 2诞生的推动，不过不只如此， 1.x中存在的一些缺陷，不值得让我们继续在其中整合强大的工具。 本文选自《迈向Angular 2》，让我们看看Angular2解决了哪些在1.x版本中困扰我们的问题。 Controller An
日期 2023-06-12 10:48:40[Angular2 Router] Guard: CanLoad
'canLoad' guard can decide whether a lazy load module can be loaded or not. @Injectable() export class CanLoadPokemon implements CanLoad { constructor(private authService: AuthService) {
日期 2023-06-12 10:48:40[Angular2 Form] Reactive Form, FormBuilder
Import module: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MessageComponent } from './message.component'; import messageRoutes from './message.
日期 2023-06-12 10:48:40[Angular2 Router] Index router
Index router as default router. import {RouterModule} from "@angular/router"; import {NotFoundComponent} from "./shared-components/not-found/not-found.component"; const indexRoute = {path: '
日期 2023-06-12 10:48:40[Angular2 Router] Redirects and Path Matching - Avoid Common Routing Pitfall
In this tutorial we are going to learn how we can can configure redirects in the angular 2 router configuration. We are also going to see again another example on how the order of the configuration m
日期 2023-06-12 10:48:40[Angular2 Router] Lazy Load Angular 2 Modules with the Router
Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you n
日期 2023-06-12 10:48:40[Angular2 Router] Build Angular 2 Navigation with routerLink
Angular 2 navigation is configured using the routerLink directive. The routerLink directive behaves like an href’s you are familiar with, but it hooks into Angular 2’s router to navigate be
日期 2023-06-12 10:48:40Angular2.x-显示heroes列表
在此页面中，您将展开Tour of Heroes应用程序以显示heroes列表，并允许用户选择heroes并显示heroes的详细信息。 6.X 你需要一些heroes来展示。 最终你会从远程数据服务器获取它们。现在，你会创建一些模拟heroes，并假装他们来自服务器。 创建一个文件夹中调用mock-heroes.ts的src/app/文件。定义一个HEROES由十个heroes组
日期 2023-06-12 10:48:40Webpack 入门指南 - 3. Hello, Angular2!
Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次，我们使用 Webpack 来打包 Angular 2 的应用。 与官方的 Hello, Angular 2 项目相比，我们不使用 System.js，而是使用 TypeScript 直接编译，然后使用 Webpack 打包生成代码。 1. 下载 Angular 2 以及依赖包 修改我们的 package.js
日期 2023-06-12 10:48:40