Generating a list of menus with AngularJS

Question

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?

lenilsondc · Accepted Answer · 2017-07-20 12:32:29Z

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>

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! — Zoltán Schmidt, Commented Aug 29, 2017 at 14:32

Stack Exchange Network

Generating a list of menus with AngularJS

1 Answer 1

Hot Network Questions

Generating a list of menus with AngularJS

1 Answer 1

Related

Hot Network Questions