Home > Developer > JavaScript
Environment setting of AngularJS tutorial and angularjs tutorial Environment
In this chapter, we will discuss how to set the AngularJS library to be used in Web application development. We will also briefly study the directory structure and its content.
When you open the link https://angularjs.org/, you will see two URLs with angularjslibrary:
Download GitHub-click this button to go to GitHub and get all the latest scripts.
Download-or click this button and you will see below the screen:
This screen provides the following options for using corner JS:
Download and local host files
There are two different options: the old version and the latest version. The name itself is self-explanatory. Earlier versions are earlier than 1.2.x and later than 1.3.x.
We can also reduce the number without compression or compression.
CDN access: You can also use CDN. In this case, Google hosts regional data centers. This means that files on mobile hosts using CDN are responsible for a series of external factors from their servers. This also provides an advantage: If a visitor's webpage has downloaded a copy of AngularJS from the same CDN, it does not have to be downloaded again.
Use the CDN version library in this tutorial.
Example
Now let's use the AngularJS library to compile a simple example. Create an HTML file myfirstexample.html as follows:
<!doctype html>The following sections describe the above Code in detail:
Including AngularJS
We have already included HTML pages in AngularJS's JavaScript file, so we can use AngularJS:
Check the latest version of AngularJS on its official website.
Point to AngularJS applications
Next, we will tell you that part of HTML contains AngularJS applications. You can apply the ng-app attribute to the HTML element under the root directory of the AngularJS application. You can add it to an HTML or body element as follows:
<body ng-app="myapp"></body>View
View of this part:
<div ng-controller="HelloController" >Ng-controller tells AngularJS what is a controller and a view. HelloTo. title tells AngularJS to compile the "model" value of HTML named helloTo. title in this position.
Controller
The Controller part is:
<script> angular.module("myapp", []) .controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "AngularJS"; });</script>This code first registers the function named MyApp module controller in HelloController. We will learn more about the modules and controllers in their respective chapters. The controller function is registered in the angular. module. Controller (...) function call.
$ Scope parameter model passed to the controller function. The controller function adds the helloTo JavaScript Object, which is added with a title field.
Run
Save the code as myfirstexample.html l and open it in any browser. The following output is displayed:
When a page is loaded in a browser, the following events occur:
HTML documents are loaded into the browser and computed by the browser. AngularJS JavaScript files are loaded, and corner global objects are created. Next, a register controller function of JavaScript is executed.
AngularJS uses HTML scanning to find AngularJS applications and views. Once the view is found, it connects the view to the corresponding controller function.
Then AngularJS executes the control function. Then, it presents and fills in the controller model data view. The page is now ready.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
