Tạo tabs dùng angularjs

Cho mình hỏi là khi mình muốn tạo tabs bottom, sau khi viết code thì nội dung tabs không hiện thị lên màn hình, cho mình hỏi tại sao với ạ?

index.html

<html ng-app="myApp">
<head>
		<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>Joy Good</title>
    		<link rel="stylesheet" href="components/loader.css">
        <link rel="shortcut icon" href="img/icon.ico">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
        
        <link rel="stylesheet" href="css/style_login.css">
        <link rel="stylesheet" href="css/style_menu.css">
        <link rel="stylesheet" href="css/style_find.css">
        <link rel="stylesheet" href="css/style_detail.css">
        <script src="components/loader.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/connect.js"></script>
</head>
<body>
  <!-- navigation -->
  <div ui-view></div>
</body>
</html>

tabbar.html

<div>
        <ul>
             <li><a href="#/tabbar/Menu" data-icon="custom" name="Menu-tab">home</a></li>
             <li><a href="#/tabbar/Master_shohin" data-icon="custom" name="Shohin-tab">Write</a></li>
             <li><a href="#tabbar/master_Mitsumori_Shosai" data-icon="custom">Search</a></li>
        </ul>
</div>

menu.html

<ons-page id="menu" role="tabpanel" class="tab-pane active" >
  <section class="menu haikei-color" class="tabs-content">
    <p class="menu_logo">
      <img  style="height:200px; width:100%;" src="img/anhnen.png">
    </p>
    <h2>Menu</h2>
    <div class="menu_detail">
      <button class="menu_button" ui-sref="Estimate">
        <img src="img/icon-mitsumorisho1.png"><br>見積書処理
      </button>
      <button class="menu_button" ui-sref="Shire" >
        <img src="img/icon-shiire.png"><br>仕入処理
      </button>
      <button class="menu_button" ui-sref="Invoice">  
        <img src="img/icon-receipt.png"><br>請求処理
      </button>
      <button class="menu_button" ui-sref="Invoice_Detail">
        <img src="img/icon-approach.png"><br>アプローチ検索
      </button>
      <button class="menu_button" ui-sref="Shohin">
        <img src="img/icon-product.png"><br>商品一覧
      </button>
      <button class="menu_button" ui-sref="Clients">
        <img src="img/icon-torihikisaki.png"><br>取引先一覧
      </button>
      <button class="menu_button" ui-sref="Configuration" >
        <img src="img/icon-setei.png"><br>設定
      </button>
    </div>
  </section>
</one-page>

app.js

angular.module('myApp',['onsen', 'ui.router'])
  .config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
     .state('Tabbar', {
        url: '/Tabbar',
        abstract: true,
		    views: {
		'':{ controller: 'TabbarController', templateUrl: 'views/tabbar.html'},
		    },
      })
      .state('tabbar.Menu',{
        url: '/Menu',
        views: {
          'Menu-tab': {
            templateUrl: 'templates/Menu.html'
          }
        }
      })
      .state('tabbar.Shohin',{
        url: '/Shohin',
        views: {
          'Shohin-tab': {
            templateUrl: 'templates/master_Shohin.html'
          }
        }
      })
      .state('tabbar.master_Shohin_Update',{
        url: '/master_Shohin_Update',
        views: {
          'Shohin-tab': {
            templateUrl: 'templates/master_Shohin_Update.html'
          }
        }
      })
        ;
     $urlRouterProvider.otherwise("/");
  }])

Mình không biết cách sử dụng AngularJS, nhưng mới nhìn qua mình thấy cái này :kissing_smiling_eyes:

<ons-page ...>
  ...
</one-page>
function($stateProvider, $urlRouterProvider) {
  .state('Tabbar', {
    ...
}
2 Likes

chào bạn.
mình dùng <ons-page> </ons-page> bởi vì mình đang tạo app thông qua Monaca sử dụng Onsen UI và angular js bạn ạ. Vì sử dụng framework Onsen Ui nên khi tạo từng trang thì sử dụng <ons-page> </ons-page> giống như <body></body> (mình nghĩ vậy )

Mình nghĩ bạn thiếu cái script chứa các directive : onsen, ons-page

@Thuc_Nguyen_tan mấy cái directive này đều có rồi bạn à

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?