Skip to content

Instantly share code, notes, and snippets.

@EdricChan03

EdricChan03/template-for-angularjs-material.html

Last active June 11, 2017 14:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save EdricChan03/9c1623b586176e2c43f7b7aa3159d40a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save EdricChan03/9c1623b586176e2c43f7b7aa3159d40a to your computer and use it in GitHub Desktop.
Download ZIP
Template for AngularJS Material 🎉
Raw
template-for-angularjs-material.html
<html>
<head>
<title>Template for Angular Material</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.min.js"></script>
<!--NOTE: Since Google hasn't served versions past v1.1.1, I will use https://cdnjs.com-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css" rel="stylesheet" />
<script src="template-for-angularjs-material.js"></script>
</head>
<body ng-app="App">
<md-content ng-controller="AppCtrl">
<md-button ng-click="doSomething()">{{btnTitle}}</md-button>
</md-content>
</body>
</html>
Raw
template-for-angularjs-material.js
/**
* Initializes the app
* @see angular.module
* @version 1.0.1
*/
var app = angular.module('App',['ngAnimate','ngAria','ngMaterial','ngMessages']);
/**
* Sets the configuration of the {@link angular.module#config}
* @see angular.module#config
* @version 1.0.1
*/
app.config(function($mdIconProvider, $sceDelegateProvider) {
/**
* Whitelists the following URLS
* @see $sceDelegateProvider#resourceUrlWhitelist
* @version 1.0.1
*/
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://chan4077.github.io/res/mdi.svg'
]);
/**
* Sets the default icon set.
* @see $mdIconProvider#defaultIconSet
*/
$mdIconProvider.defaultIconSet('https://chan4077.github.io/res/mdi.svg');
})
/**
* Sets the controller
* @see angular.module#controller
* @version 1.0.2
*/
app.controller('AppCtrl', function($scope) {
/**
* Sets the button title
* @see $scope
* @version 1.0.2
*/
$scope.btnTitle = "I'm a button";
/**
* Sets the do something function
* @see $scope
* @see function
* @return null
* @version 1.0.2
*/
$scope.doSomething = function() {
alert("You clicked!")
}
})
Raw
template-for-angularjs-material.md

What's this?

This is basically a template for angularjs material (and angularjs) which is available on Codepen by me. The purpose of this is to simplify making a new pen with angularjs material so that I don't have to waste time getting the URL for dependencies.

Check out the license.

/**
* This is a JSDoc
* @param {test:string} The test string
* @param {wow:boolean} The wow boolean
* @example <caption>Lorem ipsum</caption>
* Place somewhere
* @see sample.test#wow
* @link https://example.com
*/

Recent changes

  1. [?] Started this file
  2. [21/05/17]
    • Changed angular to angularjs
    • Added JSDoc
    • Changed file names
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment