江阴网站建设,江阴网站制作,江阴网站设计,江阴SEO优化,江阴小程序开发-江阴雨辰互联

  1. JustNews 首页
  2. questions

javascript - How to use the angular material theme? - Stack Overflow

admin••questions•阅读4

I made a seed project for Angular Material and want to check out some of the features the framework off

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: '',
            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_ponents/angular-material/angular-material.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <!-- endbuild -->
</head>
<body>
<h1>
    Wele 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="userpany" 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="/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

<!-- endbuild -->

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_ponents/angular/angular.js"></script>
<script src="bower_ponents/angular-animate/angular-animate.js"></script>
<script src="bower_ponents/angular-cookies/angular-cookies.js"></script>
<script src="bower_ponents/angular-resource/angular-resource.js"></script>
<script src="bower_ponents/angular-route/angular-route.js"></script>
<script src="bower_ponents/angular-aria/angular-aria.js"></script>
<script src="bower_ponents/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: '' ,
      pany: '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_ponents",
        "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"
    }
}

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./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_ponents/angular-material/angular-material.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <!-- endbuild -->
</head>
<body>
<h1>
    Wele 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.pany" 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./">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

<!-- endbuild -->

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_ponents/angular/angular.js"></script>
<script src="bower_ponents/angular-animate/angular-animate.js"></script>
<script src="bower_ponents/angular-cookies/angular-cookies.js"></script>
<script src="bower_ponents/angular-resource/angular-resource.js"></script>
<script src="bower_ponents/angular-route/angular-route.js"></script>
<script src="bower_ponents/angular-aria/angular-aria.js"></script>
<script src="bower_ponents/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: '' ,
      pany: '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_ponents",
        "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"
    }
}
  • javascript
  • angularjs
  • material-design
  • angular-material
Share Improve this question edited Jan 5, 2016 at 17:15 serraosays 7,9593 gold badges38 silver badges68 bronze badges asked Oct 20, 2015 at 19:25 user3752338user3752338 3
  • did you try to specify an accent palette? $mdThemingProvider.theme('xxxxxx', 'default') .primaryPalette('blue') .accentPalette('orange') – aldo.roman.nurena Commented Oct 22, 2015 at 2:27
  • The css build was not taking the css, so I just update the .bowerrc as : "directory": "src/ponents/", earlier it was missing and it worked but some features still missing. Working on it will update when it's done. – user3752338 Commented Oct 22, 2015 at 20:17
  • From what I see (in index.html), you are declaring the md-theme="docs-theme" for mdContent, but your mdButtons with theme classes md-primary/md-accent/md-warn reside outside that declaration. Try putting them inside? Also, keep in mind that not all AM ponents support theming (see material.angularjs/latest/Theming/02_declarative_syntax). – John Doe Commented Oct 30, 2015 at 21:23
Add a ment  | 

1 Answer 1

Reset to default 4

I am assuming the problem is ing 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.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744297276a4567322.html

adminadmin
0

相关推荐

  • javascript - How to use the angular material theme? - Stack Overflowquestions

    javascript - How to use the angular material theme? - Stack Overflow

    I made a seed project for Angular Material and want to check out some of the features the framework off

    adminadmin
    7天前
    50

发表回复

评论列表（0条）

  • 暂无评论

联系我们

400-800-8888

在线咨询： QQ交谈

邮件：admin@example.com

工作时间：周一至周五，9:30-18:30，节假日休息

关注微信