where to put this code in my angular project? - javascript

I have some code for creating a Hierarchial tree in my angular project
I'm not sure where to use this code.
So there are only two codes- one is for HTML and another is a javascript
I created an angular project using ng new command, so it generated all the files.
Can you guide me on where I can put these codes?
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Tree Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
</head>
<body ng-app ng-controller="SampleController">
<script type="text/ng-template" id="treeLevel.html">
<ul>
<li ng-repeat="item in items">
<input type="checkbox"
name="itemSelection"
ng-model="item._Selected" />
{{item.text}}
<div ng-include=" 'treeLevel.html'"
onload="items = item.children">
</div>
</li>
</ul>
</script>
<div ng-include=" 'treeLevel.html' "
onload="items = sourceItems">
</div>
<pre> {{sourceItems | json}} </pre>
</body>
</html>
and the java script is:
function SampleController($scope) {
$scope.sourceItems = [
{
text: "Item A",
children: [
{
text: "Item A-1",
children: [
{
text: "Item A-1-1"
}, {
text: "Item A-1-2"
}
]
}, {
text: "Item A-2"
}, {
text: "Item A-3"
},
]
}, {
text: "Item B",
children: [
{ text: "Item B-1" },
{ text: "Item B-2" },
{
text: "Item B-3",
children: [
{ text: "Item B-3-1" },
{ text: "Item B-3-2" },
]
}
]
}
];
}

So basically Angular works with components. A component is basically just an independent piece of the website like it could be a navbar, a sidebar a post component etc. A component has two main parts, the HTML file and the JS file and the are both linked together. So basically the first piece of code you just showed would go on the HTML and the Javascript on the JS part of the component.
Here is more information on how this works and specially on how to create an Angular component.
PS: in the TS (Typescript, a language that inherits from Javascript but with strong typing) file is where your Javascript would go.
I hope this helped, let me know if you need more info :D

Related

Multi level dropdown menu (Tree dropdown) with Angular 2

Hi I was developing a multilevel tree dropdown component. But am kind of confused on how to develop the component, since the data might have so many levels and sub levels. Currently am stuck with a better approach or idea
I know how to hardcode the data and create the menu like below with pure HTML and css. How can I do with Angular with backend dynamic data? Thanks in advance.
HTML:
<ul class="top-level-menu">
<li>About</li>
<li>Services</li>
<li>
Offices
<ul class="second-level-menu">
<li>Chicago</li>
<li>Los Angeles</li>
<li>
New York
<ul class="third-level-menu">
<li>Information</li>
<li>Book a Meeting</li>
<li>Testimonials</li>
<li>Jobs</li>
</ul>
</li>
<li>Seattle</li>
</ul>
</li>
<li>Contact</li>
</ul>
Sample data:
data = [
{
id: 1,
name: 'root1',
children: [
{ id: 2, name: 'child1' },
{ id: 3, name: 'child2' }
]
},
{
id: 4,
name: 'root2',
children: [
{ id: 5, name: 'child2.1' },
{
id: 6,
name: 'child2.2',
children: [
{ id: 7, name: 'subsub' }
]
}
]
}
];
I don't think you can make your component completely dynamic in this case but you can have a array of objects in typescript which has all your options in the menu and use *ngFor to iterate.
In .ts
let menu = [{
'About': '#link'
},
{
'Services': '#link'
}, {
'offices': [{
'Chicago': '#link'
}, {
'Los Angeles': '#link'
}, {
'New York': [{
'Information': '#link'
}, {
'Book a Meeting': "#link"
}]
}]
}
]
and iterate through these nested objects in your html. If you do not have too much things to add remove frequently from your menu it's better to go with hard coding.
I don't know if you are still looking for the answer. If yes and for new viewer, then I have created a plugin for Angular which creates a Multilevel menu.
Here is a NPM Link and Github Link, the documentation is very sweet and simple.
Just in case, if you wanna see more examples, I have a demo for you and this is the Github Repo of the demo.
If something doesn't work for you, and you still wanna use this plugin, then create an issue here I'll help you out.
P.S. it works in IE11 as well.
Thanks

How to autofit Kendo TreeList column onExpand & onCollapse?

