Javascript 如何使用角材质主题?
我为Angular Material做了一个种子项目,想看看框架提供的一些功能。我的HTML工作正常,其他一些Javascript 如何使用角材质主题?,javascript,angularjs,material-design,angular-material,Javascript,Angularjs,Material Design,Angular Material,我为Angular Material做了一个种子项目,想看看框架提供的一些功能。我的HTML工作正常,其他一些ng操作也工作正常 当我尝试检查表单功能时,页面呈现,但主题和其他操作不起作用。我在探索表单功能时提到。我已经包括了主题模块,但它不起作用 Module.js var app = angular.module('Tool', ["ng","ngAnimate","ngAria", 'ngMaterial','ngMessages', 'ui.router', 'ngCookies', '
ng
操作也工作正常
当我尝试检查表单功能时,页面呈现,但主题和其他操作不起作用。我在探索表单功能时提到。我已经包括了主题模块,但它不起作用
Module.js
var app = angular.module('Tool', ["ng","ngAnimate","ngAria", 'ngMaterial','ngMessages', 'ui.router', 'ngCookies', 'ngResource','ngRoute', 'satellizer', 'myConfig.config'])
.config(function($authProvider,$mdThemingProvider) {
$authProvider.google({
clientId: 'XXXXXX',
url: '/auth/google',
authorizationEndpoint: 'https://accounts.google.com/o/oauth2/auth',
redirectUri: "http://localhost:8585" || window.location.origin || window.location.protocol + '//' + window.location.host,
requiredUrlParams: ['scope'],
optionalUrlParams: ['display'],
scope: ['profile', 'email'],
scopePrefix: 'openid',
scopeDelimiter: ' ',
display: 'popup',
type: '2.0',
popupOptions: { width: 452, height: 633 }
});
$mdThemingProvider.theme('docs-dark', 'default')
.primaryPalette('yellow')
.dark();
});
'use strict';
/**
* Route configuration.
*/
angular.module('Tool').config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For unmatched routes
$urlRouterProvider.otherwise('/');
// Application routes
$stateProvider
.state('index', {
url: '/',
templateUrl: 'templates/newpage.html'
})
}
]);
Route.js
var app = angular.module('Tool', ["ng","ngAnimate","ngAria", 'ngMaterial','ngMessages', 'ui.router', 'ngCookies', 'ngResource','ngRoute', 'satellizer', 'myConfig.config'])
.config(function($authProvider,$mdThemingProvider) {
$authProvider.google({
clientId: 'XXXXXX',
url: '/auth/google',
authorizationEndpoint: 'https://accounts.google.com/o/oauth2/auth',
redirectUri: "http://localhost:8585" || window.location.origin || window.location.protocol + '//' + window.location.host,
requiredUrlParams: ['scope'],
optionalUrlParams: ['display'],
scope: ['profile', 'email'],
scopePrefix: 'openid',
scopeDelimiter: ' ',
display: 'popup',
type: '2.0',
popupOptions: { width: 452, height: 633 }
});
$mdThemingProvider.theme('docs-dark', 'default')
.primaryPalette('yellow')
.dark();
});
'use strict';
/**
* Route configuration.
*/
angular.module('Tool').config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For unmatched routes
$urlRouterProvider.otherwise('/');
// Application routes
$stateProvider
.state('index', {
url: '/',
templateUrl: 'templates/newpage.html'
})
}
]);
index.html
<!doctype html>
<html lang="en" ng-app="Tool">
<head>
<meta charset="utf-8">
<title>Tool</title>
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<!-- endbuild -->
</head>
<body>
<h1>
Welcome to new Tool
</h1>
<md-button class="md-primary">Click me</md-button>
<md-button class="md-accent">or maybe me</md-button>
<md-button class="md-warn">Careful</md-button>
<div ng-controller="DemoCtrl" layout="column">
<md-content md-theme="docs-dark" layout-padding layout="row" layout-sm="column">
<md-input-container>
<label>Title</label>
<input ng-model="user.title">
</md-input-container>
<md-input-container>
<label>Email</label>
<input ng-model="user.email" type="email">
</md-input-container>
</md-content>
<md-content layout-padding>
<form name="userForm">
<div layout layout-sm="column">
<md-input-container style="width:80%">
<label>Company (Disabled)</label>
<input ng-model="user.company" disabled>
</md-input-container>
<md-input-container flex>
<label>Submission Date</label>
<input type="date" ng-model="user.submissionDate">
</md-input-container>
</div>
<div layout layout-sm="column">
<md-input-container flex>
<label>First name</label>
<input ng-model="user.firstName">
</md-input-container>
<md-input-container flex>
<label>Last Name</label>
<input ng-model="theMax">
</md-input-container>
</div>
<md-input-container flex>
<label>Address</label>
<input ng-model="user.address">
</md-input-container>
<md-input-container md-no-float>
<input ng-model="user.address2" placeholder="Address 2">
</md-input-container>
<div layout layout-sm="column">
<md-input-container flex>
<label>City</label>
<input ng-model="user.city">
</md-input-container>
<md-input-container flex>
<label>State</label>
<input ng-model="user.state">
</md-input-container>
<md-input-container flex>
<label>Postal Code</label>
<input ng-model="user.postalCode">
</md-input-container>
</div>
<md-input-container flex>
<label>Biography</label>
<textarea ng-model="user.biography" columns="1" md-maxlength="150"></textarea>
</md-input-container>
</form>
</md-content>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<!-- endbuild -->
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<!-- endbower -->
<!-- endbuild -->
</body>
</html>
bower.json
{
"name": "angular-material",
"version": "0.0.1",
"description": "An AngularJS implementation of the responsive dashboard",
"main": "index.html",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"angular-cookies": "~1.2.21",
"angular-ui-router": "^0.2.10",
"font-awesome": "~4.1.0",
"angular-resource": "~1.3.0",
"angular": "^1.4.6",
"angular-animate": "^1.4.6",
"angular-aria": "^1.4.6",
"angular-material": "^0.11.2",
"angular-route": "~1.3.*",
"gulp-ng-config": "~1.2.1",
"angular-animate": "^1.4.6",
"satellizer": "~0.12.5"
},
"repository": {
"type": "git",
"url": "xxx"
},
"devDependencies": {
"angular-material": "xxx"
}
}
我假设问题来自没有主题的按钮。如果这是问题所在,则您配置的主题不是默认主题;它是“docs dark”主题,仅用于分配给它的
md内容
块
您可以按如下方式配置默认主题:
Module.js
'use strict'
var app = angular.module('Tool', ["ng","ngAnimate","ngAria",
'ngMaterial','ngMessages', 'ui.router', 'ngCookies','ngResource','ngRoute',
'satellizer', 'myConfig.config'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('yellow') // I like green, but just me
.dark(); // Dark is pretty cool.
现在将全局应用
.dark()
和.primaryplate('yellow')
。是否尝试指定重音调色板$mdThemingProvider.theme('xxxxxx','default').primaryPalette('blue').accentPalette('orange')
css构建没有使用css,所以我只是将.bowerrc更新为:“目录”:“src/components/”,之前它丢失了,但仍然缺少一些功能。完成后,处理它将更新。从我看到的(index.html中),您正在为mdContent声明md-theme=“docs-theme”,但主题类为md-primary/md-accent/md-warn的mdButtons位于该声明之外。试着把它们放进去?另外,请记住,并非所有AM组件都支持主题化(请参阅)。authProvider不是必需的。