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{  }