Example of using NG-BIND directive to implement one-way binding in ANGULARJS_AngularJS

After briefly introducing the AngularJS framework, this article uses an example to demonstrate the use of {{}} interpolation method and ng-bind directive.

Unlike jquery, which is just a class library that strengthens and simplifies front-end development, angularjs is a complete web front-end framework, so the learning curve is much higher.

Angularjs feels to me similar to Java's Spring framework. It is in the central container position and glues other components together. Many of its built-in components can already meet general scenarios. In special scenarios, we can expand according to the framework ideas.

Let’s start with the most basic content:

Copy code The code is as follows:

Directly output string literal value

Hello {{"World"}}

---

Use placeholders to output variables

Hello {{greeting}}

---

Use ng-bind directive to output variables

Hello

---

<script><br> Function HelloController($scope) {<br>           $scope.greeting = "World";<br> }<br> </script>

ng-app declares an angularjs module and is limited to the scope of declaring html tags.

ng-controller declares an angularjs controller in the module. There can be multiple controllers, but the context is isolated, and the scope of the controller should be narrowed as much as possible.

{{}} is the interpolation syntax of angularjs, similar to JSP's EL expression ${}. The first output is because "World" is a literal value, and the program will output it directly; the second output is because greeting is a variable defined in the controller, so the value corresponding to the variable will also be output, which is also World; the third output The built-in ng-bind attribute directive of angularjs is used. The final result is equivalent to {{}}, but note that the directive = is followed by a string, so do not make a mistake.

The HelloController in js corresponds to the instructions on the body. The input parameter $scope is a service provided by the framework, which represents the context of the current controller. There are other similar services. The framework will automatically inject them. You will learn about them later. The method body has only one line and defines a variable on $scope, which is the variable referenced in the html code.

This article is very simple, just copy the code and it will run. Note that angular.min.js is the latest version of the 1.2 branch. The same code cannot be run with version 1.3.0. The reason is unknown. It may be related to 1.3.0 not being the final Release version.