freeCodeCamp/guide/english/angularjs/index.md

1.9 KiB

title
AngularJS

AngularJS

AngularJS is an open source front-end JavaScript framework. AngularJS extends HTML to develop rich and powerful front-ends. It reduces the repetitive use of HTML code. This repetition can be avoided by using the directives provided by AngularJS which saves much time and effort.

AngularJS Expressions

  • Expressions can be written inside double braces: {{ expression }}
  • Expressions can also be written inside a directive: ng-bind="expression"
  • AngularJS will resolve the expression, and return the result exactly where the expression is written
  • Expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

Example:

{{ 5 + 5 }} or {{ firstName + " " + lastName }}

Minimal example for usage of AngularJS in an HTML page:

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

Install

It is recommended to source the script from Google's CDN (Content Delivery Network) in your deployed, customer facing app whenever possible (better caching, decreased latency, increased parallelism). Please check the latest version on AngularJS.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>

npm:

npm install angular

HTML:

<script src="/node_modules/angular/angular.js"></script>

bower:

bower install angular

HTML:

<script src="/bower_components/angular/angular.js"></script>