前言
想来想去,概念这些东西不怎么想讲,更多的是想讲点实战性的内容。
所以有些东西跳过去了,小伙伴们请去看官方文档哈;跳跃性的前进,写的不好多包涵。
基础概念
官方中文社区一把梭: 你想要的都概念基本可以在这里找到。
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 { } ```
常见模板指令用法解释
{{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
这种动态渲染节点的还是有一定的性能消耗的。。
总结
这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说;
- 路由的配置及懒加载这些,
- 模板驱动的表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。