0
\$\begingroup\$

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?

\$\endgroup\$
2
\$\begingroup\$

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>

\$\endgroup\$
  • \$\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 Aug 29 '17 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.