2

I'm using Yeoman to develop a new site with angularJS. I've tried with bower install materialize and bower install angular-material but nothing happens, I mean, it doesn't change the appearance and functionality. I've add also to the index.html these two lines:

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

I guess I may change the css route for the style, but not sure how...

Improve this question

4 Answers 4

Reset to default
2

bower install angular-material --save

This will install and (--save) update your package.json file.

when you make use of bower it will automatically update your index.html (add css and js files), you dont have to add any it manually.

In your case i would suggest you to check whether the dependency is added to your app.js or not, this could possibly be issue.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you so much, I think I was confused by two different things: angular-material and materializecsss. I also checked the dependencies but the appareance didn't change anyway. Thanks!
1

Late to the party but I know how to do it with Angular Projects

Angular 1.xx

Simply import Materialise CSS in your project like this

    <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+

First install materilize and Jquery

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

And then import Materialise CSS in angular-cli.json by simply copy paste below script and CSS paths

"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"
      ]

Include material icons in the <head> of index.html and you are good to go.

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

Comments

0

Add the line below to your head to load the css

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

The full skeleton is available at

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

By the way, your bower install and script src both refer to https://material.angularjs.org/latest and not http://materializecss.com/, which is in the title and tags. materializecss is a separate project that provides similar components. You probably don't need both.

Improve this answer

1 Comment

Yes, you are right. There are two different projects, so I only use by now materializecss only. Thanks!
0

There is a nice yeoman generator that will do that for you if you are starting a new project: https://github.com/Swiip/generator-gulp-angular

just select it in the options after:

yo gulp-angular

For existing projects I just use the following repo:

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

which can be implemented by installing angular-material

bower install angular-material
Improve this answer

2 Comments

btw, I see you are already trying to use angular-material. Can you check if the 'ngMaterial' dependency was injected in your app? It could be that that's why nothing happens..
Yes I did and also I will try the yeoman generator you told me. Thanks!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.