前言
想来想去，概念这些东西不怎么想讲，更多的是想讲点实战性的内容。
所以有些东西跳过去了，小伙伴们请去看官方文档哈；跳跃性的前进，写的不好多包涵。。。
基础概念
国内的官网–基础
- 词汇表(又名计算机术语–angular2 & es6 & es7)
- 速查表:又名demo写法表,里面涵盖了很多写法，相当于一本小字典
- 关于ng2的一堆为什么: 阅读后可以加速你的理解程度
- 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);
- 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 { }
常见模板指令用法解释
{{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)
- 数据遍历(
*ngFor)
- 动态渲染(
*ngIf)
*ngIf="item": 比如loading到视图全部渲染就经常用到这个,当前不在乎低版本的可以用[hidden]来控制切换，因为*ngIf这种动态渲染节点的还是有一定的性能消耗的。。
总结
这一篇没有涉及到路由这些和表单这些；
准备拆成两个文章来说；
- 路由的配置及懒加载这些，
- 模板驱动的表单及响应式表单[嵌套表单响应等]，回车键触发搜索等。。
哦，还少说了服务这块，看着安排，这些说完之后就直接开搞一些小玩意，比如自定义管道，上传组件，自定义指令这些。。。发现文章有错误的，或者有更好讲解的，请留言指出，我会及时修正，谢谢！
其他的一丢丢废话：若是学会了ng2技术栈，其实你过程接触了Typescript，Rxjs，es6&7等
原文地址：https://www.jb51.cc/angularjs/147738.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
