13
Ho realizzato un progetto di seed per Angular Material e voglio verificare alcune delle caratteristiche offerte dal framework. Il mio codice HTML funziona bene e alcune altre azioni ng funzionano anche bene.Come utilizzare il tema del materiale angolare?
Quando ho provato a verificare la funzionalità del modulo, la pagina esegue il rendering ma il tema e altre azioni non funzionano. Mi riferisco a Angular Material input demo mentre esploro la funzionalità del modulo. Ho incluso il modulo tematico ma non funziona.
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();
});
Route.js
'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>
democtrl.js
/** * controller Demo */
angular.module('Tool','ngMaterial','ngMessages')
.controller('DemoCtrl', ['$scope', DemoCtrl]);
function DemoCtrl($scope) {
$scope.user = {
title: 'Developer',
email: '[email protected]',
firstName: '',
lastName: '' ,
company: 'Google' ,
address: '1600 Amphitheatre Pkwy' ,
city: 'Mountain View' ,
state: 'CA' ,
biography: 'Loves kittens, snowboarding, and can type at 130 WPM.\n\nAnd rumor has it she bouldered up Castle Craig!',
postalCode : '94043'
};
}
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"
}
}
hai provato a specificare una tavolozza degli accenti? '$ mdThemingProvider.theme ('xxxxxx', 'default') .primaryPalette ('blue') .accentPalette ('orange')' –
Il css build non stava prendendo il css, quindi aggiorno semplicemente il .bowerrc come: "directory": "src/components /", prima mancava e funzionava, ma mancano ancora alcune funzionalità. Lavorando su di esso verrà aggiornato quando è fatto. –
Da quello che vedo (in index.html), stai dichiarando md-theme = "docs-theme" per mdContent, ma i tuoi mdButtons con classi tematiche md-primary/md-accent/md-warn risiedono al di fuori di tale dichiarazione. Prova a metterli dentro? Inoltre, tieni presente che non tutte le componenti di AM supportano la tematizzazione (vedi https://material.angularjs.org/latest/Theming/02_declarative_syntax). –