In this chapter, we will discuss how to set up the AngularJS library to use in web application development. We will also briefly examine the directory structure and its contents.
When you open the link https://angularjs.org/, you will see that there are two options to download the AngularJS library:
GitHub Download - Click this button to go to GitHub and get all the latest scripts.
Download - Or click this button and you will see:
This screen gives various options for using angle JS as follows:
Download and localhost files
There are two different options: old and latest. The name itself is self-explanation. The old version is already lower than the 1.2.x version and the latest is the 1.3.x version.
We can also use minified, uncompressed or compressed versions.
CDN access: You can also use CDN. The CDN will give access to the world, in this case Google hosts regional data centers. This means using CDN to the mobile host's responsibility for files from its own server to a range of external factors. This also provides the advantage that if the visitor your page has downloaded a copy of AngularJS from the same CDN, it does not have to be re-downloaded.
Use the CDN version library in this tutorial.
example
Now let's write a simple example using the AngularJS library. 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 chapter describes the above code in detail:
Including AngularJS
We already include the HTML page in the JavaScript file of AngularJS, so we can use AngularJS:
<head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script></head>
Check out the latest version of AngularJS on its official website.
Point to AngularJS application
Next, let's tell me that part of HTML contains AngularJS applications. This can be done by placing the ng-app attribute into the HTML element at the root of the AngularJS application. It can be added to an HTML element or body element as follows:
<body ng-app="myapp"></body>
view
This part of the view:
<div ng-controller="HelloController" > <h2>Welcome {{helloTo.title}} to the world of Yiibai!</h2></div>ng-controller tells AngularJS what controllers and views are. helloTo.title tells AngularJS to write the value of the "model" of HTML called 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 a function named MyApp angle module controller in HelloController. We will learn more about modules and controllers in their respective chapters. The controller function is registered at the angle via angular.module(...). controller(...) function call.
The $scope parameter model passed to the controller function. The controller function adds helloTo's JavaScript object, which has a title field added to it.
implement
Save the above code as myfirstexample.htmlll Open it in any browser. You will see the following output:
When the page loads in the browser, the following event occurs:
HTML documents are loaded into the browser and calculated by the browser. AngularJS JavaScript file is loaded and angle global objects are created. Next, a registration controller function in JavaScript is executed.
AngularJS scans via HTML 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 a data view with the populated controller model. The page is now ready.