Some days ago, I decided to start learning a JS framework in order to gain skills and become more useful at work. I choose Angular for the purpose, and started learning it by building up my "professional" personal website.
In this site, one of the biggest obstacles I could encounter was the extremely "bogging" way of adding new stuff with plain HTML. Thus, after some readings, I made an Angular app that generates an ordered list from a Javascript array of JSON descriptors.
For transparency, I made a snippet being as short as possible, while keeping it functionally identical.
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
function angularCreateMenu(appInitDivId, linksJSON){
document.getElementById(appInitDivId).attributes["ng-init"].value = "links="+JSON.stringify(linksJSON)
}
var list = [
{ref:"./link1.html", content:"First link of the menu"},
{ref:"./link2.html", content:"Second link of the menu"},
{ref:"./link3.html", content:"Third link of the menu"}
];
</script>
</head>
<body>
<div id="angularContainer" ng-app="" ng-init="">
<ol class="list-group">
<li class="list-group-item" ng-repeat="x in links">
<a href=' {{ x.ref }} '> {{ x.content }} </a>
</li>
</ol>
</div>
</body>
<script> angularCreateMenu("angularContainer", list) </script>Is it OK this way? That final call after body is slightly annoying for me, but I can't do anything against it.
Are there maybe any additional point to improve this code?
1 Answer 1
Simple answer, no it's not OK this way, you are totally misusing the angular.js purpose.
Anugular.js is a framework in which follows a modular pattern, it was designed by the time web wasn't so rich as nowadays so lots of things in the framework are native behavior today's days, it starts always with a module, like so:
angular.module('MyApp', []);
As you have your module declared, it can be triggered by the ng-app="MyApp" directive, which bootstraps your module in the element you embedded the ng-app attribute into (i.e., it starts an angular.js app in that element) or you can bootstrap it manually using angular.bootstrap(document, ['MyApp']) when the DOM is ready.
I've made an acceptable way of using angular.js with your example and you can check this in the example bellow.
angular.module('MyApp', [])
.controller('MainCtrl', function($scope) {
$scope.links = [
{ ref: "./link1.html", content: "First link of the menu" },
{ ref: "./link2.html", content: "Second link of the menu" },
{ ref: "./link3.html", content: "Third link of the menu" }
];
});<div ng-app="MyApp" ng-controller="MainCtrl">
<ol class="list-group">
<li class="list-group-item" ng-repeat="x in links">
<a href=' {{ x.ref }} '> {{ x.content }} </a>
</li>
</ol>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>However, the modern way of doing modern web apps these days is using the concept of WebComponents, concept in which angular.js supports since version 1.5.0.
In the snippet bellow, I provided the component approach of your example.
Disclaimer: You seem not to have understood angular.js' concept properly, so, I don't know where you've been studying angular.js, but I really recommend the angular.js guide which covers pretty much everything you need to know about concepts, architecture, features, etc.
angular.module('MyApp', [])
.component('app', {
template: `
<ol class="list-group">
<li class="list-group-item" ng-repeat="x in $ctrl.links">
<a href=' {{ x.ref }} '> {{ x.content }} </a>
</li>
</ol>
`,
controller: function() {
this.links = [{
ref: "./link1.html",
content: "First link of the menu"
},
{
ref: "./link2.html",
content: "Second link of the menu"
},
{
ref: "./link3.html",
content: "Third link of the menu"
}
];
}
});<div ng-app="MyApp">
<app />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>-
\$\begingroup\$ Sorry, late answer, but had no time dealing with my stuff. Your post was insightful and with slight changes, I could re-create it. Thanks! \$\endgroup\$Zoltán Schmidt– Zoltán Schmidt2017年08月29日 14:32:37 +00:00Commented Aug 29, 2017 at 14:32
Explore related questions
See similar questions with these tags.