I have a Kendo TreeList. The collapse event is bound to an onCollapse() method, the expand event is bound to an onExpand() method.
In words: the first column consists of levels. The default level is 0 and is expanded as default and shows (all of it's children) all rows of level 1. When expanding a level 1 row, its children (level 2) are shown. At the same time, the column has to stretch a bit (to show the next level number). When expanding another level 1 row, the column does not need to stretch but when a row of level 2 is expanded, the first column has to stretch again for showing level 3 and so on.
Therefore, I use treeList.autoFitColumn(0). This causes an auto fit after every second expand whenever I expand rows of same level (that is not what I expect because expanding same level means the column did grow after the first expand but not after the second expand.
An alternative could be changing the width manually, but I cannot find something like treeList.columns[0].setWidth(x).
The behavior you are seeing is happening because the collapse and expand events are firing before the width of the content has actually changed.
What you can do to circumvent this is to "delay" the auto-fit until after the current code finished running. You do this by using setTimeout with a 0 timeout. This places the execution of the function inside the setTimeout at the end of the execution queue.
See the snippet for a demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
resizable: true,
columns: [
{ field: "Name" },
{ field: "Text" }
],
dataSource: [
{ id: 1, Name: "Name 1", Text: "Sample text 1", parentId: null },
{ id: 2, Name: "Name 2", Text: "Sample text 2", parentId: null },
{ id: 3, Name: "Name 3", Text: "Sample text 3", parentId: 1 },
{ id: 4, Name: "Very long name 4", Text: "Sample text 4", parentId: 2 }
],
expand: function(e) {
setTimeout(() => treeList.autoFitColumn(0), 0);
},
collapse: function(e) {
setTimeout(() => treeList.autoFitColumn(0), 0);
}
});
var treeList = $("#treeList").data("kendoTreeList");
treeList.autoFitColumn(0);
</script>
</body>
</html>

Extend Kendo Widget in Kendo-AngularJS application

I am trying to get my extended Kendo Widget to work with AngularJS.
With Kendo only my extended widget works fine you will see from the code below, but with Angular it wouldn't.
This is my code:
http://dojo.telerik.com/AbeZO/7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo Menu Extended</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
<script>
(function ($) {
var MyMenu = window.kendo.ui.Menu.extend({
init: function (element, options) {
window.kendo.ui.Menu.fn.init.call(this, element, options);
},
options: {
name: "MyMenu",
},
extendedFunctionality: function() {
return "extended functionality";
}
});
kendo.ui.plugin(MyMenu);
alert('menu extended');
})(jQuery);
</script>
</head>
<body>
<div ng-app="app" ng-controller="MyCtrl">
<p>Telerik Menu with Angular</p>
<ul kendo-menu k-data-source="menuData" k-rebind="menuData"></ul>
<p>My extended Menu with Angular</p>
<ul kendo-my-menu k-data-source="menuData" k-rebind="menuData"></ul>
</div>
<p>My extended menu with Kendo only</p>
<ul id="kendomymenu"></ul>
<script>
$("#kendomymenu").kendoMyMenu({
dataSource: [
{
text: "Item 4",
},
{
text: "Item 5",
},
{
text: "Item 6",
}
],
select: function () {
alert(this.extendedFunctionality());
},
});
angular.module("app", [ "kendo.directives" ]).controller("MyCtrl", function($scope){
$scope.menuData = [
{
text: "Item 1",
},
{
text: "Item 2",
},
{
text: "Item 3",
}
];
})
</script>
</body>
</html>
How to get it to work?
The menu is special cased by widget name and that's why its data source isn't assigned. You better create a custom directive for that:
.directive("kendoMenuDirective", function() {
return {
restrict: "A",
link: function(scope, element, attr) {
var dataSource = scope.$eval(attr.kDataSource);
$(element).kendoMyMenu({
dataSource: dataSource
});
}
};
});
Here is an updated version of your demo: http://dojo.telerik.com/#korchev/uNiDe

How to debug AngularJS code?

