Question

是否像离子启动项目那样作为材料角度的启动项目？我尝试过使用角度种子并用有角度的材料将它连接起来但没有运气可以帮助人吗？我基本上需要的是获取HTML就像离子启动项目HTML但具有材料样式

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

Answer 1

你可以试试这个。

AngularJS Material-Start

此Material start *项目是AngularJS Materal应用程序的种子。该项目包含一个示例AngularJS应用程序，并预先配置为安装Angular框架和一系列用于即时Web开发满足的开发和测试工具。

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

Answer 2

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

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

Answer 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-gray-theme.css”复制到apps styles文件夹中。多数民众赞成

Answer 4

您所要做的就是创建HTML和JS文件，并使用<script>标记将它们连接在一起。你不需要Grunt或Yeoman来玩Angular Material。只需在保存文件的文件夹内的终端中键入bower init，即可通过Bower下载必要的文件。下载Angular Material后，只需转到Git page并将JS文件依赖项复制并粘贴到HTML中，也可以通过Bower下载或通过CDN链接。他们的Git页面概述了使Angular Material启动并运行所需的一切。

Answer 5

如果您使用的是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

找到样本

为材质角创建一个启动项目

5 个答案: