Development Environment

Rumman Ansari   Software Engineer   2023-01-27   104 Share
☰ Table of Contents

Table of Content:

Development Environment

You can setup your development environment as follows.

  1. An IDE / text editor - Webstorm, Sublime Text, Visual Studio or even a notepad++
  2. node - To compile and run angular project into local
  • install node
  • npm install -g http-server
  1. After installation cd into your project folder
  • run http-server -o
  1. A browser. Chrome is preferred
  2. Git - Version control system.

ng-app and Angular Expression

ng-app and Angular expressions are two important concepts in AngularJS, which are used to create dynamic and interactive web applications.

An example of using the ng-app directive would be as follows: 


<html ng-app>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body>
  <div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{yourName}}!</h1>
  </div>
</body>
</html>

In this example, the ng-app directive is added to the <html> element, indicating that this is the root element of the AngularJS app. The ng-model directive is then used on an input field to bind the value of the input to a model variable called "yourName." The value of this variable is then displayed in an h1 element using an AngularJS expression ({{yourName}}). This is a simple example of how the ng-app directive and Angular expressions can be used to create dynamic and interactive web pages.

The ng-app directive is used to define the root element of an AngularJS application. It is typically added to the HTML document's body or head element. Once the ng-app directive is added, AngularJS will automatically initialize and start the application.

Angular expression

Angular expressions are similar to JavaScript expressions but with a few differences. They can be used to bind application data to HTML elements and can also be used to evaluate expressions in AngularJS controllers. Angular expressions are enclosed in double curly braces {{}} and can be used to bind data to elements, such as input fields, and to perform simple operations, such as calculations or conditions.

An Angular expression is a JavaScript-like code snippet that is evaluated by AngularJS at runtime. Expressions are typically used to bind data to elements in the view, but can also be used to perform simple calculations and logic.

For example, the following is an Angular expression that binds the value of the "name" property of the $scope object to an input field:


<input type="text" ng-model="name" />

In this example, the expression "name" is evaluated by AngularJS and the resulting value is displayed in the input field.

Another example of an Angular expression is a simple mathematical calculation, such as:


<p>{{ 2 + 2 }}</p>

In this example, the expression "2 + 2" is evaluated by AngularJS and the resulting value of 4 is displayed in the paragraph element.

You can also use expressions to control the behavior of directives, such as:


<div ng-show="isVisible"></div>

In this example, the expression "isVisible" is evaluated by AngularJS and the resulting value determines if the div is visible or not.

‹ Previous -   AngularJS Architecture
Next › -   Benefits of AngularJS