Javascript 按钮ng单击更改URL但不呈现新视图？_Javascript_Angularjs_Ionic Framework

Javascript 按钮ng单击更改URL但不呈现新视图？

javascript angularjs ionic-framework

Javascript 按钮ng单击更改URL但不呈现新视图？,javascript,angularjs,ionic-framework,Javascript,Angularjs,Ionic Framework,我已经开始研究离子应用。我很难通过点击按钮从一个页面导航到另一个页面。以下是我迄今为止所做的工作- index.html- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-w

我已经开始研究离子应用。我很难通过点击按钮从一个页面导航到另一个页面。以下是我迄今为止所做的工作-

index.html-

<!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 rel="manifest" href="manifest.json">



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

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

    <script src="lib/ionic/js/angular/angular-resource.min.js"></script>

    <script src="js/ng-cordova.min.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>

    <base href="/">
  </head>
  <body ng-app="starter">
    <div ng-controller="MainCtrl">
      <ion-content class="bg-img has-bottom">
      </ion-content>
        <div class="fixed-outside">      
          <div class="row">
            <div class="col">
              <button ng-click="login_google()" class="button" id="google-btn">Connect with Google</button>
            </div>
          </div> 
          <div class="row">
            <div class="col">
              <button ng-click="login_fb()" class="button" id="fb-btn">Connect with Facebook</button>
            </div>
          </div>
          <div class="row">
            <div class="col">   
                <button class="button button-stable" ng-click="login()" id="login-btn">Login</button>
            </div>
            <div class="col">
              <button ng-click="register()" class="button button-stable" id="reg-btn">Register</button>
            </div>
          </div>
        </div>

  </body>
</html>

控制台输出提供-

国家没有定义

我无法在文档中找到任何内容，也无法在单击按钮的简单导航中找到任何内容。

您错过了调用index.html页面中的

ui路由器

脚本，这就是您收到错误消息的原因

但是，如果已经注入了

ionic

模块，则不需要注入

ui路由器
您还需要添加以下代码来绑定html

更多详情请点击此处：
angular.module('starter', ['ionic','ui.router'])


.config(function($stateProvider, $locationProvider, $urlRouterProvider){
  $urlRouterProvider.when('', '/');
  $stateProvider
      .state('index', {
            cache: false,
            url: '/',
                  templateUrl: "index.html",
                  controller: "MainCtrl"      
      })
      .state('main',{
            cache: false,
            url: '/main',
            templateUrl: 'templates/main.html',
            controller: 'MainController'
      });
      $locationProvider.html5Mode(true);
      $urlRouterProvider.otherwise('/');

})

.controller('MainCtrl', function($scope, $state) {
  $scope.login = function(){
    //console.log("Login clicked!");
    $state.go('main');
    console.log('the state is '+$state.stateName); 
    // window.location = "/main.html";
    // $scope.apply();
  };    
})

.controller('MainController', function($scope, $state) {    
    $scope.message = 'This is student list screen';
});