In this chapter, we will discuss how to set up the Angularjs library for use in Web application development. We will also briefly look at the directory structure and its contents.
When you open the link https://angularjs.org/, you will see two options for downloading the ANGULARJS library:
GitHub Download-Click this button to go to GitHub and get all the latest scripts.
Download-or click this button to see below the screen:
This screen gives you a variety of options for using the corner JS as follows:
Downloads and Local Host files
There are two different options: the old and the latest. The name itself is self explanatory. The older version is already below the 1.2.x version and the latest 1.3.x edition.
We can also use the shrink, no compression or compression version.
CDN Access: CDN can also be used. The CDN will give access to all parts of the world, in this case, Google's host regional data center. This means using CDN's mobile host files from their own servers to a range of external factors. This also provides the advantage that if your page has been downloaded from the same CDN Angularjs copy, 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 write a simple example. Create an HTML file myfirstexample.html as follows:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Yiibai!</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
</body>
</html>
The following sections describe the above code in detail:
including Angularjs
We've included the HTML page in the Angularjs JavaScript file, so we can use ANGULARJS:
Check the latest version of ANGULARJS on its official website.
Point ANGULARJS Application
Next, we tell you that part of the HTML contains ANGULARJS applications. This can be done by Ng-app attributes to HTML elements in the root directory of the ANGULARJS application. You can add it to an HTML element or a BODY element, as follows:
<body ng-app= "MyApp" > </body>
View
This section of the view:
<div ng-controller= "Hellocontroller" >
Ng-controller tells Angularjs what is the controller and view. Helloto.title tells Angularjs to write the value of "model" in this location named Helloto.title HTML.
Controller
The part of the controller is:
<script>
angular.module ("MyApp", [])
. Controller ("Hellocontroller", function ($scope) {
$ Scope.helloto = {};
$scope. Helloto.title = "Angularjs";
});
This code first registers a feature named Hellocontroller in the MyApp module controller. We will learn more about modules and controllers in the respective chapters. The controller function is registered in the Via Angular.module (...). ) of the horn. Controller (.....) ) function call.
The $scope parameter model passed to the controller function. The controller feature adds a Helloto JavaScript object that adds a caption field to the object.
Perform
Save the above code as MYFIRSTEXAMPLE.HTMLL open it in any browser. You will see the following output:
The following event occurs when the page is loaded in a browser:
The HTML document is loaded into the browser and evaluated by the browser. The angularjs JavaScript file is loaded and the corner global object is created. Next, a register controller function for JavaScript is executed.
Angularjs through an HTML scan to find ANGULARJS applications and views. Once the view is found, it connects the view to the corresponding controller function.
Next ANGULARJS executes the control function. It then renders and fills 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
