ionic框架使用以及angular环境搭建

最新推荐文章于 2025-07-08 12:40:09 发布

原创最新推荐文章于 2025-07-08 12:40:09 发布 · 779 阅读

1 ·

CC 4.0 BY-SA版权

augular的学习专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Node.js环境下搭建Angular环境和创建新项目，以及如何使用Ionic框架创建混合应用。首先，通过安装Ionic来创建单页应用，接着讨论了如何将应用打包为混合移动应用。此外，文章还涵盖了Angular的学习过程，包括环境搭建和项目创建。最后，简单概述了AngularJS的目录结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ionic框架

在基于有nodejs的情况下安装ionic

npm i -g cordova ionic

创建一个新项目

ionic start 项目名字   选择tabs

运行 :

cd 项目名字  
ionic serve

打包成单页面项目运行在微信/web浏览器:

$ ionic build

打包成混合app项目:

$ ionic build
$  ionic cordova platform add ios
$  ionic cordova run android

angular的学习

搭建angular环境

在基于nodejs情况下安装脚手架

npm i -g @angular/cli

（只需安装一次）

ng v 查看当前angular版本

创建一个新项目

ng new 项目名字  （ ng new 项目名字 --ship-install 表示跳过 npm i 这一环节）
选择是否需要增加路由  y
选择预处理文件
回车后会自动下载依赖包  可能会出错 可以结束自己下
运行  ng serve --open

angularjs目录结构

目录结构

src写代码
   app放组件跟根模块
	app.module.ts根模块
	      @ngmodule: 放的是组件
	       imports：放的是模块
	       providers：放的是服务
   assets 放静态资源文件
   browsers list 支持浏览器的配置文件
   index.html  html入口文件
   styles.less 全局css文件
   main.ts整个项目的入口
   poly fills.ts 填充库   augular6使用socket.io报global is not defined  时在填充库里配置(window as any).global = window;
   test.ts 测试的入口文件