angular2---总结

1、安装配置

1、node 和 npm 大家应该都安装了吧，
  然后来验证下你的版本是否是node 8.x 和 npm 5.x 以上的版本，更老的版本可能会出现错误.
2、安装脚手架
  npm install -g @angular/cli
3、生成新项目
  ng new my-app

 官网学习更多：http://angular2.axuer.com/docs/ts/latest/guide/forms.html

2、项目文件

1、页面文件可以用普通html页面的写法来写，也可以使用ionic2来写，ionic2是基于angular2的，语法跟以前有了很大的变化,这样更方便些，每个页面都是一个组件，组件里也可以套组件，html标签都可以自定义，也就可以无限扩展
学习官网：http://ionic.io/2
2、js文件
生成的新项目默认使用的是TypeScript，强类型，有点类似c#的感觉，可以去官网看具体内容：
https://www.tslang.cn/
3、样式文件
可以选择sass或者less
sass安装： 首先安装node-sass包
npm install node-sass  --save-dev
4、angular2中服务的创建和使用
首先要创建一个服务以xxx.service.ts的文件名

内容：

import {Injectable} from 'angular2/core';
import {PLANETS} from './planets-data';
@Injectable()
export class PlanetService {
    getPlanets(){//在服务里写一个方法
        return Promise.resolve(PLANETS);
    }
}

需要将这个文件在app文件中的app.module.ts这个文件中的import一下我们的文件 并且需要 本文件中的providers:[PlanetService ]中写入你的服务

最后就是将我们写的服务注入到我们需要的模块中也就是 调用服务

import {Component} from "angular2/core";

import {PlanetService} from "./planet.service"; // 引入服务（import）的地址 import {PlanetComponent} from "./planet.component"; import {Planet} from "./planet"; @Component({ selector: "my-app", templateUrl: "app/planet-list.component.html", directives: [PlanetComponent], providers:[PlanetService], // 使用providers 来注入服务 }) export class PlanetListComponent{ public planets : Planet[]; public selectedPlanet = {}; public onNameClick(planet){ this.selectedPlanet = planet; } constructor(public _planetService: PlanetService){ // this.getPlanets(); } // make a call to our planet service getPlanets(){ //4 this._planetService.getPlanets().then((planets:Planet[])=>this.planets = planets);//调使用promise调用服务里面的方法 } }

3、模块

1、根模块。
一个ng2应用至少要有一个根模块，包含ng2自带的BrowserModule，并声明为引导模块，在应用启动时将从此模块展开。
随着应用的扩大，所有的事情都在一个模块中完成难免会变乱，
然后会有一个问题，这些子模块也不可能同时全部都会被使用，也就是只有其被激活时才有用，那仍然在应用引导时从根模块加载所有子模块必然会导致性能的浪费以及拖慢执行速度。此时惰性加载模块就派上用场了，将一个子模块定义为惰性加载后，只有在通过路由激活此模块时才会开始加载此模块(并且ng2甚至支持异步预加载，即后台预加载懒加载的模块，这样当懒加载模块需要被加载时其实其已经加载完成了，又加快了响应速度)。
 2、模块之间的关联
模块之间一定要有共享或继承资源的方式，不然的话每个子模块都必须实现可能用到的全部功能。


比如一个消息弹窗组件，不可能每个子模块都自己声明一个消息组件然后使用，这样的维护压力很大且代码严重浪费。


此时就用到了模块的引入和导出——
例如：
模块A可以引入另一个模块B，然后A就可以使用B中导出的组件、管道和指令。
具体写法可以去官网详看。

问题一:

Click Delays 点击延迟问题?

即使不使用ionic2,正常的元素点击，某些元素在click事件也是会有300ms的延迟，在ionic里也是只有button和a可以立即响应的。如果要给其他的元素比如div增加click事件，可以把click更换成 tap ,或者给给该元素加上tappable属性即可解决。

 问题二：

http请求跨域问题？

在ionic2里使用angular2的HTTP请求api时，如果在浏览器里运行，经常会遇到跨域问题，比如：

XMLHttpRequest cannot load http://www.xxx.com/clt/jsp/v3/channelContList.jsp?n=25950&WD-UUID=864819028898243&pageidx=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8101' is therefore not allowed access.

这是因为chrome不允许跨域访问。可以给谷歌浏览器属性里设置跨域:
mac os系统：
直接在命令行中敲入：

open -a "Google Chrome" --args --disable-web-security --user-data-dir

或者

open -a "Chrome" --args --disable-web-security --user-data-dir

windows系统：
直接创建chrome浏览器的快捷方式，在属性中找到打开路径

在...chrome.exe后面加上...chrome.exe --args --disable-web-security --user-data-dir