Material Tabs & hRefs

index.html

<div class="intro">
<a target="_blank"  href="https://github.com/angular/material/issues/3243">https://github.com/angular/material/issues/3243</a>
  <br/>To see an issue, please open development console (with "console" tab opened) and click "Login" then "Home".
  <br/>
  Only first tab use ng-click there and it's intended - to show how it works without ng-click.
<div>
<div ng-app="demoApp" 
     ng-controller="DemoController as cNav"
     layout="column" class="demo" >

  <script type="text/ng-template" id="partials/view1.html">  View #1 </script>
  <script type="text/ng-template" id="partials/view2.html">  View #2 </script>
  <script type="text/ng-template" id="partials/view3.html">  View #3 </script>

  <md-tabs class="md-primary" md-autoselect="false" md-no-pagination="false" md-center-tabs="false">
  <md-tab label="Home" ng-click="cNav.go('/view1')" md-active="cNav.state == '/view1'"></md-tab>
  <md-tab label="Login" md-on-select="cNav.go('/view2')" md-active="cNav.state == '/view2'"></md-tab>
  <md-tab label="Activity" md-on-select="cNav.go('/view3')" md-active="cNav.state == '/view3'"></md-tab>
</md-tabs>

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

</div>

Material Tabs & hRefs.markdown

Material Tabs & hRefs

Demonstration of using tab buttons (without tab content) to work with AngularJS route and ng-view.

Forked from Thomas Burleson's Pen Material Tabs & hRefs.

A Pen by Eugene OZ on CodePen.

License.

script.js

(function(angular, undefined){
  "use strict";
  angular.module('demoApp', ['ngMaterial', "ngRoute"])
         .config(["$routeProvider", function($routeProvider) {
            $routeProvider.when("/view1", {templateUrl: "partials/view1.html"});
            $routeProvider.when("/view2", {templateUrl: "partials/view2.html"});
            $routeProvider.when("/view3", {templateUrl: "partials/view3.html"});
            $routeProvider.otherwise({redirectTo: "/view1"});
        }])
        /**
         *  Simple controller to build a `user` data model
         *  that will be used to databinding with `<tf-float>` directives
         */
        .controller('DemoController',function($location){
           
          this.state =$location.path();
          this.go=function(path){
            $location.path(path);
          };
            
        });
  
})(angular);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
<script src="http://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>

style.css

body {
  position:relative;
}

.intro {position:absolute;
  left:30px;
  top:20px;
  width : 600px;
  height: 20px;  
}

.demo {
  position:relative;  
  width : 600px;
  height : 300px; 
  background-color: #aeaeae; 
  margin-top:40px;
  margin-left:0px;
}

.demo a {
  text-decoration: none !important;
  color: white;
  height:100%;
  width:100%;
}

.demo a.visited {
  color:white;
}

.demo #content {
  background-color: rgb(255, 244, 220);
  padding:30px;
  font-weight:600;
  border: 1px solid #aeaeae;
  border-top:none;
}

styles

<link href="http://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet" />