angular ionic 入门

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

胖鹅68

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

阅读量448

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hbiao68/article/details/52683351

本文介绍如何在AngularJS项目中使用Ionic框架配置UI Router，并展示了如何定义状态和控制器来实现导航和数据展示功能。

在定义自己创建的模块需要引入"ionic"模块

//自己创建的hkApp模块，依赖ui.router和 ionic这两个模块
angular.module("hkApp",["ui.router","ionic"])
.config(function($stateProvider,$urlRouterProvider) {
	$stateProvider
		//进入设置界面
		.state('setting_index', {
			url: '/setting/index',
			templateUrl: 'setting/setting_index.html',
			//ui-router的控制器引用其他service的方法，参数$state只能在$scope后面，否则会报错
			controller: ["$scope", "$state", function ($scope, $state) {

				//显示数据内容
				$scope.formData = {};
				//给数据内容赋值
				$scope.formData.mobile = "18229886770";

				//添加编辑用户名事件
				$scope.editUserName = function () {
					$state.go('setting_edit_username');
				};
				/添加显示地址内容事件
				$scope.showAddress = function () {
					$state.go('setting_edit_address');
				};
				//跳转到编辑手机号码页面
				$scope.editPhone = function () {
					$state.go('setting_edit_phone');
				};
			}]
		})
})

由于ionic模块已经包含了“ui.router”这个功能，因此不需要再次引入“ui.router”模块了。

修改办法：

angular.module("hkApp", ["ionic"])
.config(function($stateProvider,$urlRouterProvider) {
	$stateProvider
		//进入设置界面
		.state('setting_index', {
			url: '/setting/index',
			templateUrl: 'setting/setting_index.html',
			//ui-router的控制器引用其他service的方法，参数$state只能在$scope后面，否则会报错
			controller: ["$scope", "$state", function ($scope, $state) {

			}]
		})
})