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!

Leave a Reply

Follow

Get notified with the latest posts

Plugin Supporter WordPress Post Navigation
%d bloggers like this: