ionic+AngularJs项目

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

Alan_阿兰

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

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sixteen_cicle/article/details/70845259

这篇博客详细介绍了如何利用Ionic和AngularJS框架来创建一个移动应用项目，包括主要的文件结构，如index.html和app.js，以及涉及到的ion-side-menus组件的使用代码。

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

ionic项目流程
1.自己创建的文件夹名称
2.创建一个ionic空项目
ionic start oneApp blank
3.在WWW文件夹下创建 templates,controllers 文件夹

4.开始项目配置

主页面

../WebContent/www/index.html

<ion-nav-view></ion-nav-view>

app.js添加

../WebContent/www/js/app.js

angular.module('myapp',[])
.run(function(){

})
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider){
	$stateProvider
	.state('loading',{
		url:'/',
		cache:false,
		templateUrl:'templates/home/loading.html',
		controller:'LoadingController',
	})
	$urlRouterProvider.otherwise('/');
	$ionicConfigProvider.views.swipeBackEnabled(false);
	
})

涉及知识点：
1.ionic路由配置问题
2.在app.js里添加控制器名，在index里引用已添加的控制器名，在controllers文件夹里添加相应的控制器
3.controllers文件夹里添加相应的控制器

常用服务说明：

$stateProvider,
$urlRouterProvider,
$ionicConfigProvider

控制器注入服务(有无限的可能)

$scope,
$rootScope,
$state,
$http,
$ionicLoading,
$timeout,
$ionicPopup,
$ionicHistory,

basePage,
$cordovaFileTransfer,
$cordovaSplashscreen,
$cordovaFileOpener2,
loaderProgressPopup,

4.在HTML页面里面写：

ion-side-menus相关代码

贴上创建一个ionic项目目录