Angular学习前期准备

时间  2020-04-20
标签 angular 学习 前期 准备 栏目 AngularJS 繁體版
原文   原文链接

[TOC]css

简介

Angular (一般是指 "Angular 2+" 或 "Angular v2 及更高版本")是一个基于 TypeScript 的开源 Web 应用框架 由 Google 的 Angular 团队以及社区共同领导。Angular 是由 AngularJS的同一个开发团队彻底重写的。html

Angular 8 于2019年5月28日发布。特性包括：为全部应用代码进行差别化加载、针对惰性加载路由的动态导入、Web workers、支持 TypeScript 3.4，而且把 Angular Ivy 做为可选的预览特性。Angular Ivy 的可选预览特性包括：node

  • 生成的代码在运行时更易于阅读和调试
  • 更快的从新构建
  • 改进了有效载荷的大小
  • 改进了模板类型检查
  • 向后兼容

最值得期待的特性之一是 Ivy，它是一个向后兼容的、基于增量式 DOM 架构的全新渲染引擎。Ivy 从设计之初就考虑到了摇树优化，这意味着应用的发布包中只会包含那些在应用中真正用到的 Angular 部件。jquery

能够预期，每个版本都会向后兼容前一个版本。Google 承诺每一年会进行两次升级。web

前提条件

在开始以前，请确保你的开发环境中包括 Node.js® 和 npm 包管理器。typescript

Node.js

Angular 须要 Node.js 版本 10.9.0 或更高版本，最好下载最新版本。npm

关于 Node.js 的安装及环境配置能够参考：node.js 安装详细步骤教程json

验证是否安装配置成功，请在终端/控制台窗口中运行 node -v 。bootstrap

npm 包管理器

Angular、Angular CLI 和 Angular 应用都依赖于 npm 包中提供的特性和功能。要想下载并安装 npm 包，你必须拥有一个 npm 包管理器。浏览器

本搭建指南使用 npm 客户端命令行界面，Node.js 已经默认安装了它。

npm 可能安装失败，建议先用 npm 安装一下 cnpm，用淘宝镜像安装：npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org
复制代码

要检查你是否安装了 npm 客户端，请在终端/控制台窗口中运行 npm -v 。

Angular配置

安装 Angular CLI

你可使用 Angular CLI 来建立项目、生成应用和库代码，以及执行各类持续开发任务，好比测试、打包和部署。

全局安装 Angular CLI。

要使用 npm 命令安装 CLI，请打开终端/控制台窗口，输入以下命令：

npm install -g @angular/cli
或者
cnpm install -g @angular/cli
复制代码

建立项目

打开终端/控制台窗口找到你要建立项目的目录

ng new 项目名称

ng new angularDemo01
复制代码

ng new 命令会提示你提供要把哪些特性包含在初始应用中。按 Enter 或 Return 键能够接受默认值。

Angular CLI 会安装必要的 Angular npm 包和其余依赖包。这可能要花几分钟的时间。

ng new angularDemo01 --skip-install
复制代码

上述命令只会建立项目，可是不会导入相关依赖，以后还须要本身导入依赖。使用 cnpm 命令速度会比较快。

cd angularDemo01
npm install
或者
cnpm install
复制代码

CLI 会建立一个新的工做区和一个简单的欢迎应用，随时能够运行它。

项目结构大体以下：

index.html 是整个 APP 的页面入口。 代码以下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularDemo01</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
复制代码

重点关注 <app-root></app-root> ，<app-root> 至关因而局部页面的占位符。 这个区域是动态加载的，运行时，会被 app.component.html 替换掉。具体来讲，就是被 app.component.html 替换掉。

查看根组件 app.component.ts 内容：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}
复制代码

上述代码把模板定义在一个独立的 HTML 文件中， 再经过 @Component 装饰器中的 templateUrl 属性， 在组件元数据中把它连接到组件，也可使用 template 属性把它定义为内联的。以下所示：

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

@Component({
  selector: 'app-root',
  template: ` <h1>{{title}}</h1> <h2>My favorite hero is: {{myHero}}</h2> `
})
export class AppComponent {
  title = 'Tour of Heroes';
}
复制代码

