where to put this code in my angular project?

Question

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" },
                ]
            }
        ]
    }
];
}

Answer 1

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

where to put this code in my angular project?

Question

1 answers

solution1
1 2020-02-10 12:09:15

where to put this code in my angular project?

Question

1 answers

solution1 1 2020-02-10 12:09:15

solution1
1 2020-02-10 12:09:15