AngularJS MVC Architecture Introduction to AngularJS

AngularJS Environment Setup

This chapter introduces how to set up the AngularJS library for web application development. It also briefly describes the directory structure and its contents.

When you open the link https://angularjs.org/When you do, you will see two options for downloading the AngularJS library-

View on GitHub −Click this button, and you will be transferred to GitHub to get all the latest scripts.
Download AngularJS 1 −Click this button, and you will see a screen that shows as−

This screen provides various options for using Angular JS-

Downloading and hosting files locally

There are two different options: 'traditional' and 'latest'. The name itself is self-explanatory. The older version is lower than1.2.x, while the latest version is1.7.x.
We can also use the minimized, uncompressed, or compressed versions.

CDN access−You can also access the CDN. The CDN allows you to access regional data centers. In this case, it is hosted by Google. The CDN transfers the responsibility of hosting files from your own server to a series of external servers. It also provides an advantage that if your web page visitors have already downloaded a copy of AngularJS from the same CDN, there is no need to download it again.

In this tutorial, we have been using the CDN version of the library.

Online example

Now, let's write a simple example using the AngularJS library. Let's create an HTML filemyfirstexample.html, as shown below-

Example

!doctype html>
<html>
　　　<head>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.5.2/angular.min.js"></script>
　　　</head>
　　　
　　　<body ng-app="myapp">
　　　　　　<div ng-controller="HelloController">
　　　　　　　　　<h2>Welcome {{helloTo.title}} to the world of w3codebox<!/h2>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　angular.module("myapp", [])
　　　　　　　　　
　　　　　　　　　.controller("HelloController", function($scope) {
　　　　　　　　　　　　$scope.helloTo = {};
　　　　　　　　　　　　$scope.helloTo.title = "AngularJS";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Test and see ‹/›

Let's read the code above in detail-

including AngularJS

We include the AngularJS JavaScript file in the HTML page so that we can use it-

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

You can view the latest version of AngularJS on its official website.

to the AngularJS application

Next, you need to determine which part of the HTML contains the AngularJS application. You can do this by pointing ng-The app attribute is added to the root HTML element of the AngularJS application to implement it. You can add it to the html element or 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 w3codebox<!/h2>
</div>

ng-controllertelling AngularJS which controller to use in this view.helloTo.titletelling AngularJS to write the model value named helloTo.title at this location with HTML.

controller

The controller part is-

<script>
　　　angular.module("myapp", [])
　　　
　　　.controller("HelloController", function($scope) {
　　　　　　$scope.helloTo = {};
　　　　　　$scope.helloTo.title = "AngularJS";
　　　});
</script>

This code is in a file namedmyappThe controller function named HelloController is registered in the angle module. We will study the module and controller in detail in their respective chapters. The controller function is registered with Angular through the call of angular.module(...).controller(...) function.

$scope parameter model is passed to the controller function. The controller function adds a helloTo JavaScript object and adds a title field to the object.

Execute

Save the above code asmyfirstexample.htmland in any browserinIt opens. You will see the following output-

Welcome AngularJS to the world of w3codebox!

What happens when a page is loaded in the browser? Let's see-

The HTML document has been loaded into the browser and evaluated by the browser.
The AngularJS JavaScript file has been loaded, angleGlobalThe object has been created.
Executes the JavaScript for registering controller functions.
Next, AngularJS scans the HTML to search for AngularJS applications and views.
After finding the view, it connects the view to the corresponding controller function.
Next, AngularJS executes the controller functions.
Then, it uses the data in the model filled by the controller to present the view. Now the page is ready.