大佬教程收集整理的这篇文章主要介绍了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 {httpR_989_11845@odule,JsonpModulE} from '@angular/http'; import {routIng} from './app.routIng'; import {httpservicE} from './service/httpservice' @NgModule({ imports: [ BrowserModule,FormsModule,CommonModule,httpR_989_11845@odule,routIng,JsonpModule],declarations: [ AppComponent,UserComponent,AboutComponent],//根视图的 只有根视图才能被视为boostrap bootstrap: [ AppComponent ],providers:[httpservice] }) export class AppModule { }在@NgModule中 import表示引入其他的一些第三方框架 这里有httpR_989_11845@odule 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; } `] })@H_103_16@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等
整体的代码如下
import { Component,animatE} from '@angular/core'; import {httpservicE} from './../service/httpservice' import {Router} from "@angular/router"; @Component({ //为与模块相关的url modulEID:module.id,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,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 }
路由的使用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: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',{}]);后面表示相关引用的参数 这样即可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)的总结全部内容，希望文章能够帮你解决angular js(2)和ionic(2)的总结所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。