I'm learning AngularJS.
I created a page index.html (code see below), which is supposed to display data of the product variable defined in the store module (file app.js below). It worked fine, until I added the Reviews section. Thereafter, placeholder substitution stopped to work (instead of {{product.name}}, the actual product name should be displayed).
But I can't figure out, what exactly is wrong now.
How can I debug this code (find out the reason, why all of a sudden no data are displayed) ?
app.js
(function(){
var app = angular.module('store', [ ]);
app.controller('StoreController', function(){
this.products = gems;
});
app.controller('PanelController', function(){
this.tab = 1;
this.selectTab = function(setTab) {
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
}
});
var gems = [
{
name: "Dodecahedron",
price: 2,
description: 'Some description',
canPurchase: true,
images : [
{
full: 'img01.jpg',
thumb: 'img01.jpg'
},
{
full: 'img02.jpg',
thumb: 'img02.jpg'
},
{
full: 'img03.jpg',
thumb: 'img03.jpg'
},
],
reviews = [
{
stars: 5,
body: "I love this product!",
author: "joe#thomas.com"
},
{
stars: 1,
body: "I hate this product!",
author: "mike#thomas.com"
},
]
},
{
name: "Pentagonal Gem",
price: 5.95,
description: 'Some description 2',
canPurchase: false,
images : [
{
full: 'img04.jpg',
thumb: 'img04.jpg'
},
{
full: 'img05.jpg',
thumb: 'img05.jpg'
},
{
full: 'img06.jpg',
thumb: 'img06.jpg'
},
]
}
]
})();
index.html
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body ng-controller="StoreController as store">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<div ng-repeat="product in store.products">
<h1>{{product.name}}</h1>
<section ng-init="tab = 1" ng-controller="PanelController as panel">
<ul class="nav nav-pills">
<li ng-class="{ active:panel.isSelected(1) }">
<a href ng-click="panel.selectTab(1)">Description</a>
</li>
<li ng-class="{ active:panel.isSelected(2) }">
<a href ng-click="panel.selectTab(2)">Specifications</a>
</li>
<li ng-class="{ active:panel.isSelected(3) }">
<a href ng-click="panel.selectTab(3)">Reviews</a>
</li>
</ul>
<div class="panel" ng-show="panel.isSelected(1)">
<h4>Description</h4>
<p>{{product.description}}</p>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
<h4>Specifications</h4>
<blockquote>None yet</blockquote>
</div>
<div class="panel" ng-show="panel.isSelected(3)">
<h4>Reviews</h4>
<blockquote ng-repeat="review in product.reviews">
<b>Stars: {{review.stars}}</b>
{{review.body}}
<cite>by: {{review.author}}</cite>
None yet
</blockquote>
</div>
</section>
<h2>{{product.price | currency}}</h2>
<img ng-src="img/{{product.images[0].full}}"/>
<button ng-show="product.canPurchase">Add to cart</button>
</div>
</body>
</html>
Most of errors go to browser console. Also there are several techniques for custom errors handing, here is a good article. There is also other one, which describes several other code guards for common Angular pitfalls.
In your particular case definition of reviews = [ is not correct.
Sometimes I have this "problem" too with my AngularJS Apps, even when I have written much stuff, then suddenly it looks like your current result... :-)
Since now it was almost every time a missing ";" on end of a line, or a missing "{" or "}" brackets somewhere.... In your case I would take a look on something like this, before I change anything else...
Edit Found the Bug
Its like I said... Your Bug is inside your gems JSONArray.... I have replaced all ' with " and all = with :.... after that your app was back to live for me
var gems = [
{
name: "Dodecahedron",
price: 2,
description: "Some description",
canPurchase: true,
images : [
{
full: "img01.jpg",
thumb: "img01.jpg"
},
{
full: "img02.jpg",
thumb: "img02.jpg"
},
{
full: "img03.jpg",
thumb: "img03.jpg"
},
],
reviews : [
{
stars: 5,
body: "I love this product!",
author: "joe#thomas.com"
},
{
stars: 1,
body: "I hate this product!",
author: "mike#thomas.com"
},
]
},
{
name: "Pentagonal Gem",
price: 5.95,
description: "Some description 2",
canPurchase: false,
images : [
{
full: "img04.jpg",
thumb: "img04.jpg"
},
{
full: "img05.jpg",
thumb: "img05.jpg"
},
{
full: "img06.jpg",
thumb: "img06.jpg"
},
]
}
]

jQuery Fancy Tree with Local Array Data

I am trying to implement jQuery FancyTree http://wwwendt.de/tech/fancytree/demo/ with local array data
Referred from https://code.google.com/p/fancytree/
This is the code. But it is not working, No Script Error.But Tree is empty!!!
Even i copied the jQuery, UI versions of the file they using in a demo
site. Still nothing works
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.custom.js" type="text/javascript"></script>
<link href="ui.fancytree.css" rel="stylesheet" type="text/css" />
<script src="jquery.fancytree.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tree").fancytree({
onActivate: function (node) {
// A DynaTreeNode object is passed to the activation handler
// Note: we also get this event, if persistence is on, and the
// age is reloaded.
alert("You activated " + node.data.title);
},
children: [ // Pass an array of nodes.
{title: "Item 1" },
{ title: "Folder 2", isFolder: true,
children: [
{ title: "Sub-item 2.1" },
{ title: "Sub-item 2.2" }
]
},
{ title: "Item 3" }
]
});
});
</script>
</head>
<body>
<div id="tree">
</div>
</body>
</html>
I have noticed that source:[] is how you initializes the tree in $("#tabTree").fancytree() initialization call, so your example would be:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.custom.js" type="text/javascript"></script>
<link href="ui.fancytree.css" rel="stylesheet" type="text/css" />
<script src="jquery.fancytree.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tree").fancytree({
onActivate: function (node) {
// A DynaTreeNode object is passed to the activation handler
// Note: we also get this event, if persistence is on, and the
// age is reloaded.
alert("You activated " + node.data.title);
},
source: [ // Pass an array of nodes.
{title: "Item 1" },
{ title: "Folder 2", isFolder: true,
children: [
{ title: "Sub-item 2.1" },
{ title: "Sub-item 2.2" }
]
},
{ title: "Item 3" }
]
});
});
</script>
</head>
<body>
<div id="tree">
</div>
</body>
</html>
btw, in case you noticed it, the documentation is quite messy, as they are refactoring the code, the documentation is half what's left from dynatree and the new conventions of fancytree. So expect more weird stuff like that :-)
are the Scriptpath right?
Do you download "jquery.js, jquery-ui.custom.js, ui.fancytree.css and jquery.fancytree.js" ?

Categories