如何将物化 css 添加到 angularjs 项目中？答案

【问题标题】：How to add materialize css to an angularjs project?如何将物化 css 添加到 angularjs 项目中？
【发布时间】：2015-09-12 16:56:14
【问题描述】：

我正在使用 Yeoman 使用 angularJS 开发一个新网站。我试过bower install materialize 和bower install angular-material 但什么也没发生，我的意思是，它不会改变外观和功能。我还在 index.html 中添加了这两行：

<script src="bower_components/angular-aria/angular-aria.js"></script <script src="bower_components/angular-material/angular-material.js"></script>

我想我可能会更改样式的 css 路由，但不确定如何...

【问题讨论】：

标签： css angularjs yeoman materialize

【解决方案1】：

bower install angular-material --save

这将安装并（--save）更新您的 package.json 文件。

当您使用 bower 时，它会自动更新您的 index.html（添加 css 和 js 文件），您不必手动添加任何内容。

在您的情况下，我建议您检查是否将依赖项添加到您的 app.js 中，这可能是问题。

【讨论】：

非常感谢，我想我被两个不同的东西弄糊涂了：angular-material 和 materializecsss。我还检查了依赖项，但外观并没有改变。谢谢！

【解决方案2】：

聚会迟到了，但我知道如何使用 Angular Projects 来做这件事

Angular 1.xx

像这样在你的项目中导入 Materialize CSS

    <script type="text/javascript" src="./js/cdn/jquery-3.2.1.min.js"></script>

     <!-- Angular Material requires Angular.js Libraries -->
     <script src="./js/cdn/angular.min.js"></script>
     <script src="./js/cdn/angular-route.js"></script>
     <script src="./js/cdn/angular-animate.js"></script>

     <!-- Compiled and minified JavaScript -->
    <script src="./js/cdn/materialize.min.js"></script>
    <!--Initalize MaterializeCSS-->
    <script src="./js/init.js"></script>

Angular 2+

首先安装materilize和Jquery

npm install materialize-css jquery font-awesome --save

然后在angular-cli.json 中导入 Materialize CSS，只需在脚本和 CSS 路径下复制粘贴即可

"styles": [
        "styles.css",
         "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/materialize-css/dist/css/materialize.css"
      ],
      "scripts": [
          "../node_modules/jquery/dist/jquery.js",
        "../node_modules/materialize-css/dist/js/materialize.js"
      ]

在index.html 的<head> 中包含材料图标，您就可以开始了。

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

【讨论】：

【解决方案3】：

将下面的行添加到您的头部以加载 css

<link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">

完整的骨架可在

https://github.com/angular/bower-material/blob/master/README.md

顺便说一句，您的bower install 和script src 都指的是https://material.angularjs.org/latest 而不是http://materializecss.com/，它在标题和标签中。 materializecss 是一个提供类似组件的单独项目。您可能不需要两者。

【讨论】：

是的，你是对的。有两个不同的项目，所以我现在只使用materializecss。谢谢！

【解决方案4】：

如果您开始一个新项目，有一个不错的 yeoman 生成器可以为您完成：https://github.com/Swiip/generator-gulp-angular

只需在后面的选项中选择它：

yo gulp-angular

对于现有项目，我只使用以下 repo：

https://github.com/angular/material#bower

可以通过安装angular-material来实现

bower install angular-material

【讨论】：

顺便说一句，我看到您已经在尝试使用角度材料。你能检查一下你的应用程序中是否注入了“ngMaterial”依赖项吗？可能这就是为什么什么都没有发生的原因..
是的，我做到了，我也会试试你告诉我的 yeoman 生成器。谢谢！