CODEWITHSUNDEEP
angular-material
amar ghodke
amar ghodke

Reputation: 471

Angular material design tab data not showing tab contents

I am following this blog

with my custom code as follows:

index.html

     <!DOCTYPE html>
    <html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="angular-material/angular-material.css">
        <style >
     .mainApp md-content .ext-content {
      padding: 50px;
      margin: 20px;
      background-color: #FFF2E0; }
      </style>
    </head>
    <body ng-app="mainApp">
        <div ng-controller="AppCtrl" layout="column" ng-cloak>
        <div id="logo" >
        <script type="text/ng-template" id="views/home.html" ></script>
      <script type="text/ng-template" id="views/aboutus.html"></script>
      <script type="text/ng-template" id="views/services.html"></script>
      <script type="text/ng-template" id="views/contactus.html"></script>

       <md-tabs md-stretch-tabs="always" class="md-primary" md-selected="selectedIndex">

        <md-tab data-ui-sref="home" md-active="state.is('home') ">
        <md-tab-label>HOME</md-tab-label>
        </md-tab>

        <md-tab data-ui-sref="aboutus" md-active="state.is('aboutus')">
        <md-tab-label>ABOUT US</md-tab-label>
        </md-tab>

        <md-tab data-ui-sref="services" md-active="state.is('services')">
        <md-tab-label>SERVICES</md-tab-label>
        </md-tab>

        <md-tab data-ui-sref="contactus" md-active="state.is('contactus')">
        <md-tab-label>CONTACT US</md-tab-label>
        </md-tab>
<!--     <md-tab id="tab1" label="HOME" aria-controls="tab1-content"></md-tab>
    <md-tab id="tab2" label="ABOUT US" aria-controls="tab2-content"></md-tab>
    <md-tab id="tab3" label="SERVICES" aria-controls="tab3-content"></md-tab>
    <md-tab id="tab4" label="CONTACT US" aria-controls="tab4-content"></md-tab> -->
  </md-tabs> 


      <div id="content" ui-view flex> </div>

        </div>

        <script src="angular/angular.js"></script> 
        <script src="angular-material/angular-material.js"></script> 
        <script src="angular-aria/angular-aria.js"></script> 
        <script src="angular-animate/angular-animate.js"></script> 
        <script src="angular/angular-ui-router.min.js"></script>
        <script src="controller/controller.js"></script> 

    </body>
    </html>

controller.js

(function(angular, undefined) {
    "use strict";
    angular.module('mainApp', ['ngMaterial',  "ui.router"])
    .config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/home');
        $stateProvider
        .state('aboutus', {
            url: "/aboutus",
            templateUrl: "views/aboutus.html"
        })
        .state('services', {
            url: "/services",
            templateUrl: "views/services.html"
        })
        .state('contactus', {
            url: "/contactus",
            templateUrl: "views/contactus.html"
        })
        ;
    })
    .controller('AppCtrl', function($scope,$state, $location, $log) {
        $scope.selectedIndex = 0;
        $scope.$state=$state;
        $scope.$watch('selectedIndex', function(current, old) {
            switch (current) {
                case 0:
                    $location.url("/home");
                    break;
                case 1:
                    $location.url("/aboutus");
                    break;
                case 2:
                    $location.url("/services");
                    break;
                case 3:
                    $location.url("/contactus");
                    break;
            }
        });
    });

})(angular);

home.html

    <div flex layout="row">
     <h1>The super duper awesome Contact Form will go here!</h1>
</div>

aboutus.html

    <div flex layout="row">
     <h1>The super duper awesome Contact Form will go here!</h1>
</div>

same code for service and contact.html whenever i click to home then about us tabs there is no any errors but when i again click to home tab i get following error in console.

    angular.js:13920 Error: Could not resolve 'home' from state ''
    at Object.y.transitionTo (angular-ui-router.min.js:7)
    at Object.y.go (angular-ui-router.min.js:7)
    at angular-ui-router.min.js:7
    at angular.js:19612
    at completeOutstandingRequest (angular.js:5964)
    at angular.js:6243

Upvotes: 2

Views: 824

Answers (1)

Valery Kozlov
Valery Kozlov

Reputation: 1577

You have not "home" state. Just define it.

.state('home', {
            url: "/home",
            templateUrl: "views/home.html"
        })

It's problems related to ui-router, not angular.material.

to debug ui.router use

angular.module('mainApp', ['ngMaterial',  "ui.router"])
   .run(function($rootScope){
      $rootScope.$on('$stateChangeError', function(){
          console.log(arguments);
      });
   })

Upvotes: 1

Related Questions