angular7 (简单的入门)

##angular7 (简单的入门)

###作者：胖喵

#一、简介 ###1.Angular 是什么 Angular 是由谷歌开发与维护一个开发跨平台应用程序的框架，同时适用于手机与桌面。 ###Angular 有什么特点基于 Angular 我们可以构建适用于所有平台的应用。比如：Web 应用、移动 Web 应用、移动应用和桌面应用等。通过 Web Worker和服务端渲染 (SSR)，达到在如今Web平台上所能达到的最高渲染速度。 Angular 让你能够有效掌控可伸缩性。基于 RxJS、Immutable.js 和其它推送模型，能适应海量数据需求。

###Angular 提供了哪些功能

动态HTML
强大的表单系统 (模板驱动和模型驱动)
强大的视图引擎
事件处理
快速的页面渲染
灵活的路由
HTTP 服务
视图封装
AOT、Tree Shaking

###Angular 与 AngularJS 有什么区别

不再有Controller和 Scope
更好的组件化及代码复用
更好的移动端支持
引入了 RxJS 与 Observable
引入了 Zone.js，提供更加智能的变化检测

#二、环境搭建 #####如何构建并运行一个简单的Angular应用。使用Angular CLI工具来加速开发 #####前提条件 ######在开始之前，请确保你的开发环境已经包含了 Node.js® 和 npm 包管理器。 Angular 需要 Node.js 的 8.x 或 10.x 版本。要想检查你的版本，请在终端/控制台窗口中运行 node -v 命令。要想安装 Node.js，请访问 nodejs.org。

###第一步：安装 Angular CLI(Command Line Interface) 你要使用 Angular CLI 来创建项目、创建应用和库代码，并执行多种开发任务，比如测试、打包和发布。全局安装 Angular CLI。要想使用 npm 来安装 CLI，请打开终端/控制台窗口，并输入下列命令：

npm install -g @angular/cli

###第二步：创建工作区和初始应用

1.运行 CLI 命令 ng new，并提供一个名字 my-app，如下所示：
```
ng new my-app
```
2.ng new 会提示你要把哪些特性包含在初始的应用项目中。请按回车键接受默认值。
- Angular CLI 会安装必要的 Angular npm 包及其它依赖。这可能要花几分钟。

###第三步：启动开发服务器

cd my-app
ng serve --open

###第四步：编辑你的第一个 Angular 组件 ######组件是 Angular 应用中的基本构造块。它们在屏幕上显示数据、监听用户输入，并根据这些输入采取行动。作为初始应用的一部分，CLI 也会为你创建第一个 Angular 组件。它就是根组件，名叫 app-root。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!';
}

#三、插值表达式 ######在 Angular 中，我们可以使用插值语法实现数据绑定。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello </h1>`,
})
export class AppComponent  {
  name = 'Angular'; 
}

######绑定对象属性

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h2>大家好，我是</h2>
    <p>我来自<strong></strong>省,
      <strong></strong>市
    </p>
  `,
})
export class AppComponent {
  name = 'Semlinker';
  address = {
    province: '福建',
    city: '厦门'
  }
}

######值得一提的是，我们可以使用 Angular 内置的 json 管道，来显示对象信息：

@Component({
  selector: 'my-app',
  template: `
    ...
    <p></p>
  `,
})
export class AppComponent {
  name = 'Semlinker';
  address = {
    province: '福建',
    city: '厦门'
  }
}

#四、自定义组件 ######在 Angular 中，我们可以通过 Component 装饰器和自定义组件类来创建自定义组件。

######在 Angular 中，我们可以使用 Component 装饰器来定义组件的元信息：

@Component({
  selector: 'my-app', // 用于定义组件在HTML代码中匹配的标签
  template: `<h1>Hello </h1>`, // 定义组件内嵌视图
})

######定义组件类

export class AppComponent  {
  name = 'Angular'; 
}

######自定义组件示例 ######创建 UserComponent 组件

ng g c User (generate component)

######(其中xx.component.spec.ts，https://angular.io/guide/testing) ######( path: ‘’, redirectTo: ‘./’, pathMatch: ‘full’ ,默认路由设置)

import { Component } from '@angular/core';

@Component({
    selector: 'sl-user',
    template: `
    <h2>大家好，我是</h2>
    <p>我来自<strong></strong>省,
      <strong></strong>市
    </p>
    `
})
export class UserComponent {
    name = 'Semlinker';
    address = {
        province: '福建',
        city: '厦门'
    };
}

#####声明 UserComponent 组件

import { UserComponent } from './user.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, UserComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

#####使用 UserComponent 组件

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <sl-user></sl-user>
  `,
})
export class AppComponent {}

######使用构造函数初始化数据

@Component({...})
export class UserComponent {
    name: string;
    address: any;

    constructor() {
        this.name = 'Semlinker';
        this.address = {
            province: '福建',
            city: '厦门'
        }
    }
}

