Hi !
I tried to use AngularJS Material in a widget.
For example I tried to reproduce the 'Basic Usage' input in a widget : https://material.angularjs.org/latest/demo/input
So I created a widget with the code below, according to this page : https://material.angularjs.org/1.1.22-rc.0/getting-started
I tried to add ngMaterial as dependency according to this article: https://community.servicenow.com/community?id=community_question&sys_id=a0e100b1dbda27407d3e02d5ca96...
but when I check 'Include on page load' I get a blank page.
Can you help me please ?
I have another question : is angular material (not JS) is working on servicenow or we should use only angularJS material?
Kinds regards,
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<div ng-controller="DemoCtrl" layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage" ng-app="MyApp">
<md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding="">
<div>
<md-input-container>
<label>Title</label>
<input ng-model="user.title">
</md-input-container>
<md-input-container>
<label>Email</label>
<input ng-model="user.email" type="email">
</md-input-container>
</div>
</md-content>
<md-content layout-padding="">
<div>
<form name="userForm">
<div layout-gt-xs="row">
<md-input-container class="md-block" flex-gt-xs="">
<label>Company (Disabled)</label>
<input ng-model="user.company" disabled="">
</md-input-container>
<md-input-container>
<label>Enter date</label>
<md-datepicker ng-model="user.submissionDate" aria-label="Enter date"></md-datepicker>
</md-input-container>
</div>
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm="">
<label>First name</label>
<input ng-model="user.firstName">
</md-input-container>
<md-input-container class="md-block" flex-gt-sm="">
<label>Long Last Name That Will Be Truncated And 3 Dots (Ellipsis) Will Appear At The End</label>
<input ng-model="theMax">
</md-input-container>
</div>
<md-input-container class="md-block">
<label>Address</label>
<input ng-model="user.address">
</md-input-container>
<md-input-container md-no-float="" class="md-block">
<input ng-model="user.address2" placeholder="Address 2" aria-label="Address 2">
</md-input-container>
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm="">
<label>City</label>
<input ng-model="user.city">
</md-input-container>
<md-input-container class="md-block" flex-gt-sm="">
<label>State</label>
<md-select ng-model="user.state">
<md-option ng-repeat="state in states" value="{{state.abbrev}}">
{{state.abbrev}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm="">
<label>Postal Code</label>
<input name="postalCode" ng-model="user.postalCode" placeholder="12345" required="" ng-pattern="/^[0-9]{5}$/" md-maxlength="5">
<div ng-messages="userForm.postalCode.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">You must supply a postal code.</div>
<div ng-message="pattern" class="my-message">That doesn't look like a valid postal
code.
</div>
<div ng-message="md-maxlength" class="my-message">
Don't use the long version silly...we don't need to be that specific...
</div>
</div>
</md-input-container>
</div>
<md-input-container class="md-block">
<label>Biography</label>
<textarea ng-model="user.biography" md-maxlength="150" rows="5" md-select-on-focus=""></textarea>
</md-input-container>
</form>
</div>
</md-content>
</div>
<!--
Copyright 2018 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be found
in the LICENSE file at http://material.angularjs.org/HEAD/license.
-->
<!--
Copyright 2018 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be found
in the LICENSE file at http://material.angularjs.org/HEAD/license.
-->
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial', 'ngMessages']);
angular
.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('DemoCtrl', function($scope) {
$scope.user = {
title: 'Developer',
email: 'ipsum@lorem.com',
firstName: '',
lastName: '',
company: 'Google',
address: '1600 Amphitheatre Pkwy',
city: 'Mountain View',
state: 'CA',
biography: 'Loves kittens, snowboarding, and can type at 130 WPM.\n\nAnd rumor has it she bouldered up Castle Craig!',
postalCode: '94043'
};
$scope.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' +
'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' +
'WY').split(' ').map(function(state) {
return {abbrev: state};
});
})
.config(function($mdThemingProvider) {
// Configure a dark theme with primary foreground yellow
$mdThemingProvider.theme('docs-dark', 'default')
.primaryPalette('yellow')
.dark();
});
/**
Copyright 2018 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be found
in the LICENSE file at http://material.angularjs.org/HEAD/license.
**/
/**
Copyright 2018 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be found
in the LICENSE file at http://material.angularjs.org/HEAD/license.
**/
</script>
</body>
</html>
<!--
Copyright 2016-2019 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://material.angularjs.org/latest/license.
-->
1 ACCEPTED SOLUTION
As you said AngularJS is not necessary so I delete it and replace angular-material 1.1.12 by the link you provided.
I have another problem, maybe you can help me, I attach screenshots :
<md-input-container class="md-block" flex-gt-sm="">
<label translate>Postal Code</label>
<input name="postalCode" ng-model="c.user.postalCode" placeholder="12345" required="" ng-pattern="/^[0-9]{5}$/" md-maxlength="5">
<pre>userForm.postalCode.$error = {{ userForm.postalCode.$error | json }}</pre>
<div ng-messages="userForm.postalCode.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">You must supply a postal code.</div>
<div ng-message="pattern" class="my-message">That doesn't look like a valid postal
code.
</div>
<div ng-message="md-maxlength" class="my-message">
Don't use the long version silly...we don't need to be that specific...
</div>
</div>
</md-input-container>
Kinds regards,
