Instructions for installing AngularJS

In this chapter, I will show you how to install the AngularJS library to be used in web application development. We will introduce about the structure of the ink and its contents.

This article will show you how to install the AngularJS library for use in web application development. We will introduce about the structure of the ink and its contents.

When you visit https://angularjs.org/, you will see there are 2 options to download AngularJS as GitHub and download directly to your computer.

Instructions for installing AngularJS Picture 1Instructions for installing AngularJS Picture 1

  1. View on GitHub - Click this button to access GitHub, where you will have the latest AngularJS version.
  2. Download - Or click this button and the following screen will appear:

Instructions for installing AngularJS Picture 2Instructions for installing AngularJS Picture 2

This screen has a lot of options, but for simplicity, you should only choose CDN.

After downloading CDN to your computer, you copy and paste it at any drive. I paste it at drive D with the path D: angular.min.js . Why pay attention to this, you follow the first example of the next AngularJS will be clear.

Now that you've installed AngularJS, it's really simple, isn't it?

The first example of AngularJS

Now, I started writing a simple example using the AngularJS library. First, I created the viduAngularJS.html page as below:

  src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js" >  ng-app = "ungdungdautien" >  ng-controller = "ViduController" > 

 

 Chao mung ban den voi {{xinchao.tieude}} taiQTM.com! 

Open an editor, notepad, copy the above code and save it with any name (viduAngularJS.html for example), but you must remember that its extension is .html. Next, I present the components in the AngularJS example above.

Cover the AngularJS library

To declare JavaScript in your code, you can declare the following:

  src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" > 

This is the first way. This way has included the AngularJS library online (available online, because it is Google's free open library). If you do not want to use this method, you follow the following method.

  src = "D:angular.min.js" > 

Here, I cover the AngularJS library according to the path I just downloaded. Generally both ways are the same. You can try again. (Remember to have a .js tail.)

Point to AngularJS application

The next part is the HTML section containing the AngularJS application. This is added by the ng-app attribute at the root element of HTML in the AngularJS application. You can either add to the html element or in the body element as follows:

  ng-app = "ungdungdautien" > 

View components in AngularJS

View is the following component:

  ng-controller = "ViduController" > 

 

 Chao mung ban den voi {{xinchao.tieude}} tai QTM.com! 

ng-controller informs AngularJS which controller is used in the view. xinchao.tieude informs AngularJS to write the value of the model with the name xinchao.tieude in the HTML section.

Controller component in AngularJS

Controller is the following part:

 

The above code registers a controller function with the name ViduController in AngularJS module with the name ungdungdautien . We will learn more about the Modules and Controller Components in the corresponding chapters. The controller function is registered with AngularJS by calling angular.module (.) function. Controller (.).

The $ scope parameter passed to the controller function is a model . The controller function adds a JavaScript object, xinchao , and adds the tieude field to that object.

Execute AngularJS application first

After you save the code under the name viduAngularJS.html and open it under any web browser. You will see the results section as follows:

Instructions for installing AngularJS Picture 3Instructions for installing AngularJS Picture 3

When the above page is loaded in that browser, the following will happen:

The HTML document will be loaded into the browser, estimated by the browser, AngularJS JavaScript loaded, the global objects of AngularJS are initialized. Then, JavaScript will register the controller function for execution.

Next AngularJS browses HTML elements to test AngularJS applications and views. When the view is found, it connects the view to the corresponding controller feature.

Next, AngularJS implements controller functions, and returns the result to the view with data that the model is initialized in the controller section. The website is completely uploaded.

According to Tutorialspoint

Previous lesson: Create a table in AngularJS

Next article: MVC structure in AngularJS

4 ★ | 1 Vote