angular-cli快速创建angular6项目

angular

2019-03-04

178

0

angular介绍

  1. 是Google开发的js前端框架;
  2. 可以开发移动端和桌面端;
  3. 已被Google用到600多种不同产品中,能满足不同场景下的开发需求,更适合开发现代Web应用;
  4. 从工程化角度出发的一个大而全的框架,提供了针对不同需求的多套完整的解决方案;
  5. 基于TS强类型开发,增强了ng项目的可维护性;性能高,体积小。Ivy是ng新一代的渲染引擎,ng和webpack的合作中,采用webpack的tree shaking的理念,将项目未用到的内容从框架中剥离出去,从而达到体积的缩减。

ng版本说明:

    AngularJS -->  v1.x

    Angular  -->  v2.x及其以上版本

    项目是基于angular v6版本

angular-cli快速搭建项目

官方中文文档:http://www.angular.cn

Demo地址:https://github.com/lmy01/angular6_demo

开发环境:node 需要在8.0以上版本,npm需要在5.0以上版本

npm install -g @angular/cli

ng -v

ng new my-project

cd my-project

ng serve --open

项目目录介绍

配置tslint:修改成自己的开发风格

第一种方法:直接修改根目录下的/tslint.json;

第二种方法:在根目录下的/tslint.json找到需要的配置,将其复制到/src/tslint.json中并修改成需要的配置。

组件

组成部分:

[组件名称].component.html

[组件名称].component.css

[组件名称].component.ts

单元测试文件(可选):[组件名称].component.spec.ts

模块

脚手架回自动会创建一个根模块/src/app/app.module.ts,每个应用至少要有一个根模块,命名为AppModule,根模块用来启动应用,每个模块是独立且封闭的,模块之间的引用通过导入导出来完成。

两个内置的模块:HttpModule/BrowserModule,另外可以自定义模块,如登录模块,用户管理模块等等。

模块中包含的内容:组件、服务、指令,这些内容必须要在模块中配置后才有效

根模块中@NgModule()装饰器,是一个函数,用来修饰紧随其后的类或者属性。

装饰器是JS的一种语言特性,处于语法天的stage2阶段,是一个实验特性。装饰器又叫注解,用来告诉ng将后面输出的AppModule当做模块来处理。

语法:@ngmModule({ 元数据对象 })

元数据对象说明:

  • declarations:该模块所拥有的组件和指令
  • imports:该模块所依赖的其他模块
  • providers:该模块所用的服务提供商,即服务
  • bootstrap:[AppModules]:引入,指定根组件,只有根模块中需要该配置,ng会把根组件插入到html中
  • exports:公开该模块其中的一部分,一边外部模块引用它们

组件的装饰器:app.component.ts

语法:@Component({ 元数据对象 })

元数据对象说明:

selector:‘选择器(组建名称)’,对应HTML中的组件名称,ng中的组件名称都要以ng-开头

templateUrl:’组件模板的路径’,或者如果模板结构简单,直接用template:”标签”也可以

styleUrls:[],组件样式文件的路径,是一个数组可以指定多个样式文件

数据绑定

  • 插值表达式:{{数据}},可以直接用在标签的属性值上
  • 属性绑定:[属性名]=“数据“,用插值表达式也可以,推荐属性绑定就使用属性绑定的方式
  • 事件绑定:(事件名)=”方法调用”,事件对象在方法调用里写上$event,方法里也要写上形参
  • 双向数据绑定:[(ng ngModel)]=”数据”, [(ngModel)]是固定写法,并且需要在根模块导入一个表单模块才能正确的进行数据双向绑定 import { FormsModule } from '@angular/forms',然后在根模块的imports中导入这个模块

语言服务

在模板中能获得如下功能:vscode中安装Angular Language Service插件

  1. 自动完成,类似写js的时候的智能提示
  2. 错误检查
  3. 给出提示
  4. 内部导航:编辑器右键“转到定义“

指令

自定义的标签或者给现有标签中添加一些标记,给标签增加一个功能。上面的数据绑定的写法其实都是指令。

指令分类:

1.组件指令:拥有模板的指令:

2.属性型指令:改变匀速外观和行为的指令

  [ngClass] 动态批量添加和移除CSS类名

  [class.类名] 动态添加和移除一个类

  [ngStyle] 动态添加内联样式

  [style.fontSize] 动态添加一个样式

3.结构型指令:

  *ngIf=“数据”,添加和移除DOM元素改变DOM布局的指令,非隐藏显示

  *ngFor=“let item of数据; let i = index; let odd = odd; trackBy: trackById”,重复器,遍历数据,生成元素,

  index无法再标签外使用,所以需要赋值给i变量,

  odd奇数列返回true,偶数列返回false;

  添加trackBy提升渲染对象数组的性能,只有在是遍历一个对象数组的时候才会出现性能问题(不添加trackBy时,修改一个数组中的值页面会全部刷新,加上trackBy时则只会刷新修改的值),如果是普通数组则不需要进行trackBy。

》》》未完待续......》》》》》》》

  

发表评论

全部评论:0条

lmy233

努力工作学习生活的人呐~~

联系方式

神圣之子仅供学习交流
E-mail:limengyu233@163.com
github:https://github.com/lmy01