angularjs – 如何在离散项目中设置起始页面

发布时间：2020-12-17 07:43:46 所属栏目：安全来源：网络整理

导读：对不起,如果这是一个愚蠢的问题,我还是相当新的.我有一个基本的了解导航如何与角度js,但我不知道如何设置一个起始页面.我想将我的登录页面设置为我的起始页面,url显示登录页面打开(“ http://localhost:8100/#/template/login”),但它只显示一个空白标题,我

对不起,如果这是一个愚蠢的问题,我还是相当新的.我有一个基本的了解导航如何与角度js,但我不知道如何设置一个起始页面.我想将我的登录页面设置为我的起始页面,url显示登录页面打开(“ http://localhost:8100/#/template/login”),但它只显示一个空白标题,我怀疑是从我的索引(ion-nav-bar).

谢谢.

的index.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>

的login.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>

app.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');

});

controllers.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',$stateParams,Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

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

我猜你的默认路线是问题：

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

您已经根据abastract选项卡定义了它：

$stateProvider

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

这是你的登录：

.state('tab.login',controller: 'loginCtrl'
      }
    }
  })

状态名称是tab.login,这意味着它从选项卡继承.

所以你的root是/ tab / login.

这应该是你的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 name="login"></ion-nav-view>

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

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

您不需要在此处设置视图的名称(login.html)：

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

另一件事我注意到,您使用相同的名称两个不同的视图：标签项目：

.state('tab.projects',controller: 'projectsCtrl'
        }
      }
    })
.state('tab.projects-detail',controller: 'projectsDetailCtrl'
        }
      }
    })

另一件事与公约有关.如果您以视图名称开头用于您的视图名称,那么您可能需要对登录名进行相同操作.

这是一个plunker与你的一些代码.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!