angular js(2)和ionic(2)的总结

最近一段时间又学习了一遍angular 2 和 ionic 2 主要和1的差别个人认为主要在于typescript这种语法的差异,typescript是一种OOP编程语言，是js的超集，

他将js面向对象编程弱的特点给完全放大出来而解决所以我们看到angular 中一个界面就是一个类 component 在这个类中的数据绑定按钮点击事件等都是

在这个类中实现的

首先看一下这个项目的目录结构

在src下使我们主要工作的目录

app.module.ts是真个项目的入口文件

import { BrowserModule } from '@angular/platform-browser';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import { AppComponent }  from './app.component';
import {UserComponent} from  './component/user.component'
import {AboutComponent} from './component/about.component'
import {HttpModule,JsonpModule} from '@angular/http';
import {routing} from './app.routing';
import {HttpService} from './service/HttpService'
@NgModule({
  imports:      [ BrowserModule,FormsModule,CommonModule,HttpModule,routing,JsonpModule],
  declarations: [ AppComponent,UserComponent,AboutComponent],
  //根视图的 只有根视图才能被视为boostrap
  bootstrap:    [ AppComponent ],
  providers:[HttpService]
})
export class AppModule { }

在@NgModule中 import表示引入其他的一些第三方框架这里有HttpModule JSONModule等

declararions 表示我们需要用到的界面这里有AppComponet,UserComponent等这些界面 \

boostrap表示根界面只能有唯一的一个这里便是用AppComponent

providers 表示用到的服务这里HttpService表示可以用到全局服务当中去

再来要看看一个个单个的界面

以user为例

在user.component.ts中定义了一个界面应有的一些行为等

import { Component,Input,
    trigger,
    state,
    style,
    transition,
    animate} from '@angular/core';
import {HttpService} from './../service/HttpService'
import {Router} from "@angular/router";

和上面根界面一样表示引入第三方的一些框架

随后是页面的声明，

@Component({
    //为与模块相关的url
    moduleId:module.id,
    selector: 'user',
    //providers表示服务的创建者
    templateUrl:'user.component.html',
    styles: [`
    .hero {
      background-color: #CFD8DC !important;
      color: white;
    }
`]

})

moduleId 表示与模块相关的url

随后selector 表示可以在其他界面引用该界面的hrml标签这里用到了user

providers 表示相关用到的协议，templateURL 表示html页面同时也可以用template来直接写html标签

这里还可以使用styles 来声明相关属性

export class UserComponent {
    name = 'Angular';
    address: address;

    divHtml = "<p>caokaiqqq</p>";
    inputtext:any
    hobb:string[]
    constructor(private HttpService:HttpService,private router:Router) {
        this.address = {
            street:"cangqian",
            state:"hangzhou"
        }

export表示将这个方法暴露出去可供外部的其他界面引用该界面等

constructor表示构造器，在一个类中可声明相关的属性例如name address等

私有的httpService协议等

整体的代码如下

import { Component,Input,
    trigger,
    state,
    style,
    transition,
    animate} from '@angular/core';
import {HttpService} from './../service/HttpService'
import {Router} from "@angular/router";

@Component({
    //为与模块相关的url
    moduleId:module.id,
    selector: 'user',
    //providers表示服务的创建者
    templateUrl:'user.component.html',
    styles: [`
    .hero {
      background-color: #CFD8DC !important;
      color: white;
    }
`]

})
export class UserComponent {
    name = 'Angular';
    address: address;

    divHtml = "<p>caokaiqqq</p>";
    inputtext:any
    hobb:string[]
    constructor(private HttpService:HttpService,private router:Router) {
        this.address = {
            street:"cangqian",
            state:"hangzhou"
        }
        this.hobb = ["mo","read"];
        this.HttpService.getPost().then(
            post => {
                alert("成功");
                console.log(post);
            }
        ).catch(error => {
            alert(error);
        })
        //编码成base64
        var dic = {
            name:"cao",
            age:12
        }
        var base64 = btoa(JSON.stringify(dic));

        console.log(atob(base64));
        //解码成base64
    }
    addHobby(hobby:string){
        alert(hobby);
        this.router.navigate(['/about',{}]);

    }
alert(){

}
}
//定义接口
export interface address {
    street:string,
    state:string
}

路由的使用

在app下创建一个app.routing.ts

import {ModuleWithProviders} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import {AboutComponent} from  './component/about.component';
import {UserComponent} from './component/user.component';
import {AppModule} from "./app.module";

第一步还是引入相关的框架

随后是路由appRoutes的定义

const appRoutes:Routes = [
    {
        path:'',
        component:UserComponent
    },
    {
        path:'about',
        component:AboutComponent
    }
];

path表示相关的路由 component表示使用相关的界面

随后将这个appRoutes定义的export出去即可全部的代码如下

/**
 * Created by hcnucai on 2017/3/2.
 */
import {ModuleWithProviders} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import {AboutComponent} from  './component/about.component';
import {UserComponent} from './component/user.component';
import {AppModule} from "./app.module";
const appRoutes:Routes = [
    {
        path:'',
        component:UserComponent
    },
    {
        path:'about',
        component:AboutComponent
    }
];
export const routing:ModuleWithProviders =RouterModule.forRoot(appRoutes);

在Index.html中的使用首先是最起码的url /

  <body>
   <base href="/">
    <my-app>Loading AppComponent content here ...</my-app>
  </body>

随后可以在一般的html中可以用router-link来进行跳转

import { Component } from '@angular/core';

@Component({
  moduleId:module.id,
  selector: 'my-app',
  template:'<ul><li><a routerLink = "/">home</a> </li>' +
  '<li><a routerLink="/about">about</a> </li></ul>' +
  '<router-outlet></router-outlet>'
})
export class AppComponent {
}

这样就可以在路由中进行跳转

在代码中也可以进行跳转

      this.router.navigate(['/about',{}]);

后面表示相关引用的参数这样即可

关于httpService的学习

import {Injectable} from '@angular/core';
import {Http,JsonpModule} from  '@angular/http';
import 'rxjs/add/operator/toPromise';

通过promise来进行返回

//记下本服务的元数据
@Injectable()
export class HttpService {
    constructor(private http:Http) {
        console.log("Post Service init");
    }
    //发起请求的方法
    getPost():Promise<any[]> {
        var param = {
            authtoken: "0B849459E30161BE5A5E302F257022FA1FCF5D09E7BD2A2D",
            count: 100,
            page: 1
        }
        return this.http.post("http://dodo.hznu.edu.cn/apiteach/courselist",param,{})
            .toPromise()
            .then( response => {

               let res =  response.json();

               if(res.retcode != 0){
                   return Promise.reject(res.message);
               }else
                   return Promise.resolve(JSON.stringify(response.json().items));
            })
            .catch(error => {
                return Promise.reject(error);
            });
    }

}

传进参数即可

返回promise 这个参数 @injectable来表示引用相关的元数据

以上就是对angular2的相关总结

ionic 也是和angular2差不多

在app.module.ts中

 imports: [
    IonicModule.forRoot(MyApp,{
      menuType: 'push',
      platforms: {
        ios: {
          menuType: 'overlay',
        }
      },
    })
  ],

表示用MyApp中来进行引用

其他大致如此可以在theme的variables.scss中改变相关的默认属性

例如$color等属性

angular js(2)和ionic(2)的总结

猜你喜欢