angular新手入门(仅本人理解)

前言:  最近公司开发项目 准备要用到angular2 所以下面是最近本人这几天的心得 记录一下

-----       搭建angular-cli ----
   第一步安装node.js 
   第二步安装angular cli   npm install -g angular -cil 
   第三步在当前文件夹打开cmd     ng new 当前项目名字第四步 ng serve 
   第四步 开始运行 http://localhost:4200/ (默认是当前域名和端口)
-----       入口文件 ----- 

src/app/app.component.html  入口文件
--------   使用cli 创建文件  ------- 

ng generate component heroes默认创建三个文件  css html ts css 样式  html主体  ts 相当于js代码 
-------  实现双向数据绑定  ----------  

一, 
    <input [(ngModel)]="hero.name" placeholder="name"> 
   会有一个bug   Angular缺少 FormsModule 会报错   

       解决:      

        在跟模块app.module.ts 中 定义
                       import { FormsModule } from '@angular/forms';                    
                         在imports: [                    
                                    BrowserModule,                    
                                    AppRoutingModule,                    
                                    FormsModule    ,
              ],

二,
   使用自定义模板 # 号来进行操作 
   #自定义名字  (事件)=方法名(event)
            <input type="text" #able (keyup) = aaa($event)>
            <p>{{able.value}}</p>
-----------  angular 一些常用指令 ----
   第一:  *ngFor 来遍历数组
          <li *ngFor="let message of mailService.messages; index as i;">{{i}} - {{message}} </li>
                     渲染指令     数据        遍历的数组            索引    
   第二: *ngIf  控制元素的显示与隐藏   
                来同过true 和 fasle 来控制 
    
   第三:(click)=“可随意命名()”  点击事件

   第四: [class.selected]='hero === selectedHero'   动态的添加class 
                 class名字  保持同步 
    
   第五: #自定义名字  (事件)=方法名(event)    

-------------- angular 服务 储存数据   ------------------

       感觉这个有点难理解~~~~  加油!!

    ng generate service hero  先使用命令下载ts文件 
  @Injectable() 会绑定元数据 root 
  在 export class HeroService 里面存储数据 
     export class HeroService {
   
     constructor() { }
     getHeroes(): hero[] {
       return HEROES;
     }
} 
   在别的组件中直接引入ts文件 就可调用了...

----------------- angular 中路由的配置 ------------------

   感觉和vue差不多吧
   他会有一个配置文件 专门来存放路由的配置的 app-routing.module.ts
   先引入所跳转的组件 import 吧 
   在const routes : Router=[] 写配置路由  例如:{path:"/Router",component:RouterDomeComponent},   
在页面使用 <router-outlet>来存放页面数据    routerLink="/Router" 来匹配路由

重定向路由:
      {path: '/', redirectTo: '/dashboard', pathMatch: 'full' } 

------------------   父子组件传值 -------------------
import { Component, OnInit, Input ,Output, EventEmitter } from '@angular/core'; 在子组件ts文件引入 模块 
  父给子组件传值  :
           1, 通过 [自定义名字]="要传递的数据 " 
           2, 在子组件中ts文件中 使用@Input来接收  @Input 上定义的自定义名字 = any(不懂看看ts基础哦) 在页面就可以直接使用了 

 子给父组件传值:
           1,和vue一样 都是通过事件来传递 先找到一个方法 
           2,通过@Ouput来操作的 在子组件的ts文件中
                 @Output()  自定义名字 = new EventEmitter();实例对象
           3,在方法中  this.自定义名字(和上面一样).emit(传递的数据)
           4,在(自定义方法)="getData($event) 
           5, getData(e){console.log(e) }  这就可以打印出来了 
                             
---------------------  angular的Http 发送ajax请求 --------------------
    
           只想说 ajax文档太难看懂了 引入一堆报错(发牢骚.....)
https://blog.youkuaiyun.com/xin_bao_long/article/details/82798328   这个不错大家可以看看
   get请求:
import { Http, URLSearchParams,RequestOptions } from '@angular/http'; // 发送请求有关的类

import { Observable } from "rxjs"; // 明确请求后的可观察对象是Rx的可观察对象，如未指明是Rx的可观察对象，会报错。

import 'rxjs/add/operator/toPromise'; // 引入toPromise操作符，否则会报错，toPromise方法未定义。

       get() : Promise<string> {
    let serverurl: string = "url地址";
    // 创建请求参数对象，所有请求参数被放在此对象中。
  
       let param = new URLSearchParams();
    param.append("param1","test"); // 向请求参数中放入参数及值
    // 创建请求设置对象，将请求参数作为其构造方法参数对象                      的"search"属性值。
    // 请注意，在这里我们并未明确请求头（Headers），Angular会根据请求方法（method）// 及请求参数的类型，自动确定请求头类型。
    
        let options = new RequestOptions({search:param});
    // 发起get请求。注意http属性必须由依赖注入而来。
 

         return this.http.get(serverurl, options)
    
        .toPromise()    // 将可观察对象转为承诺，接下来按照承诺的方式处理。
   
        .then(response => {
        let data = response.json();
        if (data.is_ok == 2) {
           
         let result:string = data.rs;
           
         onsole.log(result);
    return Promise.resolve(result);
}
  return Promise.reject("false");
    })
         .catch(error => {
  console.log(error);
        return Promise.reject("false"); 
    });
}