<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular + MaterializeCSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="mainApp">
<header>
<nav class="teal darker-1" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="#!/" class="brand-logo right"><i class="material-icons">fingerprint</i></a>
<ul id="main-menu" class="left hide-on-med-and-down">
<li><a href="#!/" class="waves-effect waves-teal"><i class="material-icons left">home</i>Home</a></li>
<li><a href="#!/items" class="waves-effect waves-teal"><i class="material-icons left">list</i>Items</a></li>
<li><a href="#!/profile" class="waves-effect waves-teal"><i class="material-icons left">person</i>Profile</a></li>
<li><a href="#!/settings" class="waves-effect waves-teal"><i class="material-icons left">settings</i>Settings</a></li>
</ul>
<ul id="main-menu-mobile" class="side-nav">
<!-- look at script.js -->
</ul>
<a href="javascript:void(0)" data-activates="main-menu-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
<div class="progress teal lighten-4" ng-show="ajaxLoadingFlag">
<div class="indeterminate"></div>
</div>
</header>
<main class="container">
<div ng-view></div>
</main>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
$('#main-menu li').each(function(){
$('#main-menu-mobile').append($(this).clone(true));
});
$('nav .button-collapse').sideNav({
closeOnClick: true
});
header .progress{
position: fixed;
bottom: 0;
margin: 0;
z-index: 99;
}
An example of Materialize CSS working with AngularJS.
For now it only has paragraphs, table and form. Datepicker, autocomplete and more such awsome features to be implemented soon.
TODO: comment more code, add the missing features (item details and profile page)
var mainApp = angular.module('mainApp', ['ngRoute']);
/**
* Route configuration
*/
mainApp.config(function($routeProvider, $locationProvider, $httpProvider, $provide) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.when('/items', {
templateUrl: 'items.html',
controller: 'ItemsController'
})
.when('/items/:itemId', {
template: '<div class="item_details">item-details</div>',
controller: 'ItemDetailsController'
})
.when('/profile', {
template: '<div class="profile">profile</div>',
controller: 'ProfileController'
})
.when('/settings', {
templateUrl: 'settings.html',
controller: 'SettingsController'
});
$httpProvider.interceptors.push('ajaxLoading');
});
/**
* Capture any AJAX loading
*/
mainApp.factory('ajaxLoading', function($q, $rootScope){
return {
request: function(config){
$rootScope.ajaxLoadingFlag = true;
return config;
},
response: function(response){
$rootScope.ajaxLoadingFlag = false;
return response;
},
requestError: function(config){
$rootScope.ajaxLoadingFlag = false;
return $q.reject(config);
},
responseError: function(response){
Materialize.toast(response.config.method + ' request to ' + response.config.url + ' was refused with status ' + response.status, 5000);
$rootScope.ajaxLoadingFlag = false;
return $q.reject(response);
}
};
});
mainApp.controller('HomeController', function($scope) {
//alert('HomeController');
});
mainApp.controller('ItemsController', function($scope, $http) {
$scope.items = [];
$http.get('items.json?_=' + new Date().getTime()).then(function(response){
$scope.items = response.data;
});
});
mainApp.controller('ItemDetailsController', function($scope) {
//alert('ItemDetailsController');
});
mainApp.controller('ProfileController', function($scope) {
//alert('ProfileController');
});
mainApp.controller('SettingsController', function($scope, $http, $timeout) {
$scope.autoSave = true;
$scope.settings = {};
$scope.toast = null;
$scope.loadSettings = function(response){
$scope.settings = response.data;
if($scope.toast){
Materialize.toast($scope.toast, 1000);
$scope.toast = null;
}
$timeout(Materialize.updateTextFields);
}
$scope.saveForm = function(auto){
if(!auto || auto && $scope.autoSave){
$scope.toast = 'Settings have been saved';
$http.post('settings.json', $scope.settings).then($scope.loadSettings);
}
}
$http.get('settings.json?_=' + new Date().getTime()).then($scope.loadSettings);
});
<div class="col s12">
<h1>Settings</h1>
</div>
<form>
<div class="col s12">
<div class="input-field">
<input type="text" id="name" class="validate" required="" ng-model="settings.name" ng-model-options="{updateOn: 'blur'}" ng-change="saveForm(true)">
<label for="name" data-error="wrong">Project Name</label>
</div>
<div class="input-field">
<input type="url" id="url" class="validate" ng-model="settings.url" ng-model-options="{updateOn: 'blur'}" ng-change="saveForm(true)">
<label for="url" data-error="wrong">Project URL</label>
</div>
<div class="input-field">
<input type="number" id="number_items" class="validate" required="" ng-model="settings.number_items" ng-model-options="{updateOn: 'blur'}" ng-change="saveForm(true)">
<label for="number_items">Number of Items per Page</label>
</div>
<div class="input-field">
<input type="email" id="email" class="validate" required="" ng-model="settings.email" ng-model-options="{updateOn: 'blur'}" ng-change="saveForm(true)">
<label for="email" data-error="wrong">Contact Email</label>
</div>
<div class="input-field">
<input type="tel" id="phone" class="validate" ng-model="settings.phone" ng-model-options="{updateOn: 'blur'}" ng-change="saveForm(true)">
<label for="phone">Contact Phone</label>
</div>
<div class="input-field">
<textarea id="description" class="materialize-textarea" ng-model="settings.description" ng-model-options="{updateOn: 'blur'}" ng-change="saveForm(true)"></textarea>
<label for="description">Short Project Description</label>
</div>
<div>
<input type="checkbox" id="beta" class="filled-in" ng-model="settings.beta" ng-click="saveForm(true)">
<label for="beta">Project is in BETA</label>
</div>
</div>
<div class="col m6">
<div class="input-field">
<button type="submit" class="btn btn-large waves-effect waves-light" ng-disabled="ajaxLoadingFlag" ng-click="saveForm()">
<i class="material-icons right">save</i> Save Settings
</button>
</div>
</div>
<div class="col m6">
<div class="input-field">
<input type="checkbox" id="autosave" class="filled-in" ng-model="autoSave">
<label for="autosave">Auto Save Form</label>
</div>
</div>
</form>
{
"name": "A Work in Progress",
"url": "http://localhost",
"number_items": 25,
"email": "office@localhost",
"phone": "Just a test",
"beta": true,
"description": "This is just a proof of concept;\nWill try to add as much examples as I can, but I'm already bored"
}
<div class="row">
<div class="col s12">
<h1>Welcome</h1>
</div>
<p class="col s12 flow-text">Bacon ipsum dolor amet magna venison meatloaf, tempor salami short loin tail boudin in filet mignon cillum minim et cow. Hamburger kevin eu labore ipsum occaecat tongue swine laborum landjaeger tail biltong flank pork loin ball tip. In pork loin non
proident sunt picanha. Jerky est beef turducken in pork shankle consectetur sed lorem officia leberkas. Bresaola flank in deserunt laborum. Cillum strip steak irure, nostrud qui ribeye consectetur tongue esse labore tail dolor. Kielbasa pariatur
brisket spare ribs, voluptate quis fugiat porchetta.</p>
<p class="col s12 flow-text">Venison frankfurter cillum ut sint meatloaf laboris pariatur nisi aute in est doner. In kielbasa ut shankle jowl, bacon anim enim dolore adipisicing turducken. Hamburger venison tri-tip jerky sunt pork belly aliqua aute ea fugiat nostrud drumstick.
Kevin biltong cow dolore, strip steak labore t-bone chicken veniam pariatur jerky venison sunt capicola. Aute salami short loin biltong boudin t-bone tenderloin do anim hamburger ham hock jerky quis ground round. Enim exercitation ad, est leberkas
ipsum id deserunt cillum chicken bresaola in.</p>
<p class="col s12 flow-text">Sunt ground round in swine shank jerky. Kielbasa pork loin pork picanha. Ullamco pancetta porchetta pig in, non adipisicing short loin ham hock. Reprehenderit bacon in exercitation turkey tail fugiat. Leberkas deserunt tongue alcatra chuck qui jowl.</p>
<p class="col s12 flow-text">Tenderloin boudin in, beef venison eu incididunt ex kielbasa ground round. Esse landjaeger kielbasa, sausage pariatur consectetur pancetta. Shankle short ribs biltong nostrud, ut enim tempor chicken ham hock shoulder corned beef commodo veniam porchetta
hamburger. Sint ham hock biltong jowl venison esse sed veniam. Occaecat brisket andouille consequat laborum jerky, ground round salami short ribs hamburger pork chop pork. Tempor shank corned beef ut pork loin strip steak picanha voluptate ham
esse excepteur.</p>
<p class="col s12 flow-text">Qui veniam do fugiat anim, eu pig corned beef ipsum pork chop hamburger porchetta ground round dolor. Venison dolore aliqua, picanha voluptate consequat ut beef ribs beef turducken ipsum excepteur rump ball tip qui. Est meatloaf prosciutto, picanha
meatball irure turducken shankle lorem sirloin aliquip jowl cupidatat nisi. Kielbasa boudin cupidatat frankfurter excepteur incididunt leberkas dolor. Beef fatback pastrami, in nostrud tempor capicola anim sirloin aliquip sunt cow.</p>
</div>
[{
"id": 1,
"name": "Bitchip",
"last_version": "3.2",
"active": true,
"tag": "Pre-emptive demand-driven internet solution",
"publisher": "Voonder",
"created_at": "2015-10-19T09:08:05Z",
"updated_at": "2016-04-22T13:54:05Z"
}, {
"id": 2,
"name": "Ronstring",
"last_version": "6.7",
"active": false,
"tag": "Synergized optimal website",
"publisher": "Abata",
"created_at": "2015-11-18T12:34:40Z",
"updated_at": "2016-03-31T09:11:43Z"
}, {
"id": 3,
"name": "Redhold",
"last_version": "0.39",
"active": true,
"tag": "Focused explicit encryption",
"publisher": "Topiczoom",
"created_at": "2016-03-23T23:50:05Z",
"updated_at": "2016-03-22T01:25:06Z"
}, {
"id": 4,
"name": "Toughjoyfax",
"last_version": "8.91",
"active": false,
"tag": "Diverse intangible architecture",
"publisher": "Browsecat",
"created_at": "2015-11-16T15:56:16Z",
"updated_at": "2016-09-10T10:58:42Z"
}, {
"id": 5,
"name": "Zamit",
"last_version": "8.33",
"active": true,
"tag": "Multi-layered bifurcated array",
"publisher": "Voolith",
"created_at": "2016-01-08T22:24:36Z",
"updated_at": "2016-03-08T04:37:01Z"
}, {
"id": 6,
"name": "Span",
"last_version": "7.66",
"active": false,
"tag": "Total 4th generation migration",
"publisher": "Meevee",
"created_at": "2016-07-25T00:56:48Z",
"updated_at": "2016-04-20T06:07:17Z"
}, {
"id": 7,
"name": "Konklab",
"last_version": "0.5.9",
"active": true,
"tag": "Enterprise-wide responsive challenge",
"publisher": "Gabspot",
"created_at": "2015-12-15T16:52:46Z",
"updated_at": "2015-12-14T04:23:28Z"
}, {
"id": 8,
"name": "Rank",
"last_version": "4.13",
"active": true,
"tag": "Fundamental even-keeled implementation",
"publisher": "Einti",
"created_at": "2016-07-13T00:44:32Z",
"updated_at": "2016-08-08T06:21:09Z"
}, {
"id": 9,
"name": "Tin",
"last_version": "2.1.8",
"active": false,
"tag": "Business-focused disintermediate knowledge user",
"publisher": "Twitterbridge",
"created_at": "2015-11-06T12:44:54Z",
"updated_at": "2016-02-25T11:04:57Z"
}, {
"id": 10,
"name": "Span",
"last_version": "0.2.7",
"active": false,
"tag": "Adaptive foreground toolset",
"publisher": "Eidel",
"created_at": "2016-03-23T14:05:56Z",
"updated_at": "2016-03-29T09:11:13Z"
}, {
"id": 11,
"name": "Sonsing",
"last_version": "0.5.2",
"active": false,
"tag": "Decentralized explicit standardization",
"publisher": "Zoombeat",
"created_at": "2016-03-26T21:25:40Z",
"updated_at": "2016-02-09T08:37:59Z"
}, {
"id": 12,
"name": "Bytecard",
"last_version": "3.67",
"active": true,
"tag": "Function-based coherent utilisation",
"publisher": "Centidel",
"created_at": "2016-04-29T06:10:09Z",
"updated_at": "2016-07-30T12:10:18Z"
}, {
"id": 13,
"name": "Stim",
"last_version": "7.65",
"active": false,
"tag": "Managed real-time framework",
"publisher": "Devify",
"created_at": "2016-04-25T15:26:01Z",
"updated_at": "2016-02-15T12:45:16Z"
}, {
"id": 14,
"name": "Solarbreeze",
"last_version": "0.3.6",
"active": false,
"tag": "Operative static superstructure",
"publisher": "Dabtype",
"created_at": "2016-02-11T04:29:20Z",
"updated_at": "2015-12-17T11:58:57Z"
}, {
"id": 15,
"name": "Regrant",
"last_version": "0.4.9",
"active": true,
"tag": "Multi-layered interactive archive",
"publisher": "Dabfeed",
"created_at": "2016-03-23T05:33:39Z",
"updated_at": "2016-05-15T19:20:08Z"
}, {
"id": 16,
"name": "Cardguard",
"last_version": "0.4.8",
"active": false,
"tag": "Assimilated optimal internet solution",
"publisher": "Katz",
"created_at": "2015-12-17T18:33:35Z",
"updated_at": "2016-09-08T08:19:23Z"
}, {
"id": 17,
"name": "Span",
"last_version": "3.3",
"active": true,
"tag": "Compatible even-keeled flexibility",
"publisher": "Devshare",
"created_at": "2016-08-30T06:26:20Z",
"updated_at": "2015-11-14T03:54:01Z"
}, {
"id": 18,
"name": "Lotlux",
"last_version": "9.7.1",
"active": true,
"tag": "Multi-lateral zero defect contingency",
"publisher": "Eimbee",
"created_at": "2016-04-22T13:28:05Z",
"updated_at": "2016-04-09T23:53:54Z"
}, {
"id": 19,
"name": "Sonair",
"last_version": "0.8.2",
"active": true,
"tag": "Robust grid-enabled task-force",
"publisher": "Gabcube",
"created_at": "2016-08-25T02:21:51Z",
"updated_at": "2016-06-29T14:54:58Z"
}, {
"id": 20,
"name": "Greenlam",
"last_version": "0.96",
"active": false,
"tag": "Adaptive actuating website",
"publisher": "Jatri",
"created_at": "2016-01-17T14:27:16Z",
"updated_at": "2016-04-21T02:27:44Z"
}]
<div class="col s12">
<h1>Items</h1>
</div>
<table class="highlight">
<thead>
<tr>
<th>ID</th>
<th>Publisher</th>
<th>Name</th>
<th>Version</th>
<th>Tag</th>
<th>Active</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{ item.id }}</td>
<td>{{ item.publisher }}</td>
<td>{{ item.name }}</td>
<td>{{ item.last_version }}</td>
<td>{{ item.tag }}</td>
<td><i class="material-icons">{{ item.active ? 'done' : 'clear' }}</i></td>
<td><a href="#!/items/{{ item.id }}" class="badge waves-effect waves-light"><i class="material-icons">arrow_forward</i></a></td>
</tr>
</tbody>
</table>