LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
This demonstration shows how Angular Material Tabs can be used with Angular Route and ng-view.
View 1 View 2 View 3
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;
}

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 `` directives
         */
        .controller('DemoController',function($scope, $location, $log){
            $scope.selectedIndex = 0;
    
            $scope.$watch('selectedIndex', function(current, old) {
              switch(current) {
                case 0: $location.url("/view1"); break;
                case 1: $location.url("/view2"); break;
                case 2: $location.url("/view3"); break;
                
              }
            });
        });
  
})(angular);

Description

Demonstration of using tab buttons (without tab content) to work with AngularJS route and ng-view.
Term
Mon, 11/27/2017 - 21:29

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv