2014-12-17 50 views
5

Esiste un progetto di avviamento per materiale angolare come il progetto di avviamento ionico? Ho provato a usare il seme angolare e legarlo con materiale angolare ma senza fortuna nessuno può aiutarmi? Quello che fondamentalmente bisogno è quello di ottenere HTML proprio come il ionica HTML progetto di avviamento, ma con stile materialeCreare un progetto di avviamento per materiale angolare

https://github.com/angular/angular-seed.git material.angularjs.org

+0

Impostare applicazione utilizzando Yeoman. –

+2

Ho usato il generatore angolare standard yeoman e poi ho sostituito il bootstrap con le dipendenze angolari-materiali. Successivamente ho unito il codice di index.html e il template.html ai documenti angular-material. –

risposta

3

Ecco la mia soluzione:

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

E il mio 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> 

Quindi ho copiato i miei temi usati css "blue-gray-theme.css" nella cartella stili app. Questo è tutto

+0

Non sono riuscito a trovare i file js mancanti .. ho creato un file app.js main.js e about.js .. ho anche configurato i percorsi ma la cosa è che ottengo uno schermo vuoto che non sembra il sito Web sebbene io abbia copiato il blue-gray-theme.css e anche quando ridimensiono il browser il menu scorrevole non si nasconde c'è qualcos'altro che ho perso? –

+0

Senza alcun codice o esempio dal vivo che potrei eseguire il debug, è difficile da dire. Quello che vedi sopra funziona per me quando uso il generatore angolare di yeoman. –

+0

Viene visualizzato questo errore quando si utilizza il test di precostruzione di yoemen fallito, compilando dall'origine ... × {[Errore: comando non riuscito: '.' non è riconosciuto come com interno o esterno mand, –

1

Tutto ciò che dovete fare è creare file HTML e JS e collegarli usando il tag <script>. Non hai bisogno di Grunt o Yeoman per giocare con materiale angolare. Basta scaricare i file necessari tramite Bower digitando bower init nel terminale all'interno della cartella in cui si salvano i file. Una volta scaricato il materiale angolare, vai al loro Git page e copia e incolla le dipendenze del file JS nel tuo HTML, che dovrebbe anche essere scaricato tramite Bower o collegato tramite un CDN. La loro pagina Git delinea tutto ciò di cui hai bisogno per ottenere il materiale angolare attivo e funzionante.

10

Puoi provare questo.

AngularJS Materiale-Start

Questo materiale di partenza * progetto è un seme per applicazioni AngularJS Materal. Il progetto contiene un'applicazione AngularJS di esempio ed è preconfigurato per installare il framework Angular e una serie di strumenti di sviluppo e test per la gratificazione immediata dello sviluppo web.

https://github.com/angular/material-start

5

altro interessante example che ho usato molte volte come guida e ispirazione, dimostrando un po layout più complessi rispetto al materiale-start.

codepen: http://codepen.io/kyleledbetter/pen/gbQOaV

+1

Grazie per la condivisione. Quello è biforcuto da un'app di avviamento ancora più semplice che ho pensato valesse la pena condividere: https://codepen.io/marcysutton/pen/OPbpKm/ – TBirkulosis

Problemi correlati