AngularJS – Using A Controller

This example shows how a simple variable is filled in by a controller class in AngularJS.

  1. Create a file (website directory)/js/app.js containing the name of the app/module
  2. Create a controller (website)/js/controllers/(ControllerName).js containing code for the controller class and its scope, including setting a value for the variable
  3. Create an index.html file in (website)
    1. Declare the body tag to use the app/module above
    2. Declare a div tag to use the controller above
    3. Use the variable in the div tag

First, create a variable to represent the app/module in app.js

var app = angular.module("myApp", []);

Specifically, the controller class uses the following codes to set values to variables:

app.controller(‘MainController’, [‘$scope’, function($scope) {
$scope.title = ‘Biggest Political Stories’;
$scope.promo = ‘Best weeekly promos!’;
}]);

And the index.hml file (considered a view) uses those declarations as follows

<body ng-app=”myApp”>

<div class=”main” ng-controller=”MainController”>
<div class=”container”>

<h1>{{ title }}</h1>
<h2>{{ promo }}</h2>
</div>
</div>

clip3 clip clip1 clip2

clip4

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s