离子模板移动不起作用 [英] Ionic template does not work on mobile
问题描述
我一直在做基于离子与框架角的UI路由器AngularJS的应用程序。它的工作原理十全十美的网络浏览器在桌面上，但它并没有显示在我的移动任何东西（构建后，我在2设备上运行的话）。的问题是，它不会加载UI视图内模板
I have been making an app in AngularJS with Angular-ui-router based on Ionic Framework. It works perfect on the desktop in every web browser, but it does not show anything on my mobile (after build I run it on 2 devices). The problem is that it doesn't load template inside ui-view.
我有一个index.html文件中，主体部分是以下（在头部分有包括一切）：
I have got an index.html file, the body section is below (in head section there is everything included):
<body ng-app="starter">
<div ui-view=""></div>
</body>
和app.js的一部分 - 运行和配置。
And the part of app.js - run and config.
angular.module('starter', ['ionic', 'ngStorage', 'ngAnimate', 'naif.base64', 'ui.router'])
.run(function($ionicPlatform, $rootScope, $location) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
history = [];
$rootScope.$on('$routeChangeSuccess', function() {
history.push($location.$$path);
});
$rootScope.back = function () {
history.back();
};
})
.config(function($stateProvider, $urlRouterProvider) {
"use strict";
$stateProvider
.state('connectionCheck', {
url: '/',
controller: ['$scope', '$location', '$http',
function($scope, $location, $http) {
$http.get('http://pingurl.com')
.success(function(data) {
jdata = data;
if (data.status === "success") {
$location.path('/login');
}else{
$location.path('/error');
}
})
.error(function() {
$location.path('/error');
});
$scope.retry = function() {
$location.path('/');
};
}
]
})
.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('main', {
url: '/main',
templateUrl: 'main.html',
controller: ['$scope', '$location', '$localStorage',
function($scope, $location, $localStorage) {
$scope.username = $localStorage.username;
$scope.token = $localStorage.token;
$scope.email = $localStorage.email;
$scope.goToAlerts = function() {
$location.path('/alerts');
};
$scope.goToSettings = function() {
$location.path('/settings');
};
$scope.goToLocation = function() {
$location.path('/location');
};
$scope.goToSymptoms = function() {
$location.path('/symptoms');
};
$scope.getClass = function(path) {
if ($location.path().substr(0, path.length) == path) {
return "active"
} else {
return ""
}
};
}
]
})
.state('error', {
url: '/error',
templateUrl: 'error.html'
})
.state('register', {
url: '/register',
templateUrl: 'register.html',
})
.state('push', {
url: '/push',
templateUrl: 'push.html',
})
.state('alerts', {
url: '/alerts',
templateUrl: 'alerts.html'
})
.state('newSymptom', {
url: '/newSymptom',
templateUrl: 'newsymptom.html'
})
.state('symptoms', {
url: '/symptoms',
templateUrl: 'symptoms.html'
})
.state('newAlert', {
url: '/newalert',
templateUrl: 'newalert.html'
})
.state('settings', {
url: '/settings',
templateUrl: 'settings.html'
})
.state('location', {
url: '/location',
templateUrl: 'location.html'
});
$urlRouterProvider.otherwise('/');
}).
//some controllers goes here
我已经检查/试着做？
What I have already checked/tried to do?
- 我把例如内容index.html的 - 它的工作 。
- 我试过的UI视图chanage名称，并在每个状态的templateURL值添加它们。
- 我改变了.html文件在他们exlude错误，但它并没有帮助。
任何人都更有经验与离子/角可以给我一个提示，这里有什么问题？
Can anyone more experienced with Ionic/Angular give me a hint what is wrong here?
推荐答案
我似乎发现它往往是由于您加载的模块，所以很可能在这行。
I seem to notice that it's often due to the modules you're loading in. So It's likely in this line.
angular.module('starter', ['ionic', 'ngStorage', 'ngAnimate', 'naif.base64', 'ui.router'])
尝试通过确保检查每个模块：
Try checking each module by making sure:
- 您把它添加到您的index.html
- 它被称为正确
- 这是最新的
您可以在同一时间删除每个，一个，然后看它是否在设备上工作弄清楚。
也知道AngularJS开箱即用AngularUI路由器和使用了一种叫做路由的意见事情。该UI的路由器使用一种叫做状态事情，是最常用的但AngularJS非官方途径和离子使用自己的视图状态的系统，基本上是同样的事情UI的路由器只是爱奥尼亚命名空间。所以这就是你需要仰视的东西，或者你可能会发现自己陷入你在很多墙壁的建立，因为你调用 ui.router ，我敢打赌这是什么迷惑你应用程序，因此将其删除。
Also know that AngularJS out of the box uses AngularUI Router and this uses a thing called routing for views. The UI-Router uses a thing called states that is the most used but the unofficial way for AngularJS and Ionic uses their own view state system that is basically the same thing as the UI-Router just with the Ionic namespace. So that is something you need to look up or you may find yourself running into a lot of walls during you builds because you are calling ui.router and I bet it's what's confusing your app, so remove it.
这篇关于离子模板移动不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
