i want to use
<div layout="row" layout-align="space-around center">
<div style="width:200px;background-color:#00f">left</div>
<div style="width:300px;background-color:#0f0" ng-include="'views/home/interests.html'"></div>
<div style="width:500px;background-color:#f00">right</div>
</div>
as defined in this page https://material.angularjs.org/latest/layout/alignment
What i must include in my project, is there an Angular-Layout.js to install with bower ?
It should be aligned in a Row, but here the result :
As it is a part of the Angular Material library, you must include that library in your page.
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
See: https://material.angularjs.org/latest/getting-started
Related
I'm starting to learn AngularJS and Angular Material.
I have a problem on understanding the md-tabs.
<section layout="row">
<div layout="column"><img id="ApplicationLogo" src="https://material.angularjs.org/latest/img/icons/angular-logo.svg"></div>
<div layout="column" id="ApplicationTitle" layout-align="center start">Application Title</div>
<div layout="column" id="ApplicationWelcome" flex layout-align="center end">Angemeldet als Test User</div>
<div layout="column" layout-align="center center"><img id="ApplicationAvatar" src="http://findicons.com/files/icons/1072/face_avatars/300/d05.png"></div>
</section>
Here is a demo: http://plnkr.co/edit/72ZNb70BjSM6xP7RnSvH?p=preview
Any hint why my tabs do not change their content?
you linked to wrong angular material css version.
you used angular-material.js 1.0.7 and angular-material.css 1.1.0-rc2.
changed to the correct version of css should work. (/1.0.7/angular-material.css)
The reason that it didn't work was that the required css class md-visually-hidden in 1.0.7 is renamed to _md-visually-hidden in the 1.1.0.
Don't want to go into too much detail unless you ask for. But try to correct the version and see what happen.
I have this code , here when screen size is more than small layout-align is working well but when it is smaller than Small layout align is not working
<div layout-gt-sm="row" layout-lt-sm="column" flex layout-align="space-around center">
<!-- main content like jokes and news will go here -->
<div flex-gt-sm="55" flex="80">
<md-card class="md-whiteframe-5dp">
hello</md-card>
</div>
<!-- todo and upcoming event will go here -->
<div flex-gt-sm="35" flex="80">
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
</div>
</div>
thanks
Angular Material no longer offers the layout-lt-* directives. Instead, you should just do:
<div layout="column" layout-gt-sm="row">
This is likely causing your layout align directives to not work because they do not currently have a parent layout in your code.
You can read a bit more here: https://material.angularjs.org/HEAD/layout/container
Most parts of my application share a common layout including a header, sidenav and content area. These common elements are set up in my index.html file, and the result of a rendered route is included via the ng-view directive. See below. (Note that I am trying to use Material Design also).
<body layout="row">
<md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
<header>
<!-- heading -->
</header>
<ul>
<!-- menu options -->
</ul>
</md-sidenav>
<div flex layout="column">
<md-toolbar layout="row">
<!-- tool bar content -->
</md-toolbar>
<md-content flex layout-padding id="content">
<div ng-view></div> <!-- result goes here -->
</md-content>
</div>
<!-- scripts -->
</body>
My question is, how do I go about creating a front page which has a completely different layout, for example it does not have a side navigation? It seems to me that I need to move the header, sidenav etc into a separate template, and then conditionally inject the result of a route into the separate template, before it is used in ng-view. In other words, I think I need to conditionally decorate the route response.
Where do I start with this?
I see that there is a UI-router module available but I think this is probably overkill for my simple scenario.
A simple ng-if might help ... set a variable only in your home page controller so the condition will be false for all other routes.
<md-sidenav ng-if="!homePageControllerVariable">
Another alternative is a dynamic ng-include
I have a directive which uses three different templates:
http://jsfiddle.net/edwardtanguay/pLrkya7r/4
These templates each have a panel and I want them to include a header template which is the same for each of them, like this:
<script type="text/ng-template" id="itemMenuTemplateUndefined">
<div class = "panel panel-default" >
<div ng-include="'itemMenuTemplatePanelHeading'"></div>
<div class="panel-body">
<div>Age: {{item.age}}</div>
</div >
</div>
</script>
The included template looks like this:
<script type="text/ng-template" id="itemMenuTemplatePanelHeading">
<div class="panel-heading">{{item.firstName}} <b>{{item.lastName}}</b> (PROBLEM INCLUDED BUT NO COLOR)</div>
</script>
The problem is that although it includes the scope variable values and HTML, it doesn't seem to have the same HTML structure which causes e.g. the panel header color not to display.
How can I get this example to work so that it has the same HTML structure as without ng-include so that Bootstrap continues to work?
The problem is that the bootstrap css is very specific in targeting the panel heading as a direct child of the panel using selectors like .panel-warning>.panel-heading.
The extra <div> for the ng-include breaks this child relationship making it
<div class="panel">
<div ng-include>
<div class="panel-heading>
Some possible choices:
Add appropriate classes to the ng-include div
Copy the css rules and replace the > in selector with a space
Use your own directive instead of ng-include and within the options
set replace:true
Working with angularjs, I am trying Angular Treeview plugin.
But when i try it on my local environment, it doesn't work. I don't know how to fix it.
<div ng-app="myApp">
<div ng-controller="myController">
<div>
<input type="button" value="TREE MODEL 1" data-ng-click="roleList = roleList1" /> <input type="button" value="TREE MODEL 2" data-ng-click="roleList = roleList2" />
</div>
<div style="margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;">
<span><b>Selected Node</b> : {{currentNode.roleName}}</span>
</div>
<div
data-angular-treeview="true"
data-tree-model="roleList"
data-node-id="roleId"
data-node-label="roleName"
data-node-children="children" >
</div>
</div>
</div>
And Called the angular.treeview.js script & angular.treeview.css file..
I am getting this error in my local dev console:
CONSOLE has ReferenceError: angular is not defined })( angular );
Your issue is how you are loading this script - I recommend following the treeviews suggest installation method. So load all the scripts - in this case you would have copies of their css and js files locally - and replace the angular reference with however you are loading it (CDN or locally or whatever).
This is probably in your header -
<script type="text/javascript" src="YourAngularScript.js"></script>
<script type="text/javascript" src="/angular.treeview.js"></script>
<link rel="stylesheet" type="text/css" href="css/angular.treeview.css">
Notice angular is loaded first. Then when you create your angular app module (or whatever module is using this as a dependency), add it as a dependency to that app module like so:
angular.module('myApp', ['angularTreeview']);
Just make sure you replace the script references I used here with references to the real scripts/css files.
Your error CONSOLE has ReferenceError: angular is not defined })( angular ); is the treeview script does not have a reference to angular yet.