码迷,mamicode.com
首页 > 其他好文 > 详细

【重要】ionic和Angular的安装步骤

时间:2018-03-22 17:35:21      阅读:1791      评论:0      收藏:0      [点我收藏+]

标签:rect   新闻   pos   use   令行   启动   引入   模板   启动服务   

首先搭建好npm和node环境的最新版本安装::

一:开始安装ionic:
1. npm install -g ionic(全局安装ionic)
2. ionic start 新建的项目名称 +模板样式 【创建的新项目+ 5选1模板样式】
3. cd 新建的项目名称 (切换到--新建的项目名称目录下)
4. ionic serve (启动服务)
5. ionic build (打包ionic)


//【新建项目时】,在ionic中提供了【5种多样的模板】:
ionic start 新建的项目名称 + (可选参数---例tabs)
1·tabs :一个简单的3选项卡布局
2·sidemenu:侧面有可滑动菜单的布局
3·blank:一个单独的启动器
4·super:启动项目超过14个可以使用的页面设计
5·tutorial: 一个引导项目


//使用ionic命令生成一个【news新闻页面】 g:generate
ionic g page news

//使用ionic命令生成一个【news新闻模块】 g:generate
ionic g component news


总结:Ionic CLI 可以生成 :(例:ionic g page news--->指创建一个新的页面/组件 )
pages, providers, tabs, pipes, components,directives等。

 


二:首先搭建好npm和node环境的最新版本安装::

开始安装 Angular::

1·npm install -g @angular/cli (全局安装 Angular CLI)
2·ng new 新建项目名称 (创建新项目)
3·cd 新项目名称 (切换到新项目目录)
4·ng serve --open 或者 ng serve --o(启动服务器)

 

 

 


三:开始安装并使用typescript:

1.使用npm安装::
npm install -g typescript

2.构建第一个typescript文件::

命名为 test.ts文件,写入一下内容:

function greeter(person) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

 

3.编译 .ts文件:

执行命令行输入: tsc test.ts
可以自动将 test.ts文件转化为同名的 test.js文件


4. 使用::

创建有个html文件,引入test.js文件即可!!

 

【重要】ionic和Angular的安装步骤

标签:rect   新闻   pos   use   令行   启动   引入   模板   启动服务   

原文地址:https://www.cnblogs.com/chenhongshuang/p/8624331.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!