Frage Erstellen Sie ein Startprojekt für das Material eckig


Gibt es als Starter-Projekt für Material Winkel genau wie Ionische Starter-Projekt? Ich habe versucht, eckigen Samen und Draht es mit Material eckig, aber ohne Glück kann jemand helfen? Was ich im Grunde brauche, ist, HTML genauso wie das ionische Starter-Projekt HTML zu bekommen, aber mit Material-Stil

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


5
2017-12-17 12:29


Ursprung


Antworten:


Sie können dieses versuchen.

AngularJS Material-Start

Dieses Materialstart * -Projekt ist ein Ausgangspunkt für AngularJS Materal-Anwendungen. Das Projekt enthält eine Beispiel-AngularJS-Anwendung und ist vorkonfiguriert, um das Angular-Framework und eine Reihe von Entwicklungs- und Test-Tools für die sofortige Web-Entwicklungs-Befriedigung zu installieren.

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


10
2018-02-21 19:30



Ein anderes interessantes Beispiel Das habe ich oft als Anleitung und Inspiration benutzt, um ein bisschen komplexere Layouts als den Materialstart zu demonstrieren.

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


5
2018-04-28 13:06



Hier ist meine Lösung:

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

Und mein 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>

Dann habe ich meine verwendeten Themen css "blue-grey-theme.css" in den apps styles Ordner kopiert. Das ist alles


3
2017-12-17 12:39



Alles, was Sie tun müssen, ist HTML und JS-Dateien erstellen und haken Sie sie zusammen mit dem <script> Etikett. Du brauchst Grunt oder Yeoman nicht, um mit Angular Material herumzuspielen. Laden Sie einfach die notwendigen Dateien über Bower herunter, indem Sie tippen bower init im Terminal innerhalb des Ordners, in dem Sie Ihre Dateien speichern. Sobald Sie Angular Material heruntergeladen haben, gehen Sie einfach zu deren Git-Seite Kopieren und fügen Sie die JS-Dateiabhängigkeiten in Ihren HTML-Code ein, der ebenfalls über Bower heruntergeladen oder über ein CDN verknüpft werden sollte. Auf ihrer Git-Seite finden Sie alles, was Sie benötigen, um Angular Material zum Laufen zu bringen.


1
2018-01-09 14:06



Wenn Sie Angular 2 verwenden, gibt es eine gute Anleitung https://github.com/angular/material2 befindet sich https://github.com/angular/material2/blob/master/guides/getting-started.md

Auch Samples finden Sie unter https://github.com/jelbourn/material2-app und https://github.com/kara/leashed-in


0
2018-02-26 11:50