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

bower install angular-material --save

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

当你使用凉亭时它会自动更新你的index.html（添加css和js文件），你不必手动添加它。

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

Answer 2

将以下行添加到您的头部以加载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是一个提供类似组件的独立项目。你可能不需要两者。

Answer 3

如果您要开始一个新项目，有一个很好的自制生成器会为您做到这一点：https://github.com/Swiip/generator-gulp-angular

只需在以下选项中选择它：

yo gulp-angular

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

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

可以通过安装angular-material

来实现

bower install angular-material

Answer 4

晚会但我知道如何使用Angular Projects

Angular 1.xx

只需在项目中导入Materialise 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

然后只需在脚本和CSS路径下复制粘贴

，即可在angular-cli.json中导入Materialise 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"
      ]

在<head>的{{1}}中加入材料图标，您就可以了。

index.html

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

4 个答案: