Ionic 和 Angularjs 视图导航答案

【问题标题】：Ionic and Angularjs view navigationIonic 和 Angularjs 视图导航
【发布时间】：2016-05-31 17:04:30
【问题描述】：

我是使用 angularjs 的新手，并且很难将 Angular 路由到要加载的新页面。本质上，我试图弄清楚如何在页面之间移动以构建多页面应用程序，但即使我已经创建了模块，我仍然会收到此错误。

模块“login.html”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

这些是我的 index.html 和 app.js 文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-           

scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the    
CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
</head>

<body>

<div ng-app='login.html'>
  <ion-nav-view></ion-nav-view>

</div>


</body>

</html>

app.js 文件：

// Ionic Starter App

var app = angular.module('ionicApp', ['ionic'])

app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')

$stateProvider.state('login', {
url: '/',
templateURL: 'login.html'
})
})

<ion-view title=""id="welcome-view" hide-nav-bar="true">
<ion-content>
<div  class="logo-welcome"></div>
<div class="login-btns">
<div id="social-links">
<ul>
<li ng-click="fbLogin()"><span class="ifacebook"><img src="img/social-   
icons/facebook.png"></span><a href="#" class="afacebook">sign in with   
facebook</a></li>
<li ng-click="gplusLogin()"><span class="igoogleplus"><img src="img/social- 
icons/googleplus.png"></span><a href="#" class="agoogleplus">sign in with   
google+</a></li>
</ul>
</div>
<hr id="login-divider" />
<div id="login-reg">
<button id="btn-login" class="button button-clear button-positive   
uppercase">Login</button>
<button id="btn-reg" class="button button-clear button-positive   
uppercase">Register</button>
</div>
</div>
</ion-content>
<div id="footer" class="bar bar-footer">
<div class="title em-footer-title">© TechieDreams</div>
</div>
</ion-view>

【问题讨论】：

标签： angularjs ionic

【解决方案1】：

您的错误在 index.html 文件中，

在正文中使用 ng-app 名称如下，

<body ng-app="ionicApp">

该应用名称应在 app.js 文件中使用，

var app = angular.module('ionicApp', ['ionic'])

因为，这是 angular js 的根元素，有助于执行我们的应用程序。参考：http://www.w3schools.com/angular/ng_ng-app.asp

【讨论】：

【解决方案2】：

您的错误出现在您的主 HTML 中

将<div ng-app='login.html'> 更改为<div ng-app='ionicApp'>，如您的第一个 JS 文件中所述

【讨论】：

【解决方案3】：

在你的正文标签中添加ng-app ="ionicApp"

【讨论】：