6

イオンスタータープロジェクトと同じように、マテリアルアンギュラーのスタータープロジェクトはありますか? angular-seed を使用して、angular マテリアルで配線してみましたが、運が悪いので誰か助けてもらえますか? 基本的に必要なのは、イオンスタータープロジェクトの HTML と同じように HTML を取得することですが、マテリアルスタイルを使用することです

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

4

5 に答える 5

11

これを試すことができます。

AngularJS Material-Start

この Material start* プロジェクトは、AngularJS Material アプリケーションのシードです。このプロジェクトには、サンプルの AngularJS アプリケーションが含まれており、Angular フレームワークと一連の開発およびテスト ツールをインストールして、すぐに Web 開発を満足させるように事前構成されています。

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

于 2015-02-21T19:30:54.930 に答える
5

ガイドとインスピレーションとして何度も使用したもう 1 つの興味深い例は、マテリアル スタートよりも少し複雑なレイアウトを示しています。

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

于 2015-04-28T13:06:45.543 に答える
3

これが私の解決策です：

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-grey-theme.css」をアプリのスタイル フォルダーにコピーしました。それで全部です

于 2014-12-17T12:39:23.183 に答える
1

HTML ファイルと JS ファイルを作成し、<script>タグを使用してそれらをフックするだけです。Angular Material をいじるのに Grunt や Yeoman は必要ありません。bower initファイルを保存するフォルダー内のターミナルに入力して、Bower から必要なファイルをダウンロードするだけです。Angular Material をダウンロードしたら、Git ページに移動し、JS ファイルの依存関係をコピーして HTML に貼り付けます。これも Bower からダウンロードするか、CDN からリンクする必要があります。彼らの Git ページでは、Angular Material を起動して実行するために必要なすべての概要が説明されています。

于 2015-01-09T14:06:24.497 に答える