Angular-官方文档学习-1

Angular

简介

AngularJS 是一个 JavaScript 框架。它可通过

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

Angular提倡的文件命名方式

组件名称.component.ts

组件的HTML模板命名为： 组件名称.component.html

组件的样式文件命名为： 组件名称.component.css

在使用angular前，需要先配置环境

1. node.js

2. 安装完node后可以将npm资源库设置成国内淘宝镜像，下载cnpm

   npm config set registry https://registry.npm.taobao.org

   npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 安装CLI

   3.1：在安装了cnpm的目录下打开命令行

   

   3.2：输入cnpm install -g @angular/cli

   3.3：通过ng v命令可查看是否安装成功

   

4. 安装TypeScript

   4.1：cnpm install -g typescript

   4.2：tsc -v可查看是否安装成功

5. 安装saas

   5.1：npm install node-sass --registry=http://registry.npm.taobao.org

   5.2：安装saas中间会报几次错误，遇到错误重新安装即可

搭建项目

1.使用命令行创建

1.1cnpm下创建项目。(做Demo时候可以使用)

​ 切换到要创建项目的目录，命令行输入：ng new frontend

2.使用cnpm安装Primeng

2.1 进入项目根目录

2.2 cnpm install primeng --save

2.3安装第三方字体awesome:

​ cnpm install font-awesome

2.4安装Augular4+动画

​ cnpm install @angular/animations --save

2.5安装jquery

​ npm install jquery --save(遇到错误重复安装即可)

​ npm install @types/jquery --save

2.6命令行输入ng serve即可通过localhost:4200访问欢迎界面

• @Component：这是一个 Decorator（装饰器），其作用类似于 Java 里面的注解。Decorator 这个语言特性目前（2017-10）处于 Stage 2（草稿）状态，还不是 ECMA 的正式规范。
• selector：组件的标签名，外部使用者可以这样来使用这个组件：。默认情况下，ng 命令生成出来的组件都会带上一个 app 前缀，如果你不喜欢，可以在 angular-cli.json 里面修改 prefix 配置项，设置为空字符串将会不带任何前缀。
• templateUrl：引用外部的 HTML 模板。如果你想直接编写内联模板，可以使用 template，支持 ES6 引入的“模板字符串”写法。
• styleUrls：引用外部 CSS 样式文件，这是一个数组，也就意味着可以引用多份 CSS 文件。
• export class AppComponent：这是 ES6 里面引入的模块和 class 定义方式

何为“轻逻辑”？

简而言之，所谓“轻逻辑”就是说，你不能在模板里面编写非常复杂的 JavaScript 表达式。比如，Angular 的模板语法就有规定：

• 你不能在模板里面 new 对象
• 不能使用=、+=、-=这类的表达式
• 不能用++、–运算符
• 不能使用位运算符

第一个组件

命令行窗口输入 ng generate component login --inline-template --inline-style 。

参数generate用来生成文件，参数component说明要生成一个组件，login是组件名称，后面的两个参数是告诉angular-cli：生成组件时，请把组件的HTML模板和CSS样式和组件放在同一个文件中（其实分开文件更清晰。)

可以把上面的命令改写成 ng g c login -it -is

angular-cli为我们在\src\app目录下生成了一个新文件夹login，在login目录下生成了2个文件

@Component修饰配置中的 selector: 'app-login'，意味着可以在其他组件的template中使用 <app-login></app-login> 来引用这个组件。

什么是模块？

简单来说模块就是提供相对独立功能的功能块，每块聚焦于一个特定业务领域。Angular内建的很多库是以模块形式提供的，比如FormsModule封装了表单处理，HttpModule封装了Http的处理等等。每个Angular应用至少有一个模块类 —— 根模块，我们将通过引导根模块来启动应用。按照约定，根模块的类名叫做AppModule，被放在 app.module.ts 文件中。

import {
    BrowserModule } from '@angular/platform-browser';
import {
    NgModule } from '@angular/core';

import {
    AppRoutingModule } from './app-routing.module';
import {
    AppComponent } from './app.component';
import {
    LoginComponent } from './login/login.component';


@NgModule({
    //@NgModule装饰器用来为模块定义元数据。
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,


  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
    }

Angular的服务与依赖注入

创建一个 AuthService , 在 src\app 下建立一个 core 的子文件夹（ src/app/core ）,命令行中输入 ng g s core/auth （ s这里是service的缩写，core/auth 是说在 core 的目录下建立 auth 服务相关文件

service 添加一个方法，为这个方法指定了返回类型和参数类型。这就是 TypeScript 的好处，有了类型约束，在别处调用这个方法时，如果给出的参数类型或返回类型不正确，IDE就可以直接告诉你错了。

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

@Injectable({
   
  providedIn