angularjs 和 ionic 框架和 nodejs答案

【问题标题】：angularjs and ionic framework and nodejsangularjs 和 ionic 框架和 nodejs
【发布时间】：2016-07-16 18:11:49
【问题描述】：

 **html file**
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<div ng-controller="loginCtrl">
<h3>Login</h3>
<form>
<label>Username:</label><input type="text" ng-model="username" /><br><br>
<label>Password:</label><input type="password" ng-model="password"><br>
<button  type="submit" ng-click="submit()">login</button> 
</form>
</div>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
<script type="text/javascript">
var app = angular.module('starter', ['ionic']);
app.controller('loginCtrl', function($scope, $location, $http, $state){
$scope.submit=function()
{
var user=$scope.username;
var pass=$scope.password;
if($scope.username=="admin" && $scope.password=="1234")
{
$location.path('templates/first');
}

别的 { /alert("错误");/ $location.path('/second'); } }
}); location.path 是导航页面的正确语法，但它在 url 栏中工作，而不是页面导航。

**app.js file**
angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('/', {
url: '/',
abstract: true,
templateUrl: 'index.html'
})
.state('/first', {
url: '/first',
abstract: true,
templateUrl: 'templates/first.html'
})
.state('/second', {
url: '/second',
abstract: true,
templateUrl: 'templates/second.html'(these first and second html pages are given in templates folder in www folder of the project.
});
$urlRouterProvider.otherwise({ redirectTo: '/login' });
});

点击提交按钮后页面未导航到 first.html 页面。

【问题讨论】：

$location.path('templates/first');你确定那条路吗？ /first 而不是 templates/first 怎么样？
请详细说明您的问题。
试试 $state.go('stateName')

标签： angularjs node.js ionic-framework

【解决方案1】：

您使用了错误的$location.path('templates/first');，因为在您的模块定义中您已将其声明为url: '/first'。而是使用$state.go('/first') 导航到您的页面。
还要从 first 和 second 页面定义中删除 abstract 属性。
$urlRouterProvider.otherwise({ redirectTo: '/login' });这也是错误的，因为没有login这样的url

希望对你有帮助。

【讨论】：

first.html 页面位于模板文件夹中。所以我保留了 $location.path('templates/first');实际上，在 URL 栏中，它会转到那个特定的地方，但页面不会去。它仍然在登录页面本身，我也尝试了 $state.go 它给出了一个错误，因为“无法从状态''解析'/first'”而且我认为一些 ion-nav-view 指令可能对导航有用。你能谈谈吗？因为我的first.html页面只有一行登录成功。
首先$location.path() 不用于模板结果。它将 url 放在浏览器上以获取位置。例如$location.path('templates/first') 将在您的模块定义中的 url 属性中找到 'templates/first'。其次尝试将状态名称从/first 更改为first 我认为如果其他一切都很好，特殊字符会在这里引起问题。

【解决方案2】：

这些状态是抽象的。删除抽象，因为它们不是抽象状态。

.state('first', {
url: '/first',
abstract: true,
templateUrl: 'templates/first.html'
})

到

.state('first', {
url: '/first',
templateUrl: 'templates/first.html'
})

看到这个： Why give an "abstract: true" state a url? https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views#abstract-states

【讨论】：

你的 index.html 中需要一个 ui-view
你能举出任何关于 ui-view 的例子，让一个按钮通过点击它进入下一页。并不是说离子标签。离子标签是如此令人困惑。只需使用单个按钮的 ui-view 并导航到页面。而已。如果您对这个 Asim K T 提供帮助，请提前致谢 :)
离子服务完成后，url 为 "localhost:8100" 。输入名称和密码后，点击登录按钮，然后 url 更改为“localhost:8100/#/first.html”。但是页面仍然在登录页面中，只有 url 正在改变。是的