#五、 - 常用指令简介 ####在 Angular 实际项目中，最常用的指令是 ngIf 和 ngFor 指令。

######ngIf 指令简介 ######该指令用于根据表达式的值，动态控制模板内容的显示与隐藏。它与 AngularJS 1.x 中的 ng-if 指令的功能是等价的。

######ngIf 指令语法

<div *ngIf="condition">...</div>

######ngFor 指令简介 ######该指令用于基于可迭代对象中的每一项创建相应的模板。它与 AngularJS 1.x 中的 ng-repeat 指令的功能是等价的。

######ngFor 指令语法

<li *ngFor="let item of items;">...</li>

######ngIf 与 ngFor 指令使用示例

import { Component } from '@angular/core';

interface Address {
    province: string;
    city: string;
}

@Component({
    selector: 'sl-user',
    template: `
    <h2>大家好，我是</h2>
    <p>我来自<strong></strong>省,
      <strong></strong>市
    </p>
    <div *ngIf="showSkills">
        <h3>我的技能</h3>
        <ul>
            <li *ngFor="let skill of skills">
                
            </li>
        </ul>
    </div>
    `
})
export class UserComponent {
    name: string;
    address: Address;
    showSkills: boolean;
    skills: string[];

    constructor() {
        this.name = 'Semlinker';
        this.address = {
            province: '福建',
            city: '厦门'
        };
        this.showSkills = true;
        this.skills = ['AngularJS 1.x', 'Angular 2.x', 'Angular 4.x'];
    }
}

#六、事件绑定 #####为 UserComponent 组件，开发一个功能，即可以让用户动态控制技能信息的显示与隐藏。

######事件绑定示例

@Component({
    selector: 'sl-user',
    template: `
    ...
    <button (click)="toggleSkills()">
        
    </button>
    ...
    `
})
export class UserComponent {
    // ...
    toggleSkills() {
        this.showSkills = !this.showSkills;
    }
}

#七、- Http 模块简介

######（Angular 4.3 版本后，推荐使用 HttpClient，可以参考 Angular HTTP Client 快速入门）

#####导入 Http 模块

import { HttpModule } from '@angular/http';

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule],
  declarations: [AppComponent, UserComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用 Http 服务步骤 (1) 从 @angular/http 模块中导入 Http 类

(2) 导入 RxJS 中的 map 操作符

(3) 使用 DI 方式注入 http 服务

(4) 调用 http 服务的 get() 方法，设置请求地址并发送 HTTP 请求

(5) 调用 Response 对象的 json() 方法，把响应体转成 JSON 对象

(6) 把请求的结果，赋值给对应的属性

Http 服务使用示例使用 Http 服务

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http'; // (1)
import 'rxjs/add/operator/map'; // (2)

interface Member {
    id: string;
    login: string;
    avatar_url: string;
}

@Component({
    selector: 'sl-members',
    template: `
    <h3>Angular Orgs Members</h3>
    <ul *ngIf="members">
      <li *ngFor="let member of members;">
        <p>
          <img [src]="member.avatar_url" width="48" height="48"/>
          ID：<span></span>
          Name: <span></span>
        </p>
      </li>
    </ul>
    `
})
export class MembersComponent implements OnInit {
  members: Member[];

  constructor(private http: Http) { } // (3)

  ngOnInit() {
    this.http.get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`) // (4)
        .map(res => res.json()) // (5)
        .subscribe(data => {
           if (data) this.members = data; // (6)
        });
    }
}

#####声明 MembersComponent 组件 // …

import { MembersComponent } from './members.component';

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule],
  declarations: [AppComponent, UserComponent, MembersComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

#####使用 MembersComponent 组件

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <sl-members></sl-members>
  `,
})
export class AppComponent {}

#八、注入服务基础知识组件中注入服务步骤 (1) 配置已创建的服务，如：

@NgModule({
  // ...
  providers: [MemberService]
})
export class AppModule { }

(2) 导入已创建的服务，如：

import { MemberService } from '../member.service';

(3) 使用构造注入方式，注入服务：

export class MembersComponent implements OnInit {
   // ...
   constructor(private memberService: MemberService) { }
}

服务使用示例创建 MemberService 服务

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class MemberService {
    constructor(private http: Http) { }

    getMembers() {
        return this.http
            .get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`)
            .map(res => res.json())
    }
}

配置 MemberService 服务

import { MemberService } from "./member.service";

@NgModule({
  // ...
  providers:[MemberService],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用 MemberService 服务

// ...
import { MemberService } from "./member.service";

@Component({...})
export class MembersComponent implements OnInit {
    members: Member[];

    constructor(private memberService: MemberService) { }

    ngOnInit() {
        this.memberService.getMembers()
            .subscribe(data => {
                if (data) this.members = data;
            });
    }
}

https://angular.cn/guide/quickstart https://segmentfault.com/a/1190000009733649

angular7 (简单的入门)

Older · View Archive (32)

sublime-text-package

Newer

docker安装seafile docs版

安装步骤