模板是包在 ECMAScript 2015 反引号 (`) 中的一个多行字符串。 注意是反引号，不是单引号 (') — 容许把一个字符串写在多行上， 使 HTML 模板更容易阅读。

在后续的学习过程当中，咱们可使用 log 方法输出的内容中包括变量信息，注意嵌套在字符串外面的也是反引号，不然没法加载变量的值。以下例所示：

const url = `${this.heroUrl}/?id=${id}`;
this.log(`found heroes matching "${term}"`) :
复制代码

运行应用

Angular CLI 中包含一个服务器，方便你在本地构建和提供应用。

  1. 转到 workspace 文件夹（angularDemo01）。
  2. 使用 CLI 命令 ng serve 和 --open 选项来启动服务器。
![微信截图_20200403102400](F:\blog_photos\csdn\53\微信截图_20200403102400.png)ng serve --open
复制代码

ng serve 命令会启动开发服务器、监视文件，并在这些文件发生更改时重建应用。

--open（或者只用 -o 缩写）选项会自动打开你的浏览器，并访问 http://localhost:4200/。

在终端点击 ctrl+c便可退出。

Angular开发

因为工做习惯使用 IEDA 开发工具，所以只须要安装一下 Angular 插件，后续开发项目，先经过命令行新建项目，而后再用 IEDA 打开进行编辑，安装了 Angular 插件以后编写代码会有提示。

建立组件

组件控制屏幕上被称为视图的一小片区域。

在终端输入 ng g命令：

F:\workspace\Angular\angularDemo01>ng g
Generates and/or modifies files based on a schematic.
usage: ng generate <schematic> [options]

arguments:
  schematic
    The schematic or collection:schematic to generate.

options:
  --defaults
    When true, disables interactive input prompts for options with a default.
  --dry-run (-d)
    When true, runs through and reports activity without writing out results.
  --force (-f)
    When true, forces overwriting of existing files.
  --help
    Shows a help message for this command in the console.
  --interactive
    When false, disables interactive input prompts.

Available Schematics:
  Collection "@schematics/angular" (default):
    appShell
    application
    class
    component
    directive
    enum
    guard
    interceptor
    interface
    library
    module
    pipe
    service
    serviceWorker
    webWorker
复制代码

再输入命令

ng g component components/news
复制代码

在 VsCode 中能够直接建立组件。

好比说新增 product-alerts 组件，该 generator 为组件的三个部分建立了启动文件：

  • product-alerts.component.ts
  • product-alerts.component.html
  • product-alerts.component.css

建立服务

服务是一个广义的概念，它包括应用所需的任何值、函数或特性。狭义的服务是一个明肯定义了用途的类。 Angular 把组件和服务区分开，以提升模块性和复用性。 经过把组件中和视图有关的功能与其余类型的处理分离开，你可让组件类更加精简、高效。

ng g service my-new-service
//建立到指定目录下面
ng g service services/storage
复制代码

而后在 app.module.ts 里面 import 这个服务，而且声明。

import { StorageService } from './../../services/storage.service';

@NgModule({
  declarations: [// 配置当前项目运行的组件
    AppComponent, NewsComponent, Argular01Component, FormComponent, SearchComponent
  ],
  imports: [// 配置当前模块运行依赖的其余模块
    BrowserModule,
    FormsModule
  ],
  providers: [StorageService],
  bootstrap: [AppComponent]
})
复制代码

而后在须要用到服务的组件中引用，而且做为参数传给构造函数。

import {StorageService} from '../../services/storage.service';

constructor(public storage: StorageService) {
}
复制代码

建立类

如同 Java 中的类对象，在 Angular 中也能够这样定义，首先须要建立一个类文件：

ng generate class model/user
复制代码

代码以下：

export class User {
  id: number;
  name: string;
  // constructor(public id: number, public name: string) { }
}
复制代码
使用类

在须要使用的地方导入 Hero 类，便可建立 Hero 类型的对象。

import { User } from './user';

//当类中有构造函数时能够这样定义User对象
// export const USERS: User[] = [
// new User(1, 'hresh1'),
// new User(2, 'hresh2'),
// new User(3, 'hresh3'),
// new User(4, 'hresh4')
// ]

export const USERS: User[] = [
  { id: 101, name: 'hresh1' },
  { id: 102, name: 'hresh2' },
  { id: 103, name: 'hresh3' },
  { id: 104, name: 'hresh4' }
]
复制代码

建立接口

能够定义类，固然也能够建立接口，而后类能够继承接口。

ng generate interface model/hero
复制代码

代码以下：

export interface Hero {
  id: number;
  name: string;
}
复制代码

interface 是把公共属性和方法的提取出来，class 是具体的对象 。

class User implements Hero {

}
等价于
export class User {
  id: number;
  name: string;
}
复制代码

具体使用场景同在 Java 中同样，根据状况来决定。

引入 JQuery

一、将第三方类库安装到本地

npm install jquery --save
npm install @types/jquery --save
复制代码

二、将库引入到当前的项目中去

修改.angular-cli.json的"scripts" ，注意路径必定要书写正确。

"scripts": ["./node_modules/jquery/dist/jquery.js"]
复制代码

三、在组件中引入JQuery

import { Component } from '@angular/core';
import * as $ from 'jquery';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
 
  ngOnInit() {
  	$("body").css("color", "blue");
  }
}
复制代码

问题记录

Type string trivially inferred from a string literal, remove type annotation (no-inferrable-types)

问题解析：tslint 以为本身根据右边的"hresh"判断出 name 的类型是 string，因此，认为再写 string 是画蛇添足。

解决方法：tslint.json 添加"ignore-properties"。不推断类的属性（字段）。

"no-inferrable-types": [
      true,
      "ignore-params",
      "ignore-properties"
    ]
复制代码

tslint注释标记

ts文件中使用如下注释来临时忽略规则出现的错误，参考这里

/ tslint:disable /——忽略该行如下全部代码出现的错误提示 / tslint:enable /——当前ts文件从新启用tslint // tslint:disable-line——忽略当前行代码出现的错误提示 // tslint:disable-next-line——忽略下一行代码出现的错误提示

TSLint: Identifier 'errMsg' is never reassigned; use 'const' instead of 'let'. (prefer-const)

问题：

var todoList = this.storage.get('todoList');
复制代码

TypeScript 的 Tslint 又报错了，这回是变量未从新赋值，被强烈建议使用常量修饰符const。

解决方案：打开项目下的 tslint.json 文件，将 prefer-const 设置为 false。 而后将 var 改成 let，修改后的语句为：

// tslint:disable-next-line:prefer-const
let todoList = this.storage.get('todoList');
复制代码

Angular 中获取 input 标签的内容

document.getElementById('name').value;
复制代码

该语句执行报错，修改引号以后在控制台是能够获得正确内容。若是想要获取数据，能够改成这样：

const nameInput = document.getElementById('name') as HTMLInputElement;
console.log(nameInput.value);
复制代码

==和===区别

简单来讲： == 表明相同， ===表明严格相同, 为啥这么说呢，

这么理解： 当进行双等号比较时候： 先检查两个操做数数据类型，若是相同， 则进行===比较， 若是不一样， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时， 若是类型不一样，直接就是 false。

比较过程：

  双等号==：

  （1）若是两个值类型相同，再进行三个等号(===)的比较

  （2）若是两个值类型不一样，也有可能相等，需根据如下规则进行类型转换在比较：

    1）若是一个是null，一个是undefined，那么相等

    2）若是一个是字符串，一个是数值，把字符串转换成数值以后再进行比较

  

  三等号===:

  （1）若是类型不一样，就必定不相等

  （2）若是两个都是数值，而且是同一个值，那么相等；若是其中至少一个是NaN，那么不相等。（判断一个值是不是NaN，只能使用isNaN( ) 来判断）

  （3）若是两个都是字符串，每一个位置的字符都同样，那么相等，不然不相等。

  （4）若是两个值都是true，或是false，那么相等

  （5）若是两个值都引用同一个对象或是函数，那么相等，不然不相等

  （6）若是两个值都是null，或是undefined，那么相等

参考文献

9Angular速查表

Angular8入门学习笔记

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程