AngularJS Environment Setup
This chapter describes how to set up AngularJSlibrary to be used in web application development. It also briefly describes the directory structure and its contents.
When you open the link https://angularjs.org/, you will see there are two options to downloadAngularJS library:
View on GitHub- By clicking on this button, you are diverted to GitHub and get all the latest scripts.
Download- By clicking on this button, a screen you get to see a dialog box shown as:
This screen offers various options for selecting Angular JS as follows:
Downloading and hosting files locally
There are two different options :Legacy and Latest. The names themselves are self-descriptive. TheLegacy has version less than 1.2.x and the Latest come with version 1.3.x.
We can also go with the minimized, uncompressed, or zipped version.
CDN access: You also have access to a CDN. The CDN gives you access to regional data centers. In this case, the Google host. The CDN transfers the responsibility of hosting files from your own servers to a series of external ones. It also offers an advantage that if the visitor of your web page has already downloaded a copy ofAngularJS from the same CDN, there is no need to re-download it.
We are using the CDN versions of the library throughout this tutorial.
Example
Now let us write a simple example usingAngularJS library. Let us create an HTML filemyfirstexample.html shown as below:
<!doctype html>
<html>
<head>
<scriptsrc="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 Tutorialspoint!</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
</body>
</html>
Let us go through the above code in detail:
Include AngularJS
We include the AngularJS JavaScript file in the HTML page so that we can use it:
<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
You can check the latest version of AngularJS on its official website.
Point to AngularJS app
Next, it is required to tell which part of HTML contains the AngularJS app. You can do this by adding the ng-app attribute to the root HTML element of the AngularJS app. You can either add it to the html element or the body element as shown below:
<body ng-app="myapp">
</body>
View
The view is this part:
<div ng-controller="HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>
ng-controller tells AngularJS which controller to use with this view. helloTo.title tells AngularJS to write the model value named helloTo.title in HTML at this location.
Controller
The controller part is:
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
This code registers a controller function namedHelloController in the angular module namedmyapp. We will study more about modules andcontrollers in their respective chapters. The controller function is registered in angular via the angular.module(...).controller(...) function call.
The $scope parameter model is passed to the controller function. The controller function adds a helloTo JavaScript object, and in that object it adds a title field.
Execution
Save the above code as myfirstexample.html and open it in any browser. You get to see the following output:
What happens when the page is loaded in thebrowser ? Let us see:
HTML document is loaded into the browser, and evaluated by the browser.
AngularJS JavaScript file is loaded, the angular global object is created.
The JavaScript which registers controller functions is executed.
Next, AngularJS scans through the HTML to search for AngularJS apps as well as views.
Once the view is located, it connects that view to the corresponding controller function.
Next, AngularJS executes the controller functions.
It then renders the views with data from the model populated by the controller. The page is now ready.
ليست هناك تعليقات:
إرسال تعليق