我正在使用AngularJS创建一个SPA,现在我正在实现角度材质,但我不知道为什么我的视图不能正常渲染,这是我遵循的sample但是我得到的是不一样的。
我的代码中没有任何问题,任何人都可以帮我搞清楚吗?(ngRoute不会在这个代码片段中运行,我知道,但我会用视图模板的结构替换ng-view)
'use strict';
var quaestio = angular.module('Quaestio', ['ngMaterial', 'ngMdIcons', 'ngRoute', 'smart-table']);
quaestio.config(function($routeProvider, $mdThemingProvider) {
$routeProvider
.when('/', {
templateUrl: './views/home.html',
controller: 'main-ctrl'
})
.when('/about', {
templateUrl: "./views/about-company.html",
controller: 'main-ctrl'
})
.when('/contact', {
templateUrl: "./views/contact.html",
controller: 'main-ctrl'
})
.when('/faq', {
templateUrl: "./views/faq.html",
controller: 'table-ctrl'
})
.when('/edit-faq', {
templateUrl: "./views/edit-faq.html",
controller: 'main-ctrl'
})
.when('/general', {
templateUrl: "./views/general.html",
controller: 'main-ctrl'
})
.when('/personnel', {
templateUrl: "./views/about-personnel.html",
controller: 'main-ctrl'
})
.when('/settings', {
templateUrl: "./views/settings.html",
controller: 'main-ctrl'
})
.when('/terms', {
templateUrl: "./views/terms.html",
controller: 'main-ctrl'
})
.otherwise({
redirectTo: '/'
});
var customBlueMap = $mdThemingProvider.extendPalette('light-blue', {
'contrastDefaultColor': 'light',
'contrastDarkColors': ['50'],
'50': 'ffffff'
});
$mdThemingProvider.definePalette('customBlue', customBlueMap);
$mdThemingProvider.theme('default')
.primaryPalette('customBlue', {
'default': '500',
'hue-1': '50'
})
.accentPalette('pink');
$mdThemingProvider.theme('input', 'default')
.primaryPalette('grey')
});
/**
* Main Data and Functions Controller
*/
quaestio.controller('main-ctrl', function($scope, $http) {
var refresh = function() {
$http.get('/quaestioJS').
success(function(data, status, headers, config) {
$scope.resdata = data;
$scope.limpiar();
}).
error(function(data, status, headers, config) {
console.log("Errorazo.");
console.log(data);
});
}
refresh();
$scope.agregar = function() {
$scope.tmpdata.query = "INSERT INTO personas SET ?";
$http.post('/quaestioJS', $scope.tmpdata).
success(function(data, status, headers, config) {
refresh();
$scope.limpiar();
}).
error(function(data, status, headers, config) {
console.log("Errorazo.");
console.log(data);
});
}
$scope.eliminar = function(id) {
var query = "DELETE FROM personas WHERE ID = " + id;
$http.delete('/quaestioJS/' + query).
success(function(data, status, headers, config) {
refresh();
$scope.limpiar();
}).
error(function(data, status, headers, config) {
console.log("Errorazo.");
console.log(data);
});
}
$scope.editar = function(id) {
var query = "SELECT * FROM personas WHERE ID = " + id;
$http.get('/quaestioJS/' + query).
success(function(data, status, headers, config) {
$scope.tmpdata = data[0];
console.log();
}).
error(function(data, status, headers, config) {
console.log("Errorazo.");
console.log(data);
});
}
$scope.actualizar = function() {
$scope.tmpdata.query = "UPDATE personas SET ? WHERE ID = " + $scope.tmpdata.ID;
$http.post('/quaestioJS', $scope.tmpdata).
success(function(data, status, headers, config) {
refresh();
$scope.limpiar();
}).
error(function(data, status, headers, config) {
console.log("Errorazo.");
console.log(data);
});
}
$scope.limpiar = function() {
$scope.tmpdata = "";
}
});
/**
* Modern Design Controller
*/
quaestio.controller('md-ctrl', ['$scope', '$mdBottomSheet', '$mdSidenav', '$mdDialog', '$http', '$location',
function($scope, $mdBottomSheet, $mdSidenav, $mdDialog, $http, $location) {
$scope.colors = [{
color: 'red'
}, {
color: 'blue'
}, {
color: 'green'
}, {
color: 'yellow'
}];
$scope.prueba = function(path) {
$location.path(path);
}
$scope.menu = [
{
id: '/home',
title: 'Inicio',
icon: 'home'
}, {
id: '/about',
title: 'Sobre La Empresa',
icon: 'info'
}, {
id: '/personnel',
title: 'Sobre Nosotros',
icon: 'people'
}, {
id: '/terms',
title: 'Terminos de Uso',
icon: 'account_balance'
}, {
id: '/faq',
title: 'Preguntas Frecuentes',
icon: 'question_answer'
}, {
id: '/contact',
title: 'Contactanos',
icon: 'quick_contacts_mail'
}, {
id: '/communities',
title: 'Comunidades',
icon: 'extension'
}, {
id: '/general',
title: 'Generalidades',
icon: 'dashboard'
}
];
$scope.admin = [{
link: '',
title: 'Salir de sesion',
icon: 'exit_to_app'
}, {
link: 'showListBottomSheet($event)',
title: 'Configuracion',
icon: 'settings'
}];
$scope.dynamicelements = {
tabTitle: '',
page: '',
username: '',
email: ''
};
$scope.alert = '';
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
$scope.showListBottomSheet = function($event) {
$scope.alert = '';
$mdBottomSheet.show({
templateUrl: 'views/settings.html',
controller: 'ListBottomSheetCtrl',
targetEvent: $event
}).then(function(clickedItem) {
$scope.alert = clickedItem.name + ' Clickeado!';
});
};
$scope.showAdd = function(ev) {
$mdDialog.show({
controller: funcDialogController,
template: '',
targetEvent: ev
})
.then(function(answer) {
$scope.alert = 'Dijiste que tu informacion era "' + answer + '".';
}, function() {
$scope.alert = 'Cancelaste la operacion.';
});
};
$scope.funcChangePage = function(id) {
$scope.dynamicelements.page = id;
console.log(id);
}
}
]);
/**
* Option Menu Controller
*/
quaestio.controller('options-ctrl', function($scope, $mdBottomSheet) {
$scope.items = [{
name: 'Subir',
icon: 'upload'
}, {
name: 'Copiar',
icon: 'copy'
}, {
name: 'Imprimir esta pagina',
icon: 'print'
}];
$scope.listItemClick = function($index) {
var clickedItem = $scope.items[$index];
$mdBottomSheet.hide(clickedItem);
};
});
/**
* Data Table Controller
*/
quaestio.controller('table-ctrl', ['$scope',
function($scope) {
$scope.tabledata = [{
date: new Date('1987-05-21'),
question: 'Como se llama la compania?',
answer: 'Quaestio'
}, {
date: new Date('1987-05-21'),
question: 'Quienes lo empezaron?',
answer: 'Carlos Cornejo y Jonathan Solorzano'
}, {
date: new Date('1987-05-21'),
question: 'Como surgio?',
answer: 'Como una start up.'
}];
}
]);
function funcDialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
};
quaestio.directive('userAvatar', function() {
return {
replace: true,
templateUrl: './views/avatar.html'
};
});
quaestio.directive('mdTable', function() {
return {
restrict: 'E',
scope: {
headers: '=',
content: '=',
sortable: '=',
filters: '=',
customClass: '=customClass',
thumbs: '=',
count: '='
},
controller: function($scope, $filter, $window) {
var orderBy = $filter('orderBy');
$scope.tablePage = 0;
$scope.nbOfPages = function() {
return Math.ceil($scope.content.length / $scope.count);
},
$scope.handleSort = function(field) {
if ($scope.sortable.indexOf(field) > -1) {
return true;
} else {
return false;
}
};
$scope.order = function(predicate, reverse) {
$scope.content = orderBy($scope.content, predicate, reverse);
$scope.predicate = predicate;
};
$scope.order($scope.sortable[0], false);
$scope.getNumber = function(num) {
return new Array(num);
};
$scope.goToPage = function(page) {
$scope.tablePage = page;
};
},
template: angular.element(document.querySelector('#md-table-template')).html()
}
});
md-content.md-default-theme {
background-color: #eee;
}
md-card {
background-color: #fff;
}
md-card h2:first-of-type {
margin-top: 0;
}
md-toolbar .md-button.md-default-theme {
border-radius: 99%;
}
h2 {
font-weight: 400;
}
.md-toolbar-tools-bottom {
font-size: small;
}
.md-toolbar-tools-bottom:last-child {
opacity: 0.8;
}
md-toolbar:not(.md-hue-1),
.md-fab {
fill: #fff;
}
md-sidenav {
fill: #737373;
}
md-sidenav ng-md-icon {
position: relative;
top: 5px;
}
.user-avatar {
border-radius: 99%;
}
.sites-list .md-button {
color: inherit;
text-align: left;
width: 100%;
}
<!DOCTYPE html>
<html ng-app="Quaestio">
<head lang="es">
<meta charset="UTF-8">
<title>Quaestio - Administration</title>
<!--Stylesheets ================================================================== -->
<!-- Angular Material CSS now available via Google CDN; version 0.8 used here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body layout="row" ng-controller="md-ctrl">
<!-- Barra lateral izquierda ================================================================== -->
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar class="md-tall md-hue-2">
<!-- Inicio del toolbar donde se mostrara la informacion del usuario -->
<span flex></span>
<div layout="column" class="md-toolbar-tools-bottom inset">
<user-avatar></user-avatar>
<span></span>
<div>{{dynamicelements.username}}</div>
<div>{{dynamicelements.email}}</div>
</div>
</md-toolbar>
<!-- /Fin de toolbar -->
<md-list class="sites-list">
<!-- Inicio de la lista de los sitios editables y opciones de sesion-->
<md-item ng-repeat="item in menu">
<!-- Inicio de la lista de los sitios -->
<md-item-content layout="row" layout-align="start center">
<md-button md-ripple-size="full" ng-click="prueba(item.id)">
<ng-md-icon icon="{{item.icon}}"></ng-md-icon>{{item.title}}
</md-button>
</md-item-content>
</md-item>
<!-- /Fin de lista de sitios -->
<md-divider></md-divider>
<md-subheader>Sesion</md-subheader>
<md-item ng-repeat="item in admin">
<!-- Inicio de la lista de opciones de sesion -->
<md-item-content layout="row" layout-align="start center">
<md-button md-ripple-size="full" ng-click="prueba(item.id)">
<ng-md-icon icon="{{item.icon}}"></ng-md-icon>
{{item.title}}
</md-button>
</md-item-content>
</md-item>
<!-- /Fin de opciones de sesion -->
</md-list>
<!-- /Fin de listado -->
</md-sidenav>
<!-- Body of App ================================================================================= -->
<div layout="column" class="relative" layout-fill role="main">
<md-button class="md-fab md-fab-bottom-right" aria-label="Add" ng-click="showAdd($event)">
<!-- Boton agregar presente solo en el panel de usuarios -->
<ng-md-icon icon="add"></ng-md-icon>
</md-button>
<!-- /Fin de boton -->
<md-toolbar ng-show="!showSearch">
<!--Inicio del toolbar de navegacion-->
<div class="md-toolbar-tools">
<!--Inicio del panel de opciones-->
<md-button ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu">
<ng-md-icon icon="menu"></ng-md-icon>
</md-button>
<h3>
Administracion - Quaestio
</h3>
<span flex></span>
<md-button aria-label="Search" ng-click="showSearch = !showSearch">
<ng-md-icon icon="search"></ng-md-icon>
</md-button>
<md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
<ng-md-icon icon="more_vert"></ng-md-icon>
</md-button>
</div>
<!--/Fin de panel de navegacion-->
<md-tabs md-stretch-tabs class="md-primary" md-selected="">
<!--Inicio de tabs de toolbar-->
<md-tab id="tab1" aria-controls="tab1-content">
{{dynamicelements.tabTitle}}
</md-tab>
</md-tabs>
<!--/Fin de tabs-->
</md-toolbar>
<!--/Fin de toolbar-->
<md-toolbar class="md-hue-1" ng-show="showSearch">
<!--Inicio de toolbar de opciones para buscar-->
<div class="md-toolbar-tools">
<md-button ng-click="showSearch = !showSearch" aria-label="Back">
<ng-md-icon icon="arrow_back"></ng-md-icon>
</md-button>
<h3 flex="10">
Atras
</h3>
<md-input-container md-theme="input" flex>
<label> </label>
<input ng-model="search.who" placeholder="Buscar">
</md-input-container>
<md-button aria-label="Search" ng-click="showSearch = !showSearch">
<ng-md-icon icon="search"></ng-md-icon>
</md-button>
<md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
<ng-md-icon icon="more_vert"></ng-md-icon>
</md-button>
</div>
</md-toolbar>
<!--/Fin de toolbar -->
<md-content flex md-scroll>
<!--Inicio del contenido de sitios-->
<ui-view layout="column" layout-fill layout-padding>
<div class="inset"></div>
<md-card flex-gt-sm="90" flex-gt-md="80" flex-gt-lg="85">
<md-card-content>
<div layout="column" layout-sm="column" layout-padding style="padding: 24px;">
<div class="row text-center">
<h2>Informacion de Contacto</h2>
</div>
<md-divider md-inset></md-divider>
<br />
<br />
<div class="row">
<md-input-container class="md-icon-float">
<label>Correo</label>
<md-icon src="./files/img/correo.png"></md-icon>
<input />
</md-input-container>
</div>
<div class="row">
<md-input-container class="md-icon-float">
<label>Direccion</label>
<md-icon src="./files/img/direccion.png"></md-icon>
<input />
</md-input-container>
</div>
<div class="row">
<md-input-container class="md-icon-float">
<label>Telefono</label>
<md-icon src="./files/img/telefono.png"></md-icon>
<input />
</md-input-container>
</div>
<div class="row">
<md-input-container class="md-icon-float">
<label>Nombre de Compania</label>
<md-icon src="./files/img/compania.png"></md-icon>
<input />
</md-input-container>
</div>
</div>
</md-card-content>
</md-card>
</ui-view>
</md-content>
<!--/Fin de contenido de sitios-->
</div>
<!-- Dependecies ================================================================== -->
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.8 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js"></script>
<script src="//cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.0.3/smart-table.js"></script>
</body>
</html>
正如您在片段中看到的那样,输入标签位置不正确,动画有点慢,将鼠标放在搜索按钮上时的动画与示例中的不同。
答案 0 :(得分:0)
您遇到的问题是由于bootstrap和角度材料之间的冲突。他们不能很好地团结在一起。您关注的示例不包括引导程序。您可以在下面的代码段中看到更好的对齐方式,而无需使用bootstrap:
'use strict';
var quaestio = angular.module('Quaestio', ['ngMaterial', 'ngMdIcons', 'ngRoute', 'smart-table']);
quaestio.config(function($routeProvider, $mdThemingProvider) {
$routeProvider
.when('/', {
templateUrl: './views/home.html',
controller: 'main-ctrl'
})
.when('/about', {
templateUrl: "./views/about-company.html",
controller: 'main-ctrl'
})
.when('/contact', {
templateUrl: "./views/contact.html",
controller: 'main-ctrl'
})
.when('/faq', {
templateUrl: "./views/faq.html",
controller: 'table-ctrl'
})
.when('/edit-faq', {
templateUrl: "./views/edit-faq.html",
controller: 'main-ctrl'
})
.when('/general', {
templateUrl: "./views/general.html",
controller: 'main-ctrl'
})
.when('/personnel', {
templateUrl: "./views/about-personnel.html",
controller: 'main-ctrl'
})
.when('/settings', {
templateUrl: "./views/settings.html",
controller: 'main-ctrl'
})
.when('/terms', {
templateUrl: "./views/terms.html",
controller: 'main-ctrl'
})
.otherwise({
redirectTo: '/'
});
var customBlueMap = $mdThemingProvider.extendPalette('light-blue', {
'contrastDefaultColor': 'light',
'contrastDarkColors': ['50'],
'50': 'ffffff'
});
$mdThemingProvider.definePalette('customBlue', customBlueMap);
$mdThemingProvider.theme('default')
.primaryPalette('customBlue', {
'default': '500',
'hue-1': '50'
})
.accentPalette('pink');
$mdThemingProvider.theme('input', 'default')
.primaryPalette('grey')
});
/**
* Main Data and Functions Controller
*/
quaestio.controller('main-ctrl', function($scope, $http) {
var refresh = function() {
$http.get('/quaestioJS').
success(function(data, status, headers, config) {
$scope.resdata = data;
$scope.limpiar();
}).
error(function(data, status, headers, config) {
console.log("Errorazo.");
console.log(data);
});
}
refresh();
$scope.agregar = function() {
$scope.tmpdata.query = "INSERT INTO personas SET ?";
$http.post('/quaestioJS', $scope.tmpdata).
success(function(data, status, headers, config) {
refresh();
$scope.limpiar();
}).
error(function(data, status, headers, config) {
console.log("Errorazo.");
console.log(data);
});
}
$scope.eliminar = function(id) {
var query = "DELETE FROM personas WHERE ID = " + id;
$http.delete('/quaestioJS/' + query).
success(function(data, status, headers, config) {
refresh();
$scope.limpiar();
}).
error(function(data, status, headers, config) {
console.log("Errorazo.");
console.log(data);
});
}
$scope.editar = function(id) {
var query = "SELECT * FROM personas WHERE ID = " + id;
$http.get('/quaestioJS/' + query).
success(function(data, status, headers, config) {
$scope.tmpdata = data[0];
console.log();
}).
error(function(data, status, headers, config) {
console.log("Errorazo.");
console.log(data);
});
}
$scope.actualizar = function() {
$scope.tmpdata.query = "UPDATE personas SET ? WHERE ID = " + $scope.tmpdata.ID;
$http.post('/quaestioJS', $scope.tmpdata).
success(function(data, status, headers, config) {
refresh();
$scope.limpiar();
}).
error(function(data, status, headers, config) {
console.log("Errorazo.");
console.log(data);
});
}
$scope.limpiar = function() {
$scope.tmpdata = "";
}
});
/**
* Modern Design Controller
*/
quaestio.controller('md-ctrl', ['$scope', '$mdBottomSheet', '$mdSidenav', '$mdDialog', '$http', '$location',
function($scope, $mdBottomSheet, $mdSidenav, $mdDialog, $http, $location) {
$scope.colors = [{
color: 'red'
}, {
color: 'blue'
}, {
color: 'green'
}, {
color: 'yellow'
}];
$scope.prueba = function(path) {
$location.path(path);
}
$scope.menu = [
{
id: '/home',
title: 'Inicio',
icon: 'home'
}, {
id: '/about',
title: 'Sobre La Empresa',
icon: 'info'
}, {
id: '/personnel',
title: 'Sobre Nosotros',
icon: 'people'
}, {
id: '/terms',
title: 'Terminos de Uso',
icon: 'account_balance'
}, {
id: '/faq',
title: 'Preguntas Frecuentes',
icon: 'question_answer'
}, {
id: '/contact',
title: 'Contactanos',
icon: 'quick_contacts_mail'
}, {
id: '/communities',
title: 'Comunidades',
icon: 'extension'
}, {
id: '/general',
title: 'Generalidades',
icon: 'dashboard'
}
];
$scope.admin = [{
link: '',
title: 'Salir de sesion',
icon: 'exit_to_app'
}, {
link: 'showListBottomSheet($event)',
title: 'Configuracion',
icon: 'settings'
}];
$scope.dynamicelements = {
tabTitle: '',
page: '',
username: '',
email: ''
};
$scope.alert = '';
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
$scope.showListBottomSheet = function($event) {
$scope.alert = '';
$mdBottomSheet.show({
templateUrl: 'views/settings.html',
controller: 'ListBottomSheetCtrl',
targetEvent: $event
}).then(function(clickedItem) {
$scope.alert = clickedItem.name + ' Clickeado!';
});
};
$scope.showAdd = function(ev) {
$mdDialog.show({
controller: funcDialogController,
template: '',
targetEvent: ev
})
.then(function(answer) {
$scope.alert = 'Dijiste que tu informacion era "' + answer + '".';
}, function() {
$scope.alert = 'Cancelaste la operacion.';
});
};
$scope.funcChangePage = function(id) {
$scope.dynamicelements.page = id;
console.log(id);
}
}
]);
/**
* Option Menu Controller
*/
quaestio.controller('options-ctrl', function($scope, $mdBottomSheet) {
$scope.items = [{
name: 'Subir',
icon: 'upload'
}, {
name: 'Copiar',
icon: 'copy'
}, {
name: 'Imprimir esta pagina',
icon: 'print'
}];
$scope.listItemClick = function($index) {
var clickedItem = $scope.items[$index];
$mdBottomSheet.hide(clickedItem);
};
});
/**
* Data Table Controller
*/
quaestio.controller('table-ctrl', ['$scope',
function($scope) {
$scope.tabledata = [{
date: new Date('1987-05-21'),
question: 'Como se llama la compania?',
answer: 'Quaestio'
}, {
date: new Date('1987-05-21'),
question: 'Quienes lo empezaron?',
answer: 'Carlos Cornejo y Jonathan Solorzano'
}, {
date: new Date('1987-05-21'),
question: 'Como surgio?',
answer: 'Como una start up.'
}];
}
]);
function funcDialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
};
quaestio.directive('userAvatar', function() {
return {
replace: true,
templateUrl: './views/avatar.html'
};
});
quaestio.directive('mdTable', function() {
return {
restrict: 'E',
scope: {
headers: '=',
content: '=',
sortable: '=',
filters: '=',
customClass: '=customClass',
thumbs: '=',
count: '='
},
controller: function($scope, $filter, $window) {
var orderBy = $filter('orderBy');
$scope.tablePage = 0;
$scope.nbOfPages = function() {
return Math.ceil($scope.content.length / $scope.count);
},
$scope.handleSort = function(field) {
if ($scope.sortable.indexOf(field) > -1) {
return true;
} else {
return false;
}
};
$scope.order = function(predicate, reverse) {
$scope.content = orderBy($scope.content, predicate, reverse);
$scope.predicate = predicate;
};
$scope.order($scope.sortable[0], false);
$scope.getNumber = function(num) {
return new Array(num);
};
$scope.goToPage = function(page) {
$scope.tablePage = page;
};
},
template: angular.element(document.querySelector('#md-table-template')).html()
}
});
&#13;
md-content.md-default-theme {
background-color: #eee;
}
md-card {
background-color: #fff;
}
md-card h2:first-of-type {
margin-top: 0;
}
md-toolbar .md-button.md-default-theme {
border-radius: 99%;
}
h2 {
font-weight: 400;
}
.md-toolbar-tools-bottom {
font-size: small;
}
.md-toolbar-tools-bottom:last-child {
opacity: 0.8;
}
md-toolbar:not(.md-hue-1),
.md-fab {
fill: #fff;
}
md-sidenav {
fill: #737373;
}
md-sidenav ng-md-icon {
position: relative;
top: 5px;
}
.user-avatar {
border-radius: 99%;
}
.sites-list .md-button {
color: inherit;
text-align: left;
width: 100%;
}
&#13;
<!DOCTYPE html>
<html ng-app="Quaestio">
<head lang="es">
<meta charset="UTF-8">
<title>Quaestio - Administration</title>
<!--Stylesheets ================================================================== -->
<!-- Angular Material CSS now available via Google CDN; version 0.8 used here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
</head>
<body layout="row" ng-controller="md-ctrl">
<!-- Barra lateral izquierda ================================================================== -->
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar class="md-tall md-hue-2">
<!-- Inicio del toolbar donde se mostrara la informacion del usuario -->
<span flex></span>
<div layout="column" class="md-toolbar-tools-bottom inset">
<user-avatar></user-avatar>
<span></span>
<div>{{dynamicelements.username}}</div>
<div>{{dynamicelements.email}}</div>
</div>
</md-toolbar>
<!-- /Fin de toolbar -->
<md-list class="sites-list">
<!-- Inicio de la lista de los sitios editables y opciones de sesion-->
<md-item ng-repeat="item in menu">
<!-- Inicio de la lista de los sitios -->
<md-item-content layout="row" layout-align="start center">
<md-button md-ripple-size="full" ng-click="prueba(item.id)">
<ng-md-icon icon="{{item.icon}}"></ng-md-icon>{{item.title}}
</md-button>
</md-item-content>
</md-item>
<!-- /Fin de lista de sitios -->
<md-divider></md-divider>
<md-subheader>Sesion</md-subheader>
<md-item ng-repeat="item in admin">
<!-- Inicio de la lista de opciones de sesion -->
<md-item-content layout="row" layout-align="start center">
<md-button md-ripple-size="full" ng-click="prueba(item.id)">
<ng-md-icon icon="{{item.icon}}"></ng-md-icon>
{{item.title}}
</md-button>
</md-item-content>
</md-item>
<!-- /Fin de opciones de sesion -->
</md-list>
<!-- /Fin de listado -->
</md-sidenav>
<!-- Body of App ================================================================================= -->
<div layout="column" class="relative" layout-fill role="main">
<md-button class="md-fab md-fab-bottom-right" aria-label="Add" ng-click="showAdd($event)">
<!-- Boton agregar presente solo en el panel de usuarios -->
<ng-md-icon icon="add"></ng-md-icon>
</md-button>
<!-- /Fin de boton -->
<md-toolbar ng-show="!showSearch">
<!--Inicio del toolbar de navegacion-->
<div class="md-toolbar-tools">
<!--Inicio del panel de opciones-->
<md-button ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu">
<ng-md-icon icon="menu"></ng-md-icon>
</md-button>
<h3>
Administracion - Quaestio
</h3>
<span flex></span>
<md-button aria-label="Search" ng-click="showSearch = !showSearch">
<ng-md-icon icon="search"></ng-md-icon>
</md-button>
<md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
<ng-md-icon icon="more_vert"></ng-md-icon>
</md-button>
</div>
<!--/Fin de panel de navegacion-->
<md-tabs md-stretch-tabs class="md-primary" md-selected="">
<!--Inicio de tabs de toolbar-->
<md-tab id="tab1" aria-controls="tab1-content">
{{dynamicelements.tabTitle}}
</md-tab>
</md-tabs>
<!--/Fin de tabs-->
</md-toolbar>
<!--/Fin de toolbar-->
<md-toolbar class="md-hue-1" ng-show="showSearch">
<!--Inicio de toolbar de opciones para buscar-->
<div class="md-toolbar-tools">
<md-button ng-click="showSearch = !showSearch" aria-label="Back">
<ng-md-icon icon="arrow_back"></ng-md-icon>
</md-button>
<h3 flex="10">
Atras
</h3>
<md-input-container md-theme="input" flex>
<label> </label>
<input ng-model="search.who" placeholder="Buscar">
</md-input-container>
<md-button aria-label="Search" ng-click="showSearch = !showSearch">
<ng-md-icon icon="search"></ng-md-icon>
</md-button>
<md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
<ng-md-icon icon="more_vert"></ng-md-icon>
</md-button>
</div>
</md-toolbar>
<!--/Fin de toolbar -->
<md-content flex md-scroll>
<!--Inicio del contenido de sitios-->
<ui-view layout="column" layout-fill layout-padding>
<div class="inset"></div>
<md-card flex-gt-sm="90" flex-gt-md="80" flex-gt-lg="85">
<md-card-content>
<div layout="column" layout-sm="column" layout-padding style="padding: 24px;">
<div class="row text-center">
<h2>Informacion de Contacto</h2>
</div>
<md-divider md-inset></md-divider>
<br />
<br />
<div class="row">
<md-input-container class="md-icon-float">
<label>Correo</label>
<md-icon src="./files/img/correo.png"></md-icon>
<input />
</md-input-container>
</div>
<div class="row">
<md-input-container class="md-icon-float">
<label>Direccion</label>
<md-icon src="./files/img/direccion.png"></md-icon>
<input />
</md-input-container>
</div>
<div class="row">
<md-input-container class="md-icon-float">
<label>Telefono</label>
<md-icon src="./files/img/telefono.png"></md-icon>
<input />
</md-input-container>
</div>
<div class="row">
<md-input-container class="md-icon-float">
<label>Nombre de Compania</label>
<md-icon src="./files/img/compania.png"></md-icon>
<input />
</md-input-container>
</div>
</div>
</md-card-content>
</md-card>
</ui-view>
</md-content>
<!--/Fin de contenido de sitios-->
</div>
<!-- Dependecies ================================================================== -->
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.8 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js"></script>
<script src="//cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.0.3/smart-table.js"></script>
</body>
</html>
&#13;
单独使用角度材质或者如果必须使用AngularJS的引导程序,请查看我写的http://tilwinjoy.github.io/angular-bootstrap-material/。