Menu in action

It is time to bring into being some data in the controller we created by initialising an array for the options in the menu. Create a variable menuoptions in maincontroller.js as follows:

$scope.menuoptions=
[
  {
    name: 'Home'
  },
  {
    name: 'Features'
  },
  {
    name: 'Pricing'
  },
  {
    name: 'Sign Up'
  }
];

Now to populate these options in the menu, create a div element in index.html. ng-repeat is used in order to iterate over the elements in an array, $index is used to access elements at different indices of the array.

 <div class="nav" ng-repeat="option in menuoptions">
    <ul>
      <li><a href="#" ng-click="display($index)">{{ option.name }}</a></li>
    </ul>
  </div>

The ng-click directive is used to specify the behavior of the element being clicked. Here on clicking the menu option, the display function is called which we define next in the controller.

$scope.display=function(index) {
                 var menuname= $scope.menuoptions[index].name;
                 alert(menuname);
};

The variable menuname stores the name of different menu options available and alerts the corresponding name whenever a menu item is clicked. So we learnt using directives ng-repeat and ng-click.

The menubar example can be seen running at here.

My Inception in AngularJS

Make hunger thy sauce, as a medicine for health.

Keeping an insight in learning new things upkeeps the blooming of mind. My new intimacy over the past couple days has been with AngularJS. I have never been into substantial web development.

AngularJS enhances the development of front-end applications that are well-structured, easily maintainable and testable.

In this series, I will illustrate creating a small example using AngularJS. The initial step to this taught me other things I am a novice in, including CSS. Below is a screenshot of what we will have by the end:

If you wish to maintain a local copy, get the source from here and follow the instructions to run your app on the localhost. After you start your server using npm start command, you will see a default application running. For our example, create a new directory, say myMenubar.

Create a file named main.js. This file will contain the modules that will be booted whenever the application is run. Let us define the module for our app.

var menubar = angular.module('myMenu',[]);

So by doing this, we have instantiated a module named myMenu for our application. Next create your index.html file and add the following content to it:

<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <script src="main.js"></script>
    <script src="maincontroller.js"></script>
    <title>AngularJS Example</title>
  </head>
  <body ng-app="myMenu">
    <div ng-controller="MainController">
      <h3 align="center">{{ title }}</h3>
    </div>
  </body><body>
</body></html>

The first script points to the AngularJS script, the second is the one containing the modules of the app, the third one defines the controller, about which we will talk next. The ng-app element tells when to launch AngularJS. Its value is the name of the module we set in main.js. It is called directive and defines the scope of the application.

Now it is time to create a controller. It handles all the app’s data. Create mainController.js and add following content to it:

menubar.controller('mainController',['$scope',function($scope){
  $scope.title='Sample text written using AngularJS';
}]);

The name of the controller is mainController and is added to a div element in index.html. The ng-controller defines the scope of the controller of the app. The properties defined in the controller are accessible in the div. The title property is attached to a variable $scope and will be accessed using expression {{ title }}. $scope binds the controller values to the DOM elements.

When you refresh your localhost, http://localhost:8000/menubar/, you get the string stored in the title on your page as following:

sample

You created a simple app that involved use of a controller, a directive and an expression. Hope this is enough food for now. 😉 We will be creating the example in the next part of the series. Keep learning!