I am creating a navbar using angular js but it's not working properly. even css not working. unable to find that why it's not working.
I've to take a code for navbar from this link.
Hello, I am creating a navbar using angular js but it's not working properly. even css not working. unable to find that why it's not working.
I've to take a code for navbar from this link.
https://material.angularjs.org/1.1.5/demo/navBar
and this is my code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<style type="text/css">
.navBardemoBasicUsage md-content .ext-content {
padding: 50px;
margin: 20px;
background-color: #FFF2E0; }
</style>
</head>
<body>
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<md-nav-bar
md-no-ink-bar="disableInkBar"
md-selected-nav-item="currentNavItem"
nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">
Page One
</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">
Page Two
</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">
Page Three
</md-nav-item>
<!-- these require actual routing with ui-router or ng-route, so they
won't work in the demo
<md-nav-item md-nav-href="#page4" name="page5">Page Four</md-nav-item>
<md-nav-item md-nav-sref="app.page5" name="page4">Page Five</md-nav-item>
You can also add options for the <code>ui-sref-opts</code> attribute.
<md-nav-item md-nav-sref="page6" sref-opts="{reload:true, notify:true}">
Page Six
</md-nav-item>
-->
</md-nav-bar>
<div class="ext-content">
External content for `<span>{{currentNavItem}}</span>`.
</div>
<md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>
</md-content>
</div>
<script type="text/javascript">
(function() {
'use strict';
angular.module('navBarDemoBasicUsage', ['ngMaterial'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
$scope.goto = function(page) {
console.log("Goto " + page);
}
}
})();
</script>
</body>
</html>
You missed out assigning ng-app (in your case it will be ng-app="navBarDemoBasicUsage") and you also miss to import a few JS and CSS libraries.
Import Material CSS library:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.10/angular-material.min.css">
Import Angular JS libraries (I have used version 1.6.9, you can use 1.7.2):
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
Full code (modified from yours):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.10/angular-material.min.css">
<title></title>
<style type="text/css">
.navBardemoBasicUsage md-content .ext-content {
padding: 50px;
margin: 20px;
background-color: #FFF2E0;
}
</style>
</head>
<body ng-app="navBarDemoBasicUsage">
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<md-nav-bar md-no-ink-bar="disableInkBar" md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">
Page One
</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">
Page Two
</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">
Page Three
</md-nav-item>
<!-- these require actual routing with ui-router or ng-route, so they
won't work in the demo
<md-nav-item md-nav-href="#page4" name="page5">Page Four</md-nav-item>
<md-nav-item md-nav-sref="app.page5" name="page4">Page Five</md-nav-item>
You can also add options for the <code>ui-sref-opts</code> attribute.
<md-nav-item md-nav-sref="page6" sref-opts="{reload:true, notify:true}">
Page Six
</md-nav-item>
-->
</md-nav-bar>
<div class="ext-content">
External content for `<span>{{currentNavItem}}</span>`.
</div>
<md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>
</md-content>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.10/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('navBarDemoBasicUsage', ['ngMaterial'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
$scope.goto = function (page) {
console.log("Goto " + page);
}
}
</script>
</body>
</html>
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
My html and javascript are as follows, I have the following element
<i class="material-icons" ng-click="clicked()" md-48>add_circle</i>
Which works when clicked i.e. by bringing up a dialog, however the following on the same page does not work.
html
<body ng-cloak>
<div ng-cloak ng-controller="mainController" >
<div layout="row" layout-align="end end">
<md-button aria-label="Eat cake" ng-click="clicked()"></md-button>
</div>
</div>
</body>
angular
angular.module('notifyMe', ['ngMaterial', 'material.svgAssetsCache'])
.controller('mainController', function($scope, $mdDialog) {
$scope.clicked = function () {
alert('Worked!');
};
})
No, your code should work. Make sure you loaded the dependencies as below:
DEMO
// Code goes here
angular.module('webapp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.clicked = function () {
alert('Worked!');
};
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<!-- Angular Material Dependencies -->
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js"></script>
<!-- Use dev version of Angular Material -->
<script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<div layout="column" layout-fill flex style="max-height:100%">
<md-toolbar>
<md-button ng-click=clicked()>Click here</md-button>
</md-toolbar>
</div>
</body>
</html>
i am trying demo on my local machine angular material nav bar
but my browser shows blank page. i also checked console but no errors also checked all files are loaded correctly .so what is missing here ???
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="angular-material/angular-material.css">
<style type="text/css">.navBardemoBasicUsage md-content .ext-content {
padding: 50px;
margin: 20px;
background-color: #FFF2E0; }</style>
</head>
<body>
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
<!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
<md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
<md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>
-->
</md-nav-bar>
<div class="ext-content">
External content for `<span>{{currentNavItem}}</span>`
</div>
</md-content>
</div>
<script src="angular/angular.js"></script>
<script src="angular-material/angular-material.js"></script>
<script src="angular-aria/angular-aria.js"></script>
<script src="angular-animate/angular-animate.js"></script>
<script>
(function() {
'use strict';
angular.module('navBarDemoBasicUsage', ['ngMaterial'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
}
})();
</script>
</body>
</html>
You have nowhere declared the module in the view,
<body ng-app="navBarDemoBasicUsage">
i am trying to make the tutorial "https://github.com/angular/material-start/tree/master" but i have a problem with the md-list and md-list-item directive. i posted my code in the bottom. The problem i have is, that the space between the md-list-items are to as big as the site is height. has anyone a idea why that happens or what i am doing wrong here?
Thanks
Pat
screenshot
<html lang="en">
<head>
<!-- Angular Material style sheet -->
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="BlankApp" layout="column" ng-cloak>
<!--
Your HTML content here
-->
<!-- Wireframe Container #1 -->
<div flex layout="row">
<!-- Container #3 -->
<md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
<md-list>
<!-- List item #1 -->
<md-list-item>
<md-button>
<md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
Lia Luogo
</md-button>
</md-list-item>
<!-- List item #2 -->
<md-list-item>
<md-button>
<md-icon md-svg-src="./assets/svg/avatar-4.svg" class="avatar"></md-icon>
Lawrence Ray
</md-button>
</md-list-item>
</md-list>
</md-sidenav>
<!-- Container #4 -->
<md-content flex id="content">
<!-- User details sample -->
<md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
<h2>Lia Luogo</h2>
<p>
I love cheese...
</p>
</md-content>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
var app = angular.module('BlankApp', ['ngMaterial']);
app.controller('MyController', function ($scope, $mdSidenav) {
$scope.openLeftMenu = function () {
$mdSidenav('left').toggle();
};
});
</script>
</body>
</html>
I updated the files that are loaded to match those of the Angular Material demos and the problem no longer exists.
If anyone is wondering how to replicate the problem, copy-paste the markup in the question into a file (test.html) and open the file in Chrome. The markup below will display correctly.
<html lang="en">
<head>
<!-- Angular Material style sheet -->
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.css">
</head>
<body ng-app="BlankApp" layout="column" ng-cloak>
<!--
Your HTML content here
-->
<!-- Wireframe Container #1 -->
<div flex layout="row">
<!-- Container #3 -->
<md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
<md-list>
<!-- List item #1 -->
<md-list-item>
<md-button>
<md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
Lia Luogo
</md-button>
</md-list-item>
<!-- List item #2 -->
<md-list-item>
<md-button>
<md-icon md-svg-src="./assets/svg/avatar-4.svg" class="avatar"></md-icon>
Lawrence Ray
</md-button>
</md-list-item>
</md-list>
</md-sidenav>
<!-- Container #4 -->
<md-content flex id="content">
<!-- User details sample -->
<md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
<h2>Lia Luogo</h2>
<p>
I love cheese...
</p>
</md-content>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
var app = angular.module('BlankApp', ['ngMaterial']);
app.controller('MyController', function ($scope, $mdSidenav) {
$scope.openLeftMenu = function () {
$mdSidenav('left').toggle();
};
});
</script>
</body>
</html>
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