angularjs - 如何在 ionic 项目中设置起始页-6ren

angularjs - 如何在 ionic 项目中设置起始页

转载作者：行者123 更新时间：2023-12-03 14:16:57

抱歉，如果这是一个愚蠢的问题，我对此还是很陌生。我对导航如何与 Angular js 一起工作有基本的了解，但我不知道如何设置起始页面。我想将我的登录页面设置为我的起始页面，url 显示登录页面已打开(“http://localhost:8100/#/template/login”)，但它只显示一个空白标题，我怀疑它来自我的索引(ion-nav-bar)。

谢谢你。

索引.html

<body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view class="slide-left-right"></ion-nav-view>
  </body>
</html>

<ion-view view-title="Login" name="login-view">
  <ion-content class="padding">
  <h1>lalalalala</h1>
     <div class="list">
         <label class="item item-input">
              <span class="input-label">Username</span>
              <input type="text">
         </label>
         <label class="item item-input">
              <span class="input-label">Password</span>
              <input type="password">
         </label>
      </div>
      <button class="button button-block button-calm" ng-click="login()">Login</button>
  </ion-content>
</ion-view>

应用程序.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

.state('tab.login', {
    url: '/login',
    views: {
      'login': {
        templateUrl: 'templates/login.html',
        controller: 'loginCtrl'
      }
    }
  })

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.projects', {
      url: '/projects',
      views: {
        'tab-projects': {
          templateUrl: 'templates/tab-projects.html',
          controller: 'projectsCtrl'
        }
      }
    })
    .state('tab.projects-detail', {
      url: '/projects/:projectsId',
      views: {
        'tab-projects': {
          templateUrl: 'templates/projects-detail.html',
          controller: 'projectsDetailCtrl'
        }
      }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('login');

});

Controller .js

angular.module('starter.controllers', [])

.controller('loginCtrl', function($scope) {})

.controller('DashCtrl', function($scope) {})

.controller('projectsCtrl', function($scope, Chats) {
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
});

最佳答案

我猜问题出在您的默认 route :

$urlRouterProvider.otherwise('/tab/login');

您已根据抽象 定义了它标签 :

$stateProvider

  // setup an abstract state for the tabs directive
  .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

这是您的登录信息:

.state('tab.login', {
    url: '/login',
    views: {
      'login': {
        templateUrl: 'templates/login.html',
        controller: 'loginCtrl'
      }
    }
  })

州名是 tab.login 这意味着它继承自标签 .

所以你的根是 /tab/登录 .

这应该是你的 tabs.html :

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <ion-tab title="Login" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/login">
    <ion-nav-view name="login"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

</ion-tabs>

如您所见，您的 ion-nav-view 名称:

<ion-nav-view name="login"></ion-nav-view>

必须与您所在州定义的匹配:

.state('tab.login', {
        url: '/login',
        views: {
          'login': {
            templateUrl: 'login.html',
            controller: 'loginCtrl'
          }
        }
      })

您无需在此处设置 View 的名称 ( login.html ):

<ion-view view-title="Login" name="login-view">

我注意到的另一件事，您使用相同的姓名对于两个不同的 View : tab-projects :

.state('tab.projects', {
      url: '/projects',
      views: {
        'tab-projects': {
          templateUrl: 'templates/tab-projects.html',
          controller: 'projectsCtrl'
        }
      }
    })
.state('tab.projects-detail', {
      url: '/projects/:projectsId',
      views: {
        'tab-projects': {
          templateUrl: 'templates/projects-detail.html',
          controller: 'projectsDetailCtrl'
        }
      }
    })

另一件事与惯例有关。如果您使用以 开头的 View 名称标签- ，也许你应该对 做同样的事情登录 .

这是 plunker用你的一些代码。

关于angularjs - 如何在 ionic 项目中设置起始页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30326908/

文章推荐： logging - 如何抑制Spark中的拼花日志消息？

文章推荐： reactjs - 如何监视 Jest 中的默认 prop 函数

文章推荐： react-native - React Native中Alert内部的文本输入

date - Highstock 起始/终止日期无效问题
我在尝试生成具有“价格”轴和“量”轴的图表时遇到问题，类似于 example given 中的图表。在 Highstock 网站上。它可以很好地显示成交量轴，但不能显示价格。在尝试确定问题的原因时，
html -
起始 - HTML
在我的 HTML 项目中，我试图提及标签。但是，VS Code 将其解释为实际的标签，它会导致奇怪的事情发生。有人有办法解决这个问题吗？预先感谢您! 最佳答案使用<代替 . 顺便说一下，使
html -
起始 - HTML
在我的 HTML 项目中，我试图提及标签。但是，VS Code 将其解释为实际的标签，它会导致奇怪的事情发生。有人有办法解决这个问题吗？预先感谢您! 最佳答案使用<代替 . 顺便说一下，使
c++ - 起始 block 存储地址
The allocation function attempts to allocate the requested amount of storage. If it is successful, i
.Net Core API 起始 URL
这是我的Program.cs: public static void Main(string[] args) { var host = new WebHostBuilder()
java - FileNotFoundException 起始 jar - 在资源文件夹中看不到文件
我希望我的应用程序独立于操作系统。因此，我的 config.properties 和日志文件存储在资源文件夹中，我通过相对路径获取这些资源。这是我的项目结构。这是我的 AppConfig 类: pu
cocoa - 使用 AVFoundation/CoreMedia/其他框架检测节拍/起始
(前言:这是我在 Stack Overflow 上提出的第一个与音频相关的问题，因此我会尽力用最好的措辞来表达。欢迎编辑。) 我正在创建一个允许用户循环播放音乐的应用程序。目前，我们的原型(proto
python - 在 scrapy 起始 url 中传递 Dict
我有一个 Pandas DataFrame，我想将其用作 Scrapy Start URL，函数 get_links 打开一个到 DataFrame 的 xlsx，其中有一个我想在其上运行蜘蛛的 Co
java - 使用已定义的根(起始)元素将 DTD 转换为 XSD
我有几个大的 DTD 文件。我用过 trang将它们转换为 XSD 文件，这样我就可以轻松地从 JAXB 和其他实用程序中使用它。但是，生成的 XSD 文件的所有声明元素都位于顶层。这意味着任何元素都
linux - 将文件从给定的 'x'(起始)偏移量复制到给定的 'y'(结束)偏移量的工具
是否有任何工具可以将文件从给定的起始偏移量复制到给定的(结束)偏移量。我还想通过运行 md5sum 确认该工具已正确复制指定的字节。像这样的东西 1) Copy source file star
java - 获取在 Jpanel 上绘制的 Path2D 形状的(起始)X 和 Y 坐标
所以，我有一个程序，我可以使用 Path2D 对象将形状添加到 JPanel，然后我可以单击并拖动它们。我想要做的是能够找到药物后形状的最终 X 和 Y 坐标。坐标必须是左上角坐标。有什么想法吗？ /

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

angularjs - 如何在 ionic 项目中设置起始页