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">
Related
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>
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'm trying to use HTML to style the title in a popover window in angular bootrap, but it's appearing as plain text
Since the the popover body can contain HTML styling, I thought this would work
<!doctype html>
<html ng-app="popover.title.html">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
angular.module('popover.title.html', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('popover.title.html').controller('htmlTitleCtrl', function ($scope, $sce) {
$scope.htmlPopover = $sce.trustAsHtml('<b style="color: red">I can</b> have <div class="label label-success">HTML</div> content');
});
</script>
<div ng-controller="htmlTitleCtrl">
<div style="padding-top: 15em; padding-left: 7em;">
<button uib-popover-html="htmlPopover" popover-title="This is in <span style='color:red;'>red</span>" class="btn btn-default">HTML Popover</button>
</div>
</div>
</body>
</html>
Running plunkr: https://plnkr.co/edit/A1qwqnxOZwLCs05ePS38?p=preview
Is it possible to have the colours display correctly in the title?
The title of the popover used ng-bind which sets the title element's textContent (https://github.com/angular-ui/bootstrap/blob/master/template/popover/popover-html.html#L4, https://github.com/angular/angular.js/blob/master/src/ng/directive/ngBind.js#L63). This means HTML code within the title won't be rendered as HTML.
You can, however, use CSS to style the title of the popover.
My code.
<md-datepicker ng-model="csv.date" md-placeholder="Search Date"></md-datepicker>
The icon will not appear, but something is there when I inspect the dom. Thoughts?
Check the following code and take what all you need. Thank you.
<html lang="en" >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/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/angular_material/1.0.0/angular-material.min.js"></script>
<style>
.datepickerdemo md-content {
padding-bottom: 200px;
}
.datepickerdemo {
font-size: 11px;
color: darkred;
margin: 10px 0 0 25px;
}
</style>
<script>
angular
.module('firstApplication', ['ngMaterial'])
</script>
</head>
<body ng-app="firstApplication">
<h4>Choose the date</h4>
<div class="datepickerdemo" layout="column" ng-cloak>
<md-content>
<md-datepicker ng-model="csv.date" md-placeholder="Select Date"></md-datepicker>
</md-content>
</div>
</body>
</html>
I'm learning Angular so I can get into web app development. I'm doing a test project but can't get ng-view to work. My HTML is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>TEST PROJECT</title>
<link rel="stylesheet" type="text/css" href="test_project.css">
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/angular-animate.min.js"></script>
<script src="lib/Chart.js"></script>
</head>
<body ng-app='TestProject'>
<center>
<div class="interface" ng-controller="SelectionController">
<div style="height: 10%">
<img style="margin:5px; float:left; height: 10vh" src="pictures/logo.gif">
<center><h1>{{ title }}</h1></center>
</div>
<div style="height: 85%" ng-view></div>
<div style="height:5%">
<p>Having trouble? Request Support
<p style="bottom: 50px; position:fixed; size:8px">Footer Text
</div>
</div>
</center>
<script src="angular/app.js"></script>
<script src="angular/controllers.js"></script>
</body>
</html>
I also have app.js:
var app = angular.module('TestProject',['ngRoute', 'ngAnimate']);
app.config(function ($routeProvider){
$routeProvider
.when('/', {
controller: 'SelectionController',
templateUrl: '/views/home.html'
})
.when('/home/', {
controller: 'SelectionController',
templateUrl: '/views/home.html'
})
.otherwise({
redirectTo: '/home/'
});
});
As well as controllers.js, which currently only has:
app.controller('SelectionController', ['$scope',function($scope) {
$scope.title = 'Title!';
}]);
And then I have a home.html,
<div>
<h2>Welcome to this page! Please select an option below.</h2>
<table>
<td><div><img class="Symbol" src="../pictures/pica.jpg"></div></td>
<td><div><img class="Symbol" src="../pictures/picb.jpg"></div></td>
<td><div><img class="Symbol" src="../pictures/picc.jpg"></div></td>
</table>
</div>
which SHOULD be loaded into ng-view. My aim is to make a single page where the center div of the window changes so I can load different screens to do whatever the app does without reloading the other stuff. The current directory structure is like this:
--angular
------app
------controllers
--lib
------angular.min
------angular-animate.min
------angular-route.min
------Chart.js
------jquery-1.11.3
--pictures
------pica
------picb
------picc
--views
------home.html
index.html
test.css
What I have now makes {{ title }} change the way it's supposed to, but there's nothing in the middle of the page. When I inspect the page, I see that the ng-view directive is commented.
<-- ngView: undefined -->
Is where my content from home.html is supposed to be. Why is ngView being commented out here?
I had this EXACT issue. what resolved it for me was, as Brendan Green mentioned,
changing my route to be : templateUrl instead of : templateURL ...casing made a huge difference!!!!
The html file that you show should be:
This file should be the index.html.
<html>
<head>
<title>TEST PROJECT</title>
<link rel="stylesheet" type="text/css" href="test_project.css">
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/angular-animate.min.js"></script>
<script src="lib/Chart.js"></script>
</head>
<body ng-app='TestProject'>
<div ng-view></div>
<script src="angular/app.js"></script>
<script src="angular/controllers.js"></script>
</body>
</html>
And then create a new html file, should be as you have in the routeProvider, and should be inside inside view folder, as it view/home.html
And content must be:
<div class="interface" ng-controller="SelectionController">
<div style="height: 10%">
<img style="margin:5px; float:left; height: 10vh" src="pictures/logo.gif">
<center><h1>{{ title }}</h1></center>
</div>
<div style="height:5%">
<p>Having trouble? Request Support
<p style="bottom: 50px; position:fixed; size:8px">Footer Text
</div>
</div>
Thats the way angular works.
Regards.