All geek questions in one place

Create a starter project for angular material

Is there a starter project for angular material, like an ion starter project? I tried using angular -seed and laid it with angular material, but no luck, can anyone help? What I basically need is to get the HTML in the same way as an HTML project with an ion starter, but with a material style

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

+5
source share
5 answers

You can try this.

Faster Material Launch

This "Starter Material" project is the seed for AngularJS Materal applications. The project contains an example AngularJS application and is preconfigured to set up an Angular framework and many development and testing tools to instantly satisfy web development.

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

+10
source

Another interesting example that I used many times as a guide and inspiration, demonstrating somewhat more complex layouts than the beginning of the material.

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

+5
source

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 copied the used css themes "blue-gray-theme.css" into the application styles folder. Thats all

+3
source

All you have to do is create the HTML and JS files and link them together using the <script> . You don't need Grunt or Yeoman to play with Angular stuff. 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 stuff, just go to the Git page and copy and paste the JS file dependencies into your HTML code, which should also be able to be downloaded via Bower or linked via CDN. The Git page presents everything you need to get Angular "Material" and run it.

+1
source

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

Also, samples can be found at https://github.com/jelbourn/material2-app and <a3>

0
source

Source: https://habr.com/ru/post/1209349/

More articles:


All Articles