Instructions for installing AngularJS

  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:

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