6

是否有像离子启动项目一样的材料角度启动项目？我尝试过使用角种子并将其与材料角连接，但没有任何人可以提供帮助吗？我基本上需要的是像离子启动项目 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

另一个有趣的例子，我多次用作指导和灵感，展示了比材料开始更复杂的布局。

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

于 2015-04-28T13:06:45.543 回答
3

这是我的解决方案：

鲍尔.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>标签将它们连接在一起。你不需要 Grunt 或 Yeoman 来玩 Angular Material。bower init只需在保存文件的文件夹中输入终端，即可通过 Bower 下载必要的文件。下载 Angular Material 后，只需转到他们的Git 页面并将 JS 文件依赖项复制并粘贴到您的 HTML 中，该 HTML 文件也应通过 Bower 下载或通过 CDN 链接。他们的 Git 页面概述了启动和运行 Angular Material 所需的一切。

于 2015-01-09T14:06:24.497 回答
0

如果您使用的是 Angular 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找到样本

于 2017-02-26T11:50:49.090 回答