md-toolbar 不使用角度材质渲染为材质工具栏答案

【问题标题】：md-toolbar not rendering as material toolbar using angular materialmd-toolbar 不使用角度材质渲染为材质工具栏
【发布时间】：2016-12-01 09:11:52
【问题描述】：

我正在使用 angular material v1.1.0 并尝试创建一个简单的工具栏。我从角度材料演示中获取了代码，但是工具栏被渲染，而不是获取单个元素。不知道我错过了什么。

var app = angular.module('app', ['ngMaterial', 'ngRoute']);

    <html ng-app="app">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>My App</title>

    	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    	<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
        
        <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
      </head>

      <body>
        <md-content>
        	<md-toolbar>
        		<div class="md-toolbar-tools">
        			<md-button class="md-icon-button" aria-label="menu">
        				<md-icon md-font-set="material-icons">menu</md-icon>
        			</md-button>
        			<h2>
        				<span>My App</span>
        			</h2>
        			<span flex></span>
        			<md-button class="md-icon-button" aria-label="menu">
        				<md-icon md-font-set="material-icons">whatshot</md-icon>
        			</md-button>
        			<md-button class="md-icon-button" aria-label="menu">
        				<md-icon md-font-set="material-icons">share</md-icon>
        			</md-button>
        			<md-button class="md-icon-button" aria-label="menu">
        				<md-icon md-font-set="material-icons">file_download</md-icon>
        			</md-button>
        			<md-button class="md-icon-button" aria-label="menu">
        				<md-icon md-font-set="material-icons">thumb_up</md-icon>
        			</md-button>
        		</div>
        	</md-toolbar>
        </md-content>
      </body>
    </html>

【问题讨论】：

你能同时创建一个 plunker 你面临什么错误？
我已经创建了一个代码笔codepen.io/biznetboost/pen/RoxNaY 看看外观你就会明白
你有没有从某个地方举过例子，但它在你的代码笔中不起作用？

标签： javascript angularjs angular-material

【解决方案1】：

您在加载 angular-material css 时忘记添加 rel="stylesheet"。工作笔在这里：

http://codepen.io/anon/pen/jVYEdM

【讨论】：