想来想去,概念这些东西不怎么想讲,更多的是想讲点实战性的内容。 所以有些东西跳过去了,小伙伴们请去看官方文档哈;跳跃性的前进,写的不好多包涵。。。
国内的官网--基础
对应的国际官网
英文水平比较好的推荐国际官网,这边的API更新很及时
src是开发目录,生产打包后会产生一个dist目录;
初步说下你从启动到浏览器看到app works!
依赖了哪些文件,有哪些作用
<!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>复制代码
// 引入生产模式,控制关闭开发模式的,函数来的
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);复制代码
{{item | SliceStr:1:2:'...' }}
: 可以响应组件内对应的item字段值变化, |
是管道,支持多个管道,支持内置管道和自定义管道,:
跟随是管道的参数,后续文档我写一个如何自定义管道的文章[]=""
:绑定组件内的值[单向,数据流向视图],指令,原生html控件的自身属性[value,src,class,style]等,双引号内支持条件表达式[不完全等同于js条件表达式]或者方法亦或者变量,(click)=""
: 事件绑定[视图触发改变数据源],同上,支持表达式和方法。。特殊之处后面解释[(target)]
: 双向数据绑定,视图和数据源同步改动。。一般用于表单比较多。绑定赋值的条件表达式的特殊之处:
?.
)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技术栈,其实你过程接触了Typescript
,Rxjs
,es6&7
等