ionic3的学习入门(angular2)语法的入门

学习ionic3中，遇见的这些坑，整理下笔记和知识点，以供参阅吧。

ionic3框架的学习 ###Angular2语法： TypeScrpit的学习 Angular 2用于在浏览器（及更高版本）中构建复杂应用程序 ###@Component的介绍 Angular 应用是由组件组成的。 组件由 HTML 模板和组件类组成，组件类控制视图。文件以.ts结尾 ` import {Component} from '@angular/core'; @Component({ selector:'my-App',template:'<h1>我是:{{name}}</h1>' }) export class AppComponent{name='志哥'} ` ###TypeScrpit的掌握： 搭建开发环境： git clone https://github.com/angular/quickstart.git quickstart cd quickstart npm install npm start 删除非必需文件 for /f %i in (non-essential-files.txt) do del %i /F /S /Q rd .git /s /q rd e2e /s /q ###Angular的应用基本构造块 Angular 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript 的语言 原理： 1.用 Angular 扩展语法编写 HTML 模板， 用组件类管理这些模板，用服务添加应用逻辑， 用模块打包发布组件与服务。 2.通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。 ----Angular 应用中的 8 个主要构造块： 模块 (module) 组件 (component) 模板 (template) 元数据 (Metadata) 数据绑定 (data binding) 指令 (directive) 服务 (service) 依赖注入 (dependency injection) ###模块(module): Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 Angular 模块或 NgModules。 自带的模板来定义组件视图。模板以 HTML 形式存在，告诉 Angular 如何渲染组件。 每个 Angular 应用至少有一个模块（根模块），习惯上命名为AppModule。 ----NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是： +declarations - 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。 +exports - declarations 的子集，可用于其它模块的组件模板。 +imports - 本模块声明的组件模板需要的类所在的其它模块。 +imports - other modules whose exported classes are needed by component templates declared in this module. +providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。 +bootstrap - 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。 模板语法： ` import {NgModule} from '@angular/core'; import {browserModule} from '@angular/platform-browser'; @NgModule({ imports: [browserModule],providers:[Logger],declarations:[AppComponent],export:[AppComponet],bootstrap:[AppComponent] }) export class AppModule{} ` --引导根模块的启动 main.ts: ` import { platformbrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; platformbrowserDynamic().bootstrapModule(AppModule); ` ###组件 ---组件是负责控制屏幕上的一笑块，称之为视图 Angular 支持数据绑定，一种让模板的各部分与组件的各部分相互合作的机制。 我们往模板 HTML 中添加绑定标记，来告诉 Angular 如何把二者联系起来。 ###指令 (directive) --通过指令提供的操作对DOM进行转化 ++组件是一个带模板的指令;@component 的装饰器实际上是一个@Directive的装饰器 *ngFor 每个英雄列表生成li标签 *ngIf判断是否存在 --属性型 指令修改一个现有元素的外观或行为。 **服务 概念：服务是一个广义范畴，包括：值、函数，或应用所需的特性。 ###依赖注入 *注入器维护了一个服务实例的容器，存放着以前创建的实例。 如果所请求的服务实例不在容器中，注入器就会创建一个服务实例，并且添加到容器中， 然后把这个服务返回给 Angular。 当所有请求的服务都被解析完并返回时， Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。 ***根模板： 三大特性 --imports 数组 --declarations 数组 --bootstrap 数组 通过引导根AppModule来启动应用。 在启动过程中，其中一步是创建列在bootstrap数组的组件， 并将它们每一个都插入到浏览器的DOM中。 ###用户的输入： ---绑定到用户输入事件 +要绑定 DOM 事件，只要把 DOM 事件的名字包裹在圆括号中， 然后用放在引号中的模板语句对它赋值即可。 --- $event 对象取得用户输入 +DOM事件可以携带对组件有用的信息 ---从一个模板引用变量中获得用户输入 +使用Angular的模板引用变量，这些变量提供了从模板中直接访问元素的能力， 在标识符号面前加上#号,就能构声明一个模板引用的变量 ##按键事件过滤（通过key.enter） *************表单 --概念：表单创建一个有机、有效、引人注目的数据输入体验。Angular 表单协调一组数据绑定控件，跟踪变更，验证输入的有效性，并且显示错误信息。 +双向数据绑定、变更检测、验证和错误处理 +创建的过程 --用组件和模板构建 Angular 表单 --用ngModel创建双向数据绑定，以读取和写入输入控件的值 --跟踪状态的变化，并验证表单控件 --使用特殊的CSS类来跟踪控件的状态并给出视觉反馈 --向用户显示验证错误提示，以及启用/禁用表单控件 --使用模板引用变量在 HTML 元素之间共享信息 ***指令 +ngModel 双向数据指令 通过 ngModel 跟踪修改状态与有效性验证 +NgForm NgForm指令为form增补了一些额外特性 ###快速创建angular项目 --全局安装： npm install -g @angular/cli --创建新的项目 ng new MyProject --启动项目开发服务器 cd MyProject ng serve --open ###依赖注入 drive() 概念：Angular 的依赖注入系统能够即时地创建和交付所依赖的服务。 *配置注入器：platformbrowserDynamic().bootstrapModule(AppModule); *在AppModule的providers注入服务 *Angular DI 是一个分层的依赖注入系统 ###TypeScript的配置： --TypeScript配置文件(tsconfig.json) ` { "compilerOptions": { "target": "es5","module": "commonjs","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"lib": [ "es2015","dom" ],"noImplicitAny": true,"suppressImplicitAnyIndexErrors": true } } ` #clone git clone https://github.com/angular/quickstart.git quickstart cd quickstart npm install npm start ###依赖注入 概念：可以让类从外部源中获得它的依赖，而不必亲自创建它们 *注入器injector ##创建和注册日志服务 要把日志服务注入到HeroService中需要两步： 创建日志服务。 把它注册到应用中。 ###模板语法的学习： *在模板中使用HTML代码 "*`console.log(ionic3+crodova2)`!"; "*`console.log(ionic3+crodova2)`!"; 表达式： 概念：表达式中的上下文变量是由模板变量、指令的上下文变量（如果有）和组件的成员叠加而成的。 如果我们要引用的变量名存在于一个以上的命名空间中，那么，模板变量是最优先的， 其次是指令的上下文变量，最后是组件的成员。 模板语句：模板语句用来响应由绑定目标（如 HTML 元素、组件或指令）触发的事件 `<button @click="deleteHero()">删除</button>` ###绑定类型数据流的三类： 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。 ---模板语法： 模板中的HTML 插值表达式( {{...}} ) 模板表达式 模板语句 绑定语法 属性 (property) 绑定 ( [property] ) Property binding ( [property] ) 属性、类和样式绑定 事件绑定 ( (event) ) 双向绑定 ( [(...)] ) 内置指令 内置属性型指令 NgClass NgStyle NgModel ([(ngModel)]) 内置结构型指令 NgIf NgFor 模板输入变量 微语法 NgSwitch指令 **自定义事件 ###使用 EventEmitter 实现自定义事件 --EventEmitter.emit(payload) 来触发事件 ###内置属性型指令 *Ngclass --添加或移除css类 *Ngstyle --添加或移除css样式 *NGModel --双向数据绑定表单的数据 *NgFor 重复器指令 trackBy 让显示的数据可以重复 *NgSwitch指令 : --通过switch语句来显示某一个，把选中的元素放入到Dom中来 -- 三个相互协作的指令：NgSwitch、NgSwitchCase 和 NgSwitchDefault ###模板引用变量 ( #var )：通过用来引用某个Dom的元素，可以引用angular中的组件或指令 ###输入输出属性 ( @Input 和 @Output ) *概念：所有的组件皆为指令，这些指令的属性必须被声明成输入或输出 `@input() hero:Hero; @Output() deleteRequest=new EventEmitter<Hero>(); @Output('myclick') clicks=new EventEmitter<string>(); ` ---在指令的元数据中 @Component({ inputs:['hero'],outputs:['deleteRequest'] }) #########管道合安全导航操作符号 *管道操作符号(|) +管道是一个简单的函数，它接受一个输入值，并返回转换结果 +管道操作符会把左侧的表达式传给右侧的管道函数 *安全导航操作符(?.)合空属性路径 +用于保护出现在属性路径的null和undefined的值，当数据的值为空的时候，保护视图渲染器，避免报错失败。 报错启动，发现问题： 'tsc' 不是内部或外部命令，也不是可运行的程序 或批处理文件。 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! angular-io-example@1.0.0 build: `tsc -p src/` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the angular-io-example@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists,but node_modules missing,did you mean to install? 解决方案： 1.安全TypeScript编译工具 npm install -g typescript 2.查看TypeScript的安全版本 tsc-v ###配置路由： *路由告知路由器，当用户点击链接或者把URL地址黏贴到浏览器的地址栏中，应该显示对应的页面 --路由定义包括以下部分： *Path: 路由器会用它来匹配浏览器地址栏中的地址，如heroes。 *Component: 导航到此路由时，路由器需要创建的组件（HeroesComponent）。 ###路由出口(Outlet) ###添加重定向路由 redorectTo: ###注册 HTTP 服务 : ###组件的生命周期： *ngOnInit() 开始初始化 *ngOnDestroy() *ngDoCheck() *ngOnChanges(changes){} 数据发生改变 *ngAfterContentinit(){} *ngAfterContentChecked (){} 选择变化 *ngAfterViewInit() ########模板： *{}：渲染 *[]: 绑定属性 `<vieo-control [volname]="myHero"></vieo-control>` *():处理事件 *[()]:双向数据绑定 <input [(ngModel)]="myName"/> * *星号：表示此指令将组件作为模块 `angular.config(function($stateProvider){ $stateProvider.state('main',{ url:'./',templateUrl:'template/main.html',controller:'MainCtrl' }) }).controller('MainCtrl',function(){})` export class MainCmp{ }

原文地址：https://www.jb51.cc/angularjs/146866.html