Есть ли стартовый проект для материала, угловой, как и ионный стартовый проект? Я пробовал использовать угловое семя и проложить его с помощью материала угловатым, но никому не повезло, кто-нибудь может помочь? Что я в принципе нужен, чтобы получить HTML так же, как ионный проект стартера HTML, но с материальным стилемСоздать стартовый проект для материала угловой
https://github.com/angular/angular-seed.git material.angularjs.org
Вот мое решение:
bower.json
{
"name": "MyApp",
"version": "0.0.1",
"dependencies": {
"angular": "^1.3.0",
"json3": "^3.3.0",
"es5-shim": "^4.0.0",
"angular-animate": "^1.3.0",
"angular-cookies": "^1.3.0",
"angular-resource": "^1.3.0",
"angular-route": "^1.3.0",
"angular-sanitize": "^1.3.0",
"angular-touch": "^1.3.0",
"angular-material": "master"
},
"devDependencies": {
"angular-mocks": "~1.3.0",
"angular-scenario": "~1.3.0"
},
"appPath": "app"
}
И мой index.html
<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/blue-grey-theme.css">
<!-- endbuild -->
</head>
<body layout="row" md-theme="blue-grey">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<md-sidenav layout="column" style="overflow: hidden; display: flex;"
class="md-sidenav-left md-whiteframe-z2"
md-component-id="left"
md-is-locked-open="$media('gt-md')">
<md-toolbar style="min-height: 64px; max-height:64px;">
<h2 class="sidenav-header">Title</h2>
</md-toolbar>
<md-content flex style="overflow: auto;" ng-cloak>
...
</md-content>
</md-sidenav>
<div layout="column" layout-fill tabIndex="-1" role="main">
<md-toolbar layout="row">
<div class="md-toolbar-tools" flex layout="column">
<div layout="row" flex>
<button class="menu-icon"
hide-gt-md
aria-label="Toggle Menu"
style="position: relative; top: -5px;"
ng-click="openMenu()">
<md-icon icon="images/icons/ic_menu_24px.svg"></md-icon>
</button>
</div>
</div>
</md-toolbar>
<md-content ng-view="" md-scroll-y flex class="md-padding" ng-cloak></md-content>
</div>
<!-- build:js(.) scripts/oldieshim.js -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<![endif]-->
<!-- endbuild -->
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/hammerjs/hammer.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->
</body>
</html>
Затем я скопировал использованные темы css «blue-gray-theme.css» в папку стилей приложений. Thats all
Мне не удалось найти отсутствующие файлы js .. Я создал файл app.js main.js и about.js .. Я также настроил маршруты, но я хочу, чтобы я получил пустой экран, который не выглядит веб-сайт, хотя я скопировал сине-серый-theme.css, а также, когда я изменил размер браузера, скользящее меню не скрывает, есть ли что-нибудь еще, что я пропустил? –
Без кода или живого примера, который я мог бы отлаживать, Трудно сказать. То, что вы видите выше, работает для меня, когда я использую генератор углового генератора. –
Я получаю эту ошибку при неудачном выполнении теста предварительной сборки yoemen, компилируя из источника ... × {[Ошибка: команда не выполнена: '.' не признается как внутренний или внешний com mand, –
Все, что вам нужно сделать, это создать файлы HTML и JS и связать их вместе с помощью тега <script>. Вам не нужны Грунт или Йомен, чтобы поиграть с Угловым материалом. Просто загрузите необходимые файлы через Bower, набрав bower init в терминале внутри папки, в которой вы сохраняете свои файлы. Как только вы загрузите Angular Material, просто перейдите к их Git page и скопируйте и вставьте JS-файлы в свой HTML-код, который также должен быть загружен через Bower или связан через CDN. На странице Git вы найдете все, что вам нужно, чтобы запустить Angular Material.
Вы можете попробовать этот.
AngularJS Материал-Start
Этот материал старт * Проект является семенем для применения AngularJS Материала. Проект содержит пример приложения AngularJS и предварительно сконфигурирован для установки Угловой рамки и множества инструментов для разработки и тестирования для мгновенного удовлетворения веб-разработок.
Еще один интересный example, что я использовал много раз в качестве руководства и вдохновения, демонстрируя немного более сложные схемы, чем материал-старт.
codepen: http://codepen.io/kyleledbetter/pen/gbQOaV
Спасибо за обмен. Это разветвлено из еще более простого стартового приложения, которое, как мне показалось, стоит поделить: https://codepen.io/marcysutton/pen/OPbpKm/ – TBirkulosis
Если вы используете Угловые 2, то есть хорошее руководство по https://github.com/angular/material2 находится в https://github.com/angular/material2/blob/master/guides/getting-started.md
Также слишком образцы могут быть найдены в https://github.com/jelbourn/material2-app и https://github.com/kara/leashed-in
Настройка приложения с использованием YEOMAN. –
Я использовал стандартный угловой генератор, а затем заменил бутстрап на зависимости углового материала. После этого я объединил код index.html и template.html из документов углового материала. –