AngularJS Keywords and Helpful Definitions

In this section, I would like to highlight some of the key features and how to work with them in AngularJS.

Directives In AngularJS world these are helpful to extend HTML which are special attributes starting with "ng-" prefix. Below are some of the important Directives one should know as part of AngularJS.

• ng-app this directive help start AngularJS application. And also, it defines the root element, automatically initializes or bootstraps and to load different modules of the application

  <div ng-app="myApp">
  

  <!-- you code goes here related to app -->

  </div>

• ng-Init this directive help initialize application data by setting up the values to the variables which are going to be used as part of application

<div ng-app="myApp"> ng-init="countries = [{'United States}]"


<!-- you code goes here related to app -->

</div>

• ng-model this directive binds the values to HTML controls

  <div ng-app="myApp">
  

  Enter Name: <input type="text" ng-model="name" >

  </div>

• ng-Repeat this directive help repeating HTML elements of collections

  <p> List of Countries with locale </p>
  <ol>
  

  <li ng-repeat="country in countries" >
  {{ 'country: ' + country.name }}
  </li>

  </ol>

Expressions These are used to bind data to HTML and are written using double braces like {{ }}. Expressions behaves the same way as ng-bind directives. Some examples are as below:

Integers example:

Total Cost: $ {{ quantity * price }}

string example:

Hi {{ employee.LastName + " " + employee.FirstName }}

object example:

Hi {{ employee.Designation }}

array example:

Hi {{ employee[1].FirstName }}

Controllers These will help to control the flow of AngularJS application. A Controller is defined using ng-controller directive, and contains attributes/properties and functions. $scope refers to the application or module that controller is to control. Here is an example of Controller in an AngularJS application:

In HTML, this is how a controller is referenced:
<div ng-controller="StudentController">

... Your code goes here ...

<div>

The Controller will e defined as below:
<script>

function studentController($scope) {

$scope.student = {
firstNme: "Balaji",
lastNme: "Telugunti",
};

}

</scope>

Filters These are helpful to modify the data using a pipe (|) character and can be combined in an expression or directive. Below are the commonly used filters with examples:

Name	Description	Example
uppercase	Converts data to UPPERCASE	Last Name: {{ student.lastName | uppercase }}
lowercase	Converts data to LOWERCASE	Last Name: {{ student.lastName | lowercase }}
currency	Converts data to a CURRENCY format	Fees: {{ student.Fees | currency}}
filter	FILTERS a collection to a subset based on criteria	ng-repeat="subject in subjects | filter.subjectName
orderby	ORDERS a collection based on criteria	ng-repeat="subject in subjects | orderBy.subjectName

Modules: These are used to separate logic's like services, controllers, application etc. and keep the code clean. Best practice is to define modules in separate js files and name them as per the functionality of the module.

Ajax: $https: control works as a service to read and get data from server in AngularJS. Below is an example of how to use this:

function studentController($scope, $https:) {

var url = "data.txt"

$https:.get(url).success(function(response) {

$scope.students = response;

});

}

Views: AngularJS supports Single Page Application via multiple views on a single page. To support this, Angular has ng-view, ng-template directives as well as $routeProvider services. Here is how we can work with these:

• ng-view This creates a place holder where a corresponding view or template can be placed by the configuration. This can be achieved as below:

  <div ng-app="mainApp">
  

  ...

  <div ng-view> </div>

  </div>

• ng-template This directive is used to create a html view using script tag which contains Id attribute to refer and used by $routeProvider to map the view with a controller as below:

  <div ng-app="mainApp">
  

  ...

  <script type="text/ng-template" id="addStudent.htm" >
  <h2> Add Student </h2>
  {{message}}
  </script>

  </div>

• $routeProvider This is the key service which set the configuration of urls, map them with the corresponding html or ng-templateby attaching it to controller as below:

  var mainApp = angular.module("mainApp", ['ngRoute']);
  
  

  mainApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  
  when('/addStudent', {
  templateUrl: 'addStudent.htm', controller: 'AddStudentController'
  }).
  
  when('/viewStudents', {
  templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController'
  }).
  
  otherwise({
  redirectTo: '/addStudent'
  });
  

  }]);

Scope: Scope's responsibility is to join the controller with view. This contains the model data as well as met data which can be accessed via $scope object. Scope is controller specific and if we have nested controllers then the child scope will inherit the scope of its parent.

<scope>

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

mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});

</scope>

Services: Separation of Concerns is implements in AngularJS using services architecture. These are meant and responsible for doing a specific task only. These can be used on requirement basis and uses Dependency Injection mechanism to be used as part of controllers and filters. Services can be created wither using a factory or service

• factory example:

  var mainApp = angular.module("mainApp", []);
  mainApp.factory('MathService', function() {
  

  var factory = {};

  
  

  factory.multiply = function(a, b) {

  return a * b
  

  }

  
  

  return factory;

  });

• Service example:

  mainApp.service('CalcService', function(MathService){

  this.square = function(a) {

  return MathService.multiply(a,a);
  

  }

  });