Angular 2.x折腾记：(2)初步认识angular2，不同的开发模式

时间 2019-11-16

标签 angular 2.x 折腾初步认识 angular2 不同开发模式栏目 AngularJS 繁體版

原文原文链接

前言

想来想去，概念这些东西不怎么想讲，更多的是想讲点实战性的内容。css

因此有些东西跳过去了，小伙伴们请去看官方文档哈；跳跃性的前进，写的很差多包涵。html

基础概念

官方中文社区一把梭: 你想要的都概念基本能够在这里找到。json

angular-cli 启动

src是开发目录，生产打包后会产生一个dist目录；初步说下你从启动到浏览器看到app works!依赖了哪些文件，有哪些做用bootstrap

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>NgTestdemo</title>
  
  <!--规定全部url的默认目标由谁开始-->
  <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>Loading...</app-root>
</body>
</html>

复制代码

main.ts

// 引入生产模式，控制关闭开发模式的，函数来的
import { enableProdMode } from '@angular/core';

// app启动引导模块，必须引入
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';


// 根模块
import { AppModule } from './app/app.module';

// 环境配置文件，能够写入接口路径什么的。。dev,prod各一份
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

// 引导程序启动
platformBrowserDynamic().bootstrapModule(AppModule);


复制代码

polyfill.ts : 要兼容到ie10,安装里面对应的腻子（polyfill），文件内有详细的注释
typings.d.ts : 全局变量声明的文件
testconfig.*.json: 不一样模式下调用的tsconfig配置文件

app目录下(分的很完全，写起来跟常规基本同样)

app.component.css : 根样式文件，配置了scss就是.scss数组

app.component.html : 根html浏览器

<!--Mustache包括的是双向数据绑定-->
<h1>
  {{title}}
</h1>

复制代码

app.component.spec.ts: 测试用例，够繁琐，之后再说app

app.components.ts：组件逻辑处理ide

// 导入装饰器：装饰器能够理解为一些函数的封装，使其书写起来很是简洁明了
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',  // 自定义元素
    templateUrl: './app.component.html', // 组件关联的html页面
    styleUrls: ['./app.component.css'] // 组件自身的样式
  })
  
  // 导出对应的组件
  export class AppComponent {
    title = 'app works!';  // 声明一个public的变量而且赋值
  }
  ``` 复制代码

app.module.ts：模块函数

// 浏览器的NG模块
    import { BrowserModule } from '@angular/platform-browser';
    
    // 这也是一个装饰器，用来定义模块和组件相关的，好比服务，组件元素，指令，导入导出模块的识别
    // 每一个模块的定义必须有这个才能生效，ng2的开发模式就是相似一个树，从根节点无限发散
    import { NgModule } from '@angular/core';
    // 表单模块，好比你要在组件内用到一些表单元素或者数据绑定，否则会报错
    import { FormsModule } from '@angular/forms';
    
    // rest风格的请求模块
    import { HttpModule } from '@angular/http';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [ // 指令和组件的放在这里
        AppComponent
      ],
      imports: [ // 好比你要引用那些模块的功能就要引入
        BrowserModule,
        FormsModule,
        HttpModule
      ],
      providers: [], // 服务
      bootstrap: [AppComponent] // 启动的模块，一个app通常只有一个启动模块！！通常！！
    })
    export class AppModule { }
    ``` 复制代码

常见模板指令用法解释

{{item | SliceStr:1:2:'...' }}: 能够响应组件内对应的item字段值变化， |是管道，支持多个管道，支持内置管道和自定义管道，:跟随是管道的参数，后续文档我写一个如何自定义管道的文章
[]="":绑定组件内的值[单向，数据流向视图]，指令，原生html控件的自身属性[value,src,class,style]等，双引号内支持条件表达式[不彻底等同于js条件表达式]或者方法亦或者变量，
(click)="": 事件绑定[视图触发改变数据源]，同上，支持表达式和方,特殊之处后面解释。
[(target)]: 双向数据绑定，视图和数据源同步改动，通常用于表单比较多。

绑定赋值的条件表达式的特殊之处：性能

不支持：
赋值 (=, +=, -=, ...)
new运算符
使用;或.的链式表达式
自增或自减操做符 (++和--)
不支持位运算|和&
支持：
逻辑运算(|| , &&)
三目运算符( true ? true : false )
直接赋值运算(item = 2);
变量传递
空值保护运算符(?.)
- item?.a?.b : 会判断item是否有a这个值，防止undefined或者null让视图渲染报错

最经常使用的内置指令

样式绑定(ngClass)
- [ngClass]或者[ngStyle]:能够传递一个对象，用来动态判断增长多个样式
- [class.a]或者[style.font-size]:单一操做类或者某个行内样式
数据遍历(*ngFor)
*ngFor="let i of item; let index = index": 能够用这个来遍历数组对象，let index = index意思是建立一个局部遍历把当前遍历的索引保存到你的自定义变量index
动态渲染(*ngIf)
*ngIf="item" : 好比loading到视图所有渲染就常常用到这个,当前不在意低版本的能够用[hidden]来控制切换，由于*ngIf这种动态渲染节点的仍是有必定的性能消耗的。。

总结

这一篇没有涉及到路由这些和表单这些；准备拆成两个文章来讲；

路由的配置及懒加载这些，
模板驱动的表单及响应式表单[嵌套表单响应等]，回车键触发搜索等。。

Angular 2.x折腾记 ：(2)初步认识angular2，不同的开发模式

前言

基础概念

angular-cli 启动

常见模板指令用法解释

最经常使用的内置指令

总结

Angular 2.x折腾记：(2)初步认识angular2，不同的开发模式