AngularJS Introduction

AngularJS is aJavaScript framework. It can be added to an HTML page via a <script> tag.

AngularJS throughdirectivesextends HTML, and throughexpressionsbinds data to HTML.

AngularJS is a JavaScript framework

AngularJS is a JavaScript framework. It is a library written in JavaScript.

AngularJS is distributed as a JavaScript file, and can be added to a web page using a script tag:

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

Note We recommend placing the script at the bottom of the <body> element.
This improves web page loading speed because HTML loading is not subject to script loading.

Downloads for various angular.js versions:https://github.com/angular/angular.js/releases

AngularJS extends HTML

AngularJS throughng-directivesextends HTML.

ng-appDirectives define an AngularJS application.

ng-modelDirectives bind element values (such as input field values) to the application.

ng-bindDirectives bind application data to the HTML view.

AngularJS Examples

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>Name:<input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> <p ng-bind="name"></p> </div> </body> </html>

Try it yourself »

Example explanation:

When the web page has finished loading, AngularJS starts automatically.

ng-appThe directive tells AngularJS that the <div> element is the AngularJSapplication's "owner".

ng-modelThe directive binds the value of the input field to the application variablename。

ng-bindThe directive binds the application variable name to the innerHTML of a paragraph.

Note If you remove theng-appdirective, HTML will display the expression directly without evaluating the result of the expression.

What is AngularJS?

AngularJS makes it easier to develop modern single-page applications (SPAs: Single Page Applications).

  • AngularJS binds application data to HTML elements.
  • AngularJS can clone and repeat HTML elements.
  • AngularJS can hide and show HTML elements.
  • AngularJS can add code "behind" HTML elements.
  • AngularJS supports input validation.

AngularJS Directives

As you can see, AngularJS directives arengHTML attributes with a prefix.

ng-initThe directive initializes AngularJS application variables.

AngularJS Example

<div ng-app="" ng-init="firstName='John'"> <p>The name is<span ng-bind="firstName"></span></p> </div>

Try it yourself »

Note HTML5 allows extended (custom) attributes, usingdata-as the beginning.
AngularJS attributes useng-as the beginning, but you can usedata-ng-to make the web page valid for HTML5.

With valid HTML5:

AngularJS Example

<div data-ng-app="" data-ng-init="firstName='John'"> <p>The name is<span data-ng-bind="firstName"></span></p> </div>

Try it Yourself »

AngularJS Expressions

AngularJS expressions are written inside double braces:{{ expression }}。

AngularJS expressions bind data to HTML, which isng-bindsimilar to directives.

AngularJS will "output" data where the expression is written.

AngularJS Expressionsare very similar toJavaScript expressions: They can contain literals, operators, and variables.

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

AngularJS Example

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>My first expression: {{ 5 + 5 }}</p> </div> </body> </html>

Try it Yourself »

AngularJS Applications

AngularJS ModuleDefines the AngularJS application.

AngularJS ControllerIs used to control the AngularJS application.

ng-appDirectives define the application,ng-controllerdefine the controller.

AngularJS Example

<div ng-app="myApp" ng-controller="myCtrl">First name:<input type="text" ng-model="firstName"><br>Last name:<input type="text" ng-model="lastName"><br> <br>Full name: {{firstName + " " + lastName}}</div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>

Try it Yourself »

AngularJS modules define applications:

AngularJS Modules

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

AngularJS controllers control applications:

AngularJS Controllers

app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });

In the upcoming tutorials, you will learn more about applications and modules.

<div style="display:none;"> <hr> <h2 id="cs-ag">Using AngularJS in Cloud Studio </h2> <ul> <li><p>step1: Visit <a target="_blank" href='https://studio.dev.tencent.com/' rel="noopener noreferrer">Tencent Cloud Developer Platform</a>, register/log in to your account.</p></li> <li><p>step2: In the runtime environment menu on the right, select: <code>&quot;ubuntu&quot;</code></p> <p><img src='https://dn-coding-net-production-pp.qbox.me/14981854-d32a-4ea4-a784-e07b9ee510d5.jpg' alt='' /></p></li> <li><p>step3: In the code directory on the left, create an html directory and write your HTML code, for example index.html</p></li><li><p>step4: Paste the following code into the index.html file to include AngularJS:</p> <pre>&lt;script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;</pre> </li> <li><p>step5: Enter the command <code>sudo vim /etc/nginx/site-enable/default</code> in the terminal. Modify the red box part of the configuration file as shown in the figure below, then enter the command: <code>sudo nginx restart</code> to restart the nginx service (After nginx is installed and started, it listens on port 80 by default. We need to change nginx's site directory and the listening port to what we need.)</p> <p><img src='https://dn-coding-net-production-pp.qbox.me/29b9c1c8-fec7-42e3-abc2-c08be8b11f69.jpg' alt='' /></p></li><li><p>step6: Click the [Access Link] tab on the far right, fill in the port number as 8080 in the access link panel (consistent with the port number in the nginx configuration file just now), click Create Link, and then you can click the generated link to access the code we just wrote and view the AngularJS effect.</p> <p><img src='https://dn-coding-net-production-pp.qbox.me/32cc0575-0679-4196-842b-db1993886808.jpg' alt='' /></p></li></ul><p>Now CODING is holding a [My Favorite Cloud Studio Plugin Selection Contest] based on Cloud Studio workspaces. Visit the official event website: <a href="https://studio.qcloud.coding.net/campaign/favorite-plugins/index" rel="noopener noreferrer" target="_blank">https://studio.qcloud.coding.net/campaign/favorite-plugins/index</a> to learn more about the event information.</p> </div> Other Extensions