当前位置:首页 > Javascript技术文章 > Ionic2开发环境搭建教程

Ionic2搭建开发环境步骤

  • 发布时间:
  • 作者:码农之家原创
  • 点击:137

这篇文章主要知识点是关于Ionic2、开发环境搭建、ionic2懒加载配置详解 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下java相关资源

JavaScript框架设计

JavaScript,框架设计

查看详情

Ionic2开发环境搭建教程

关于网络环境:ionic开发环境不需要FQ。我这里没有设置FQ,亲测可行。但是angular2的开发环境搭建,则需要FQ网络,否则很多包会安装失败。

建议大家在搭建开发环境的时候,不要参考百度出来的各种博客,太零碎,重要的是时间久,也不一定写的对。强烈建议参考官网引导教程。http://ionicframework.com/gettingstarted/

1.下载安装Node.js。官网地址:https://nodejs.org/en/我安装的是v7.10.0版本。

2.安装完成后通过命令行 node -v 可查看安装的版本。

3.通过npm安装cordova和ionic。输入:npm install -g cordova ionic

Ionic2开发环境搭建教程

安装完成后窗口如下:

Ionic2开发环境搭建教程

4.ionic安装成功之后,即可创建你的第一个项目:ionic start myApp tabs 此处默认创建ionic2的项目,如果需要创建ionic1.x版本,则在命令的最后面加上 --v1。另外此处是tabs是模板的意思,另外还有blank/sidemenu/tutorial/super等几个模板。

Ionic2开发环境搭建教程

5.项目创建成功后,cd到项目根目录,运行ionic serve即可运行项目,会自动打开浏览器查看。

Ionic2开发环境搭建教程Ionic2开发环境搭建教程

整个Ionic2项目的目录结构如下图所示:

Ionic2开发环境搭建教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

ionic2懒加载配置详解

文章标题为part 1,并解释目前可以如此配置,但后续使用上可能还有变动。

以ion-cli默认home组件为例。添加home.module.ts文件

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
@NgModule({
 declarations: [HomePage],
 imports: [IonicPageModule.forChild(HomePage)],
 exports: [HomePage]
})
export class HomePageModule { }

修改home.ts,主要是加入IonicPage,其配置项可参考官方文档。

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
@IonicPage()
@Component(... )
export class HomePage { ... }

修改app.component.ts, HomePage 改为 'HomePage' , 删除app.module.ts及其他页面用到的 import { HomePage } from '../pages/home/home'; 因为不需要这个了,在需要的位置直接字符串引用即可。

ionic2懒加载配置详解

rootPage:any = 'HomePage';

ionic serve 看到如下类似文件代表成功。

ionic2懒加载配置详解

参考官方博客: http://blog.ionic.io/ionic-and-lazy-loading-pt-1/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到让JS验证密码不能为空的实、 echarts中箱线图的分析与绘、 JavaScript中的call、apply方法、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:js上传文件功能的实例讲解

下一篇:D3.js制作图表实例讲解

展开 +

收起 -

Ionic2,开发环境搭建 相关内容
21天学通HTML+CSS+JavaScript Web开发

21天学通HTML CSS JavaScript Web开发(第7版) 是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本,作者在本书囊括了新的HTML5与CSS3技术,并采用易于理解的步骤式教程讲解了这些技

查看详情
JavaScript网页动画设计

JavaScript网页动画设计 由业界先进的动画库Velocity。js的作者所著,书中内容共分为8章,简明扼要地总结了在网页上使用动画的技术技巧,让读者掌握如何有效利用动画实现无与伦比的用户体验

查看详情
JavaScript语言精粹

JavaScript曾是全世界非常容易误解的言语,由于它肩负过多的特点,包含槽糕的互动和不成功的设计方案,但伴随着Ajax的来临,JavaScript从极受误会的程序语言演化为十分时髦的言语,这除开好

查看详情
JavaScript之美

阅读文章这书好像是坐着来与一些JavaScript大师共进午餐,听她们探讨她们现场不断涌现出去的新念头。JavaScript能够说成全世界*异议和别人误会*多的程序语言。许多人企图用别的语言替代它的

查看详情
同构JavaScript应用开发 查看详情
完美图解物联网IoT实操:ESP8266 Arduino,Cordova物联网移动App,JavaScript微控制器编程

完美图解物联网技术系列》图书是当前物联网开发技术应用的集大成者。本书内容以Arduino和JavaScript为主线,开发物联网应用、手机App和操控微电脑

