Generating a list of menus with AngularJS 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.



&lt;!DOCTYPE html&gt;
&lt;head&gt;
 &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"&gt;&lt;/script&gt;
 &lt;script&gt;
        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"}
  ];
 &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;    
    &lt;div id="angularContainer" ng-app="" ng-init=""&gt;
        &lt;ol class="list-group"&gt;
            &lt;li class="list-group-item" ng-repeat="x in links"&gt;
                &lt;a href=' {{ x.ref }} '&gt; {{ x.content }} &lt;/a&gt; 
            &lt;/li&gt;
        &lt;/ol&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;script&gt; angularCreateMenu("angularContainer", list) &lt;/script&gt;




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?
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" }
    ];
  });
&lt;div ng-app="MyApp" ng-controller="MainCtrl"&gt;
  &lt;ol class="list-group"&gt;
    &lt;li class="list-group-item" ng-repeat="x in links"&gt;
      &lt;a href=' {{ x.ref }} '&gt; {{ x.content }} &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
&lt;/div&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"&gt;&lt;/script&gt;




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: `
      &lt;ol class="list-group"&gt;
        &lt;li class="list-group-item" ng-repeat="x in $ctrl.links"&gt;
          &lt;a href=' {{ x.ref }} '&gt; {{ x.content }} &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ol&gt;
    `,
    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"
        }
      ];
    }
  });
&lt;div ng-app="MyApp"&gt;
  &lt;app /&gt;
&lt;/div&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"&gt;&lt;/script&gt;