javascript 在 AngularJS 的 ionic 框架中使用 ui-router
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23444602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using ui-router in the ionic framework in AngularJS
提问by user3284007
I'm working on an app that uses the ionic framework. This in-turn uses the ui-router. Currently, I have a pretty basic two-page app. However, it will expand to be much larger. At this time, I get an error when I transition from my first view to my second view. The error says:
我正在开发一个使用离子框架的应用程序。这反过来使用 ui-router。目前，我有一个非常基本的两页应用程序。但是，它将扩展到更大。此时，当我从第一个视图转换到第二个视图时出现错误。错误说：
TypeError: Cannot read property '1' of null
at http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:14235:28
at updateView (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:37839:30)
at eventHook (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:37786:17)
at Scope.$broadcast (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19725:28)
at $state.transition.resolved.then.$state.transition (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:31686:22)
at wrappedCallback (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:18429:81)
at http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:18515:26
at Scope.$eval (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19441:28)
at Scope.$digest (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19267:31)
at Scope.$apply (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19547:24)
I am using 1.0.0 beta 3 of the Ionic Framework. My app.js file looks like this:
我正在使用 Ionic Framework 的 1.0.0 beta 3。我的 app.js 文件如下所示：
"use strict";
var myApp = angular.module('myApp', ['ionic', 'ngRoute']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('intro', { url: '/', templateUrl: 'app/account/welcome.html', controller: 'WelcomeController' })
.state('login', { url: '/account/login', templateUrl: 'app/account/login.html', controller: 'LoginController '})
;
$urlRouterProvider.otherwise("/");
});
function WelcomeController($scope) {
}
function LoginController($scope) {
}
My index.html looks like this:
我的 index.html 看起来像这样：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>MyApp</title>
<link rel="stylesheet" href="/vendor/ionic/release/js/ionic.bundle.min.js" />
<link rel="stylesheet" href="/css/app.css" />
<script type="text/javascript" src="/vendor/ionic/release/js/ionic.bundle.js"></script>
<script type="text/javascript" src="/vendor/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
<script type="text/javascript" src="/app/controllers.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
<h1 class="title">MyApp</h1>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right">
</ion-nav-view>
</body>
</html>
welcome.html looks like this:
Welcome.html 看起来像这样：
<ion-view>
<br /><br />
<h1>Welcome</h1>
<a class="button" href="/#/account/login">Login</a>
</ion-view>
login.html looks like this:
login.html 看起来像这样：
<ion-view>
<br /><br />
<h1>Login</h1>
</ion-view>
The view transitions just fine. However, the error I showed above concerns me. I'm afraid its going to bite me in the ass later. Does anyone know what would be causing this? Does anyone know how I can fix this?
视图转换得很好。但是，我上面显示的错误与我有关。我怕它以后会咬我的屁股。有谁知道这会导致什么？有谁知道我该如何解决这个问题？
Thank you!
谢谢！
回答by mhartington
If your using the bundle ionic.js file, you don't need to include ui-router, it already is included. You also don't need to include ng-router too.
如果您使用 bundle ionic.js 文件，则不需要包含 ui-router，它已经包含在内。您也不需要包含 ng-router。
回答by Thinkerer
ngRoute refers to the normal default router angular uses.
ngRoute 指的是正常的默认路由器角度使用。
While you put that as your dependency, you cannot use the UI-router method, i.e stateProviders and the states.
当你把它作为你的依赖项时，你不能使用 UI-router 方法，即 stateProviders 和状态。
In your case you have to remove ngRoute from your dependencies, or [ ]
在您的情况下，您必须从依赖项中删除 ngRoute，或者 []
var myApp = angular.module('myApp', ['ionic', 'ngRoute']);to
var myApp = angular.module('myApp', ['ionic', 'ngRoute']);到
var myApp = angular.module('myApp', ['ionic']);
var myApp = angular.module('myApp', ['ionic']);
and then troubleshoot further since its a null value, something else is broken.
然后进一步排除故障，因为它是一个空值，其他东西被破坏了。
