Create a starter project for material angular

Asked 17/12, 2014 at 12:29 Answered 26/2, 2017 at 11:50

Is there as starter project for material angular just like ionic starter project? I have tried using angular-seed and wire it with material angular but with no luck can anyone help ? What i basically need is to get HTML just like the ionic starter project HTML but with material style

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

Alkene answered 17/12, 2014 at 12:29 Comment(2)

Set up app using yeoman. – Anthelion 17/12, 2014 at 12:31

I used the standard yeoman angular generator and then replaced bootstrap with the angular-material dependencies. After this I merged the code of the index.html and the template.html from the angular-material docs. – Jointed 17/12, 2014 at 12:34

You can try this one.

AngularJS Material-Start

This Material start* project is a seed for AngularJS Materal applications. The project contains a sample AngularJS application and is preconfigured to install the Angular framework and a bunch of development and testing tools for instant web development gratification.

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

Petrography answered 21/2, 2015 at 19:30 Comment(0)

Another interesting example that I used many times as guide and inspiration, demonstrating a bit more complex layouts than the material-start.

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

Passage answered 28/4, 2015 at 13:6 Comment(1)

Thanks for sharing. That one is forked from an even simpler starter app that I thought was worth sharing: codepen.io/marcysutton/pen/OPbpKm – Aftermost 20/9, 2017 at 20:14

Here is my solution:

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

And my 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>

Then I have copied my used themes css "blue-grey-theme.css" into the apps styles folder. Thats all

Jointed answered 17/12, 2014 at 12:39 Comment(5)

I was unable to find the missing js files .. i have created a file app.js main.js and about.js .. i have also configured the routes but the thing is i get a blank screen the doesn't look like the website though i have copied the blue-grey-theme.css and also when i re size the browser the sliding menu doesn't hide is there anything else that i have missed ? – Alkene 17/12, 2014 at 14:30

Without any code or live example which I could debug, It's hard to say. What you see above works for me when I use the angular yeoman generator. – Jointed 17/12, 2014 at 15:35

I get this error when using the yoemen pre-build test failed, compiling from source... × { [Error: Command failed: '.' is not recognized as an internal or external com mand, – Alkene 17/12, 2014 at 15:48

what is above is missing some files .. can you kindly provide them all ? – Alkene 17/12, 2014 at 15:49

Sorry I don't have the time to provide you full working example. For the generator. Make sure npm, grunt-cli and bower on newest version. After the generator has finished try bower install to make sure bower has downloaded all components. Then make the changes to material design. – Jointed 17/12, 2014 at 15:51

All you have to do is create HTML and JS files and hook them together using the <script> tag. You don't need Grunt or Yeoman to play around with Angular Material. Just download the necessary files through Bower by typing bower init in the terminal inside the folder where you save your files. Once you have downloaded Angular Material, just go to their Git page and copy and paste the JS file dependencies into your HTML, which should also be downloaded through Bower or linked through a CDN. Their Git page outlines everything you need to get Angular Material up and running.

Basement answered 9/1, 2015 at 14:6 Comment(0)

If you are using Angular 2 then there is a good guide at https://github.com/angular/material2 located at https://github.com/angular/material2/blob/master/guides/getting-started.md

Also too samples can be found at https://github.com/jelbourn/material2-app and https://github.com/kara/leashed-in

Theta answered 26/2, 2017 at 11:50 Comment(0)

Recommended topics

Hot tags