I am planning to use AngularJS 1.x version with Angular Material design.
While I was searching for articles I came up with below two URL. First one is what I am using for Angular 1.x. If I am not wrong then the second one is for Angular 2.x and higher version. Hope someone can put more light on this.
https://material.angularjs.org
https://material.angular.io
Yes you are right! In order to setup your app with angularjs use the first one
DEMO
// Code goes here
angular.module('webapp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.todos = [];
for (var i = 0; i < 45; i++) {
$scope.todos.push({
face: 'https://avatars0.githubusercontent.com/u/598463?v=3&s=60',
what: "Brunch this weekend?",
who: "Markus Thiel",
notes: "I'll be in your neighborhood doing errands."
});
}
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl" layout="column">
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<div flex="50">
<h3 class="title"><span>My Title</span></h3>
</div>
<div flex="50" layout layout-align="end center">
<md-button class="md-fab" aria-label="Time">
<md-icon icon="/img/icons/ic_access_time_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>
</div>
</div>
</md-toolbar>
<md-content layout-fill>
<md-list>
<md-item ng-repeat="item in todos">
<md-item-content>
<div class="md-tile-left">
<img ng-src="{{item.face}}" alt="{{item.who}}" class="face">
</div>
<div class="md-tile-content">
<h3>{{item.what}}</h3>
<h4>{{item.who}}</h4>
<p>{{item.notes}}</p>
</div>
</md-item-content>
<md-divider inset></md-divider>
</md-item>
</md-list>
</md-content>
</body>
</html>
While the 2nd url is for angular and angular4 you can install the necessary modules with the command npm install and import the modules in your angular application.
# install Angular Material 2 components
npm install --save #angular2-material/{core,button,card}
Related
I have created the website using angularjs and i have used angular-material in our website but i have properly included the script file properly but i got error after inlcude the ['ngMaterial'] as a depedency in our module i dont understand what the wrong in my code.
var app = angular.module("gupaApp", ['ngMaterial']);
app.controller("gupaContr", function($scope) {
console.log('hii');
})
<html ng-app="gupaApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.css">
<script src="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.js"></script>
<script type="text/javascript" src="app/controller/gupaController.js"></script>
<body ng-controller="gupaContr">
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<div flex="50">
<h3 class="title"><span>My Title</span></h3>
</div>
<div flex="50" layout layout-align="end center">
<md-button class="md-fab" aria-label="Time">
<md-icon icon="/img/icons/ic_access_time_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>
</div>
</div>
</md-toolbar>
</body>
</html>
You need to add references to the angular-animate.js and angular-aria.js aswell
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script>
Make sure to match the version you're using
PLUNKER DEMO
I have struggling with following issue since 2 days. I need to implement modal popup, where I got the "Unknown provider: $uibModalProvider" error. So I upgraded the version of ui-bootstrap-tpls.min.js from 0.10.0 to 2.5.0. It fixed my modal popup issue, but it ruined my carousel completely. Please help me out.
I'm using
Angular Version - 1.5.3
ui bootstrap min. js version - 1.3.3
ui-bootstrap-tpls.min.js - 2.5.0
<script src="lib/angular/angular-ui-bootstrap/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.min.js"></script>
<script src="lib/angular/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular/angular-ui-router/angular-ui-router.js"></script>
<script src="lib/angular/angular-ocLazyLoad/ocLazyLoad.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<carousel interval="myInterval">
<slide active="guide.active">
<div class="fill" style="background-image:url('{{guide.image}}');"></div>
<div class="carousel-caption">
<h4>{{guide.type}}</h4>
<h5>{{guide.time_duration}}</h5>
</div>
<div class="carousel-caption-hover">
<h4>{{guide.type}}</h4>
<h5>{{guide.time_duration}}</h5>
<div class="btn-row">
<a ui-sref="root.guide({city_slug: '{{cityData.slug}}', guide_type_slug: '{{guide.slug}}'})" ui-sref-opts="{reload: true}">Book Now</a>
</div>
</div>
</slide>
</carousel>
app.controller('GuideCtrl', function ($scope, $rootScope, WebService) {
$scope.myInterval = 3000;
WebService.GuideType().then(function (response) {
if (response.success){
$scope.guides = response.data;
$rootScope.guidesList = $scope.guides;
}
});
});
I appreciate any help.
Thanks
This is the complete solution which worked for my issue.
I've removed
<script src="lib/angular/angular-ui-bootstrap/ui-bootstrap.min.js"></script>
And downgraded uib version from 2.5.0 to 1.2.1
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.min.js"></script>
Also changed html in this way
<uib-carousel interval="myInterval">
<uib-slide ng-repeat="g in guide" index="$index">
<div class="fill" style="background-image:url('{{guide.image}}');"></div>
<div class="carousel-caption">
<h4>{{guide.type}}</h4>
<h5>{{guide.time_duration}}</h5>
</div>
<div class="carousel-caption-hover">
<h4>{{guide.type}}</h4>
<h5>{{guide.time_duration}}</h5>
<div class="btn-row">
<a ui-sref="root.guide({city_slug: '{{cityData.slug}}', guide_type_slug: '{{guide.slug}}'})" ui-sref-opts="{reload: true}">Book Now</a>
</div>
</div>
</uib-slide>
</uib-carousel>
Added this to script
$scope.noWrapSlides = false;
You have two different versions of the same library
<script src="lib/angular/angular-ui-bootstrap/ui-bootstrap.min.js"></script>
and
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
Remove the first one
also, use the new prexied directive uib-carousel
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
I have created an MVC project and added AngularJS-Material and all required files. I put the AngularJS App on the _Layout.cshtml page as I want to be able to display a toolbar throughout the project.
For each view I was planning on using a different controller but when I reference the controller in a new script file I get an error that says the controller is undefined.
The code below works fine and the only problems I get are when I try to add another view in the #RenderBody() section of the code. On each individual chstml file I am defining a new controller but keeping the same app.
Here is my layout file:
<!DOCTYPE html>
<html ng-app="bPST" ng-controller="layoutCtrl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/angular-material.min.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/angular-aria.js"></script>
<script src="~/Scripts/angular-messages.js"></script>
<script src="~/Scripts/angular-material/angular-material.js"></script>
<script src="~/Ang_Scripts/bpst.js"></script>
</head>
<body>
<div layout="column" layout-fill>
<md-toolbar>
<div class="md-toolbar-tools">
<span>Title </span>
<!-- fill up the space between left and right area -->
<span flex></span>
<md-button ng-click="sideBarFunctions()">Menu</md-button>
</div>
</md-toolbar>
<md-sidenav ng-cloak class="md-sidenav-left md-whitefram-z2" md-component-id="left" md-is-open="sideBarOpen">
<div layout="column" layout-align="space-around stretch">
<md-toolbar>
<h2 style="text-align: center;">Menu</h2>
</md-toolbar>
<md-content layout-padding layout="column" layout-align="start">
</md-content>
</div>
</md-sidenav>
<md-content>
<div class="container body-content">
#RenderBody()
</div>
</md-content>
</div>
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
#Scripts.Render("~/bundles/jquery")
#*#Scripts.Render("~/bundles/bootstrap")*#
#RenderSection("scripts", required: false)
login.js:
var bApp = angular.module('bPST', ['ngMaterial']);
bApp.controller('loginCTRL',function($scope) {
$scope.message = "Login";
});
So the problem was more with the way that I was creating the application in the js file.
I was doing this.
var bPSTApp = angular.module('bPST', ['ngMaterial']);
Then creating the controller like this.
bPSTApp.controller('layoutCtrl', function ($scope) {
//Add coding here
};
when I changed it up to this, it started working.
angular.module('bPST').controller('layoutCtrl', function ($scope) {
//Add coding here
});
Now all I need to do is reference the App in each controller file instead of trying to reference the variable that I was setting in the main JS file.
Also, since I am using the login.js on the login cshtml file, it was only being referenced in that view.
I do get that AngularJS and AngularJS Material is good for Single Page Applications, but there are functions that I want to use that make my application look good and function the way I want.
Got to love newbie mistakes.
I'm trying to create an autocomplete feature but I can't display the results as I want, I think it's a z-index issue, but I couldn't solve it.
I can use md-autocomplete, it doesn't have this problem, but I want to learn what's causing this.
As soon as I start typing, my input goes up and results are displayed below in the navigation bar.
I changed $http to an array to mock the results.
Here's my code:
<html lang="en">
<head>
<style>
#testing > div > div > div > md-input-container {
margin:0;
}
</style>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<md-content>
<md-toolbar id="testing">
<div layout-wrap layout="row">
<div ng-controller="SearchCtrl" class="md-toolbar-tools">
<div flex="40" layout-align="center">
<md-input-container class="" flex="" layout="row">
<label class="search-color">Search</label>
<input ng-model="searchInput" class="text1" type="text">
</md-input-container>
<md-item-template flex="100" layout="column">
<div ng-repeat="a in details">
<div>{{a}}</div>
</div>
</md-item-template>
</div>
</div>
</div>
</md-toolbar>
</md-content>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
angular.module('BlankApp', ['ngMaterial']);
angular.module('BlankApp').controller('SearchCtrl', ["$scope", "$http",
function($scope, $http) {
//$scope.searchInput = "";
$scope.$watch('searchInput', function() {
if ($scope.searchInput) {
fetch();
}
});
function fetch() {
var arr = ["result1", "result2", "result3", "result4"];
$scope.details = arr;
}
}]);
</script>
</body>
</html>
Here's my plunk : http://plnkr.co/edit/LQ1HxV6vmPkUGYHnVfCg?p=preview
I am using the Angular Material checkbox in my application. I am facing problem in assigning the value to a checkbox.
<div ng-repeat="rules in rulesList1.data.hits.hits">
<md-checkbox md-no-ink aria-label="Checkbox No Ink" id="chkR1" ng-checked="_source.Enabled" class=" md-primary">
</md-checkbox>
</div>
When I use this my checkbox becomes non-editable. I couldn't check or uncheck the box on using the above code. I don't know where I am going wrong.
Thanks in advance.
My issue was resolved. The problem is when I retrieve the value it was in string format. Before assigning it to the view ng-model, convert the string into boolean.
After coverting to boolean my checkbox works fine.
Updated code
<div ng-repeat="rules in rulesList1.data.hits.hits">
<md-checkbox md-no-ink aria-label="Checkbox No Ink" id="chkR1" ng-model="_source.Enabled" class=" md-primary">
</md-checkbox>
</div>
Look this:
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<div ng-app="StarterApp" ng-repeat="rules in items">
Test {{rules}}:
<md-checkbox md-no-ink aria-label="Checkbox No Ink" id="chkR1" class=" md-primary" ng-checked="rules.ck" ng-click="rules.ck=!rules.ck" ng-disabled="{{!rules.editable}}" role="checkbox">
</md-checkbox>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
</body>
<script>
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', function($scope){
$scope.items = [{ck:true, editable:false}, {ck:true, editable:true}, {ck:false, editable:true}];
}]);
</script>
</html>