Angular 2 + 折腾记 :(2)初步认识angular2,不一样的开发模式

前言

想来想去,概念这些东西不怎么想讲,更多的是想讲点实战性的内容。 所以有些东西跳过去了,小伙伴们请去看官方文档哈;跳跃性的前进,写的不好多包涵。。。


基础概念

国内的官网--基础

  1. 词汇表(又名计算机术语--angular2 & es6 & es7)
  2. 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典
  3. 关于ng2的一堆为什么: 阅读后可以加速你的理解程度
  4. NG2的架构概览:多读多看-切记切记切记!!!!!!!

对应的国际官网

  1. GLOSSARY
  2. CHEAT SHEET
  3. NGMODULE FAQS
  4. ARCHITECTURE OVERVIEW

英文水平比较好的推荐国际官网,这边的API更新很及时


angular-cli 启动

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

  • 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.components.ts:组件逻辑处理 // 导入装饰器:装饰器可以理解为一些函数的封装,使其书写起来非常简洁明了 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 { }复制代码

常见模板指令用法解释

  1. {{item | SliceStr:1:2:'...' }}: 可以响应组件内对应的item字段值变化, |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章
  2. []="":绑定组件内的值[单向,数据流向视图],指令,原生html控件的自身属性[value,src,class,style]等,双引号内支持条件表达式[不完全等同于js条件表达式]或者方法亦或者变量,
  3. (click)="": 事件绑定[视图触发改变数据源],同上,支持表达式和方法。。特殊之处后面解释
  4. [(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这种动态渲染节点的还是有一定的性能消耗的。。

总结

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

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

哦,还少说了服务这块,看着安排,这些说完之后就直接开搞一些小玩意,比如自定义管道,上传组件,自定义指令这些。。。发现文章有错误的,或者有更好讲解的,请留言指出,我会及时修正,谢谢!

其他的一丢丢废话:若是学会了ng2技术栈,其实你过程接触了TypescriptRxjses6&7

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏章鱼的慢慢技术路

MFC绘图基础——上机操作步骤

5473
来自专栏腾讯移动品质中心TMQ的专栏

手机APP安装包缩减方案

安装包大小对于产品很重要 主要有如下几个原因: 1、手机APP安装包的大小会影响用户是否愿意花费流量来下载此APP; 2、包体越大下载过程越长,用户取消下载的可...

3086
来自专栏CRPER折腾记

NG2.4.10升级NG4正式版[正式项目]:修正AOT打包报错的一些问题

上周五,ng4正式发布了。。很多小伙伴迫不及待的把项目升级了。。。 然后到群里各种吼,无损升级,没有什么奇葩问题,大家放心升级。。 我信了。。。把公司的项目给升...

841
来自专栏点滴积累

Fish Shell

今天看到阮一峰同学的一篇博客(Fish shell 入门教程),讲述的非常详细、清楚,有兴趣的可以直接转去查看此文,本文仅提供一下个人使用心得。 一、fish ...

3746
来自专栏程序员互动联盟

【专业技术第五讲】动态链接库及其用法

存在的疑惑: 动态链接库到底如何来使用?特别是windows上面 解决方案: 本篇我们讲Windows上的动态链接库(Dynamic Link Library ...

3167
来自专栏编程

近期做的比较好的web

? 本文作者:p0desta。 感谢p0desta。来稿,本文稿费100元。持续小广告:各位大佬有安全方面新的创作都可以向小编砸过来,将文章以Word形式发送...

2218
来自专栏编程札记

深入golang之---goroutine并发控制与通信

本文章通过goroutine同步与通信的一个典型场景-通知子goroutine退出运行,来深入讲解下golang的控制并发。

1.3K7
来自专栏北京马哥教育

MongoDB多纬度监控方法详解

一、mongostat工具方法 mongostat是mongdb自带的状态检测工具,在命令行下使用。它会间隔固定时间获取mongodb的当前运行状态,并输出。如...

4735
来自专栏前端那些事

Express4.x API (三):Response (译)

Express4.x API 译文 系列文章 技术库更迭较快,很难使译文和官方的API保持同步,更何况更多的大神看英文和中文一样的流畅,不会花时间去翻译--,所...

17810
来自专栏JackieZheng

探秘Tomcat——从一个简陋的Web服务器开始

前言:   无论是之前所在实习单位小到一个三五个人做的项目,还是如今一个在做的百人以上的产品,一直都能看到tomcat的身影。工作中经常遇到的操作就是启动和关闭...

2117

扫码关注云+社区

领取腾讯云代金券