Tıpkı iyonik starter projesi gibi malzeme açılışı için başlangıç projesi var mı? Açısal tohumu kullanmayı denedim ve malzemeyi açısal olarak kabloya tuttum ama hiç kimsenin yardım edemeyeceği bir şey var mı? i temelde gerekenler sadeceMalzeme açılışı için bir başlangıç projesi oluşturun
https://github.com/angular/angular-seed.git İşte material.angularjs.org
benim çözümdür iyonik marş proje HTML gibi ama malzeme tarzı ile HTML elde etmektir:
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"
}
Ve 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>
Sonra kullanılan temaları css "mavi-gri-theme.css" uygulama stilleri klasörüne kopyaladım. Hepsi
Eksik js dosyalarını bulamıyordum .. bir uygulama apps.js main.js ve about.js oluşturdum. Ayrıca rotaları da yapılandırdım ama boş bir ekran alıyorum gibi görünmüyor web sitesi ben mavi-gray-theme.css kopyaladım ve aynı zamanda ben kayan menü saklamıyor tarayıcı boyutu ne zaman özledim başka bir şey var mı? –
Hata ayıklayabildiğim herhangi bir kod veya canlı örnek olmadan, söylemek zor. Yukarıda gördüğünüz açısal yeoman jeneratörü kullandığım zaman benim için çalışıyor. –
Yoemen ön oluşturma sınaması kullanıldığında bu hatayı alıyorum kaynağından derleniyor ... × {[Hata: Komut başarısız: '.' bir iç veya dış com mand, –
Tek yapmanız gereken HTML ve JS dosyaları oluşturmak ve <script> etiketini kullanarak birbirine bağlamaktır. Açısal Malzeme ile oynamak için Grunt veya Yeoman'a ihtiyacınız yok. Dosyalarınızı kaydettiğiniz klasörün içindeki terminalde bower init yazarak gerekli dosyaları Bower aracılığıyla indirin. Angular Materyalini indirdikten sonra, Git page numarasına gidin ve JS dosya bağımlılıklarını HTML'nize kopyalayıp yapıştırın, bu da Bower yoluyla veya CDN yoluyla bağlanmalıdır. Git sayfası, Açısal Malzemeyi çalıştırıp çalıştırmanız için gereken her şeyi özetliyor.
Bunu deneyebilirsiniz.
angularjs Malzeme-Start
Bu Malzeme başlangıç * proje angularjs Materal uygulamaları için bir tohum. Proje, örnek bir AngularJS uygulaması içeriyor ve Angular çerçeveyi ve anlık web geliştirme gratifikasyonu için bir dizi geliştirme ve test aracını kurmak için önceden yapılandırıldı.
Ben maddi-başlamasından biraz daha karmaşık düzenleri göstererek rehber ve ilham kaynağı olarak birçok kez kullanılan bir başka ilginç example.
codepen: http://codepen.io/kyleledbetter/pen/gbQOaV
Paylaşım için teşekkürler. Bu, paylaşmaya değer olduğunu düşündüğüm daha basit bir başlangıç uygulamasından çatal attı: https://codepen.io/marcysutton/pen/OPbpKm/ – TBirkulosis
Eğer Açısal kullanıyorsanız 2 sonra yeoman kullanarak https://github.com/angular/material2/blob/master/guides/getting-started.md
çok örnekler https://github.com/jelbourn/material2-app bulunabilir Ayrıca
bulunan https://github.com/angular/material2 iyi bir rehber kurma uygulaması da mevcuttur. –
Standart yeoman açısal jeneratörü kullandım ve daha sonra açılı-malzeme bağımlılıkları ile bootstrap'i değiştirdim. Bundan sonra, index.html ve template.html kodlarını açısal malzeme belgelerinden birleştirdim. –