如何将 materialize css 添加到 angularjs 项目？

Question

我正在使用 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 路由，但不确定如何...

Answer 1

将下面的行添加到您的头部以加载 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 and not http://materializecss.com/，在标题和标签中。 materializecss 是一个单独的项目，提供类似的组件。你可能不需要两者。

Answer 2

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

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

yo gulp-angular

对于现有项目，我只使用以下存储库：

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

安装angular-material

即可实现

bower install angular-material

Answer 3

bower install angular-material --save

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

当您使用 bower 时，它会自动更新您的 index.html（添加 css 和 js 文件），您无需手动添加。

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

Answer 4

派对迟到了，但我知道如何使用 Angular 项目

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> 中包含 material 图标，您就可以开始了。

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

如何将 materialize css 添加到 angularjs 项目？

How to add materialize css to an angularjs project?

css

materialize

angularjs

yeoman