查看详情
JavaScript编程全解

JavaScript编程全解 全方位地介绍了JavaScript开发中的各个主题,无论是前端还是后端的JavaScript开发者都可以在本书中找到自己需要的内容。本书对HTML5、Web API、Node.js及WebSocket等最新的热门技术也

查看详情
Ionic2,开发环境搭建 学习笔记
网友NO.415396

ionic2中使用自动生成器的方法

ionic generator是命令行的功能,ionic2自动帮我们创建应用程序,从而节省了大量的时间,并增加我们的速度来开发一个项目的关键部分。 ionic generator使我们可以自动创建以下几部份: •component •directive •page •provider 一、创建页面:ionic g page [PageName] 通过这个命令创建一个新的页面,ionic2项目中这个命令使​​用最多 我们只需要进入我们的命令行中,并运行下面的命令: ionic g page login# Results: √ Create app/pages/login/login.html √ Create app/pages/login/login.scss √ Create app/pages/login/login.ts login.ts: import {Component} from '@angular/core'; import {NavController} from 'ionic-angular'; @Component({ templateUrl: 'build/pages/login/login.html', }) export class LoginPage { constructor(public nav: NavController) {} } login.html: ion-header ion-navbar ion-title login /ion-title /ion-navbar/ion-headerion-content padding class="login"/ion-content 二、创……

网友NO.641887

ionic2打包android时gradle无法下载的解决方法

问题 之前在使用ionic2时使用建立android平台命令或者编译时,总是会在获取gradle时卡住,等很久进度也不变化,导致命令超时失败。于是经过查阅资料和自己实践测试,总结出以下办法。 方法 其实主要原因是用命令下载时用的是指定的下载途径(可能不该这样形容,欢迎大家评论批评指正),国内通过这样下载十分慢,甚至时断时续,从而导致出现上面的问题。 所以我们自己去下载gradle,存放在本地,然后更改配置文件,使其不去网上下载而是从我们指定的本地位置获取。 首先我们打开下面这个js: 你的项目名称/platforms/android/cordova/lib/builders/GradleBuilder.js 其中有对distributionUrl的默认定义: var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'http\\://services.gradle.org/distributions/gradle-2.14.1-all.zip'; 我的是2.14.1版本,大家的版本可能不一样,但是方……

网友NO.442496

ionic2屏幕适配实现适配手机、平板等设备的示例代码

本文介绍了ionic2屏幕适配实现适配手机、平板等设备的示例代码,分享给大家,具体如下: 推荐使用的编辑器是:VS code (Visual Studio Code)=只负责编辑文档,不编译。 而WebStorm 有检查编译等,在ionic1开发的时候,还很方便用浏览器随时点击按键浏览效果,但是开发ionic2之后,ionic2有自动检查编译,会照成webstorm卡顿,无法编辑。 一、首先增加一个一面作为测试 我使用的工程是sidemenu 在项目目录下执行如下命令: ionic g page page4 二、运行 命令打开浏览器调试 Ionic serve 三、修改page4.html文件的内容如下: ion-header ion-navbar button ion-button menuToggle ion-icon name="menu"/ion-icon /button ion-titletitle/ion-title /ion-navbar /ion-header ion-content ion-grid ion-row ion-col ion-card ion-card-content card content /ion-card-content /ion-card /ion-col /ion-row ion-row ion-col ion-card ion-card-content content /ion-card-content /ion-……

网友NO.471215

ionic2懒加载配置详解

文章标题为part 1,并解释目前可以如此配置,但后续使用上可能还有变动。 以ion-cli默认home组件为例。添加home.module.ts文件 import { NgModule } from '@angular/core';import { IonicPageModule } from 'ionic-angular';import { HomePage } from './home';@NgModule({ declarations: [HomePage], imports: [IonicPageModule.forChild(HomePage)], exports: [HomePage]})export class HomePageModule { } 修改home.ts,主要是加入IonicPage,其配置项可参考官方文档。 import { Component } from '@angular/core';import { IonicPage } from 'ionic-angular';@IonicPage()@Component(... )export class HomePage { ... } 修改app.component.ts, HomePage 改为 'HomePage' , 删除app.module.ts及其他页面用到的 import { HomePage } from '../pages/home/home'; 因为不需要这个了,在需要的位置直接字符串引用即可。 rootPage:any = 'HomePage'; ionic serve 看到如下类似文件代表成功。 参考官方博客: http://blog.ionic.io/ionic-and-l……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757