2015-09-12 2 views
2

Я использую Yeoman для разработки нового сайта с угловымJS. Я пробовал с bower install materialize и bower install angular-material, но ничего не происходит, я имею в виду, это не меняет внешний вид и функциональность. Я также добавить к index.html эти две линии:Как добавить материализацию css в проект angularjs?

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

Я предполагаю, что может изменить маршрут CSS для стиля, но не знаю, как ...

ответ

0

Добавьте строку ниже, чтобы ваш голову, чтобы загрузить устанавливаемый сотовые

полный скелет доступен на

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

Кстати, ваши bower install и script src оба относятся к https://material.angularjs.org/latest, а не к http://materializecss.com/, что в названии и тегах. materializecss - отдельный проект, который предоставляет аналогичные компоненты. Вам, вероятно, не нужны оба.

+0

Да, вы правы. Есть два разных проекта, поэтому я использую только материал materializecss. Благодаря! –

0

Существует хороший старшина генератор, который будет делать это для вас, если вы начинаете новый проект: https://github.com/Swiip/generator-gulp-angular

просто выбрать его в настройках после:

yo gulp-angular 

Для существующих проектов я просто использовать следующий репо:

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

, который может быть реализован путем установки углового материала

bower install angular-material 
+0

Кстати, я вижу, вы уже пытаетесь использовать угловой материал. Можете ли вы проверить, была ли указана зависимость «ngMaterial» в вашем приложении? Может быть, поэтому ничего не происходит. –

+0

Да, я сделал, а также попробую генератор йома, который вы мне сказали. Благодаря! –

2

bower install angular-material --save

Это установит и (--save) обновить файл package.json.

Когда вы используете bower, он автоматически обновит ваш index.html (добавьте файлы css и js), вам не нужно добавлять его вручную.

В вашем случае я предлагаю вам проверить, добавлена ​​ли зависимость в ваш app.js или нет, это может быть проблема.

+0

Большое вам спасибо, я думаю, что меня смутили две разные вещи: угловой материал и материал. Я также проверял зависимости, но одежда не изменилась. Благодаря! –

0

Late к партии, но я знаю, как сделать это с угловыми Проектами

Угловые 1.хх

Просто импортировать материализовать 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> 

угловыми 2+

Сначала установите materilize и Jquery

НПМ установить материализовать-CSS JQuery Font- awesome --save

А затем импортировать материализовать CSS в angular-cli.json просто скопировать пасты ниже сценариев и 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> из index.html, и вы хорошо идти.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
Смежные вопросы