CODEWITHSUNDEEP
javascriptangularjsmaterial-designangular-material
user3752338
user3752338

Reputation:

How to use the angular material theme?

I made a seed project for Angular Material and want to check out some of the features the framework offers. My HTML is working fine and some other ng actions are also working well.

When I tried to check the form feature, the page renders but the theme and other actions are not working. I am referring to Angular Material input demo as I explore the form feature. I have included the theme module but it's not working.

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

/** * Demo Controller */

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"
    }
}

Upvotes: 13

Views: 7304

Answers (1)

Kris Molinari
Kris Molinari

Reputation: 503

I am assuming the problem is coming from the buttons not being themed. If that is the problem, the theme you configured is not the default theme; it is the "docs-dark" theme and will only be used in md-content blocks it is assigned to.

You can configure the default theme like so:

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.

Now the .dark() and .primaryPalette('yellow') will be applied globally.

Upvotes: 4

Related Questions