AngularJS Learning (1), AngularJS Learning (
AngularJS is a structure framework designed for Dynamic WEB applications. It allows you to use HTML as the template language. by extending the HTML syntax, you can build your application components more clearly and concisely. Its innovation lies in the use of data binding and dependency injection, which frees you from writing a lot of code. All of these are implemented through Javascript on the browser, which makes it perfectly integrated with any server-side technology.
AngularJS uses ng-directives to expand HTML.
Ng-app is a program that defines an AngularJS application.
The ng-model command binds the element value (such as the value of the input field) to the application.
The ng-bind command binds application data to HTML
Ng-init command to initialize AngularJS Application variables
AngularJS expressions are written in double braces: {expression }}.
AngularJS expressions bind data to HTML, which is similar to the ng-bind command.
AngularJS will "output" data at the position where the expression is written.
AngularJS expressions are similar to JavaScript expressions: they can contain text, operators, and variables.
Instance {5 + 5 }}or {firstName + "+ lastName }}
Example:
<! DOCTYPE html> <body> <div ng-app = ""> <p> in the input box, enter: </p> <p> Name: <input type = "text" ng-model = "name"> </p> <p ng-bind = "name"> </p> <p ng-init =" age = 22 "> </p> <p> age: <span ng-bind = "age"> </span> </p> <div> AngularJS expression: {5 + 5 }}</div> <script src = "// www. w3cschool. cc/try/angularjs/1.2.5/angular. min. js "> </script> </body>
AngularJS automatically starts when the page is loaded,
Ng-app Command tells AngularJS,
The element is the owner of AngularJS applications.
The ng-model command binds the value of the input field to the application variable name.
The ng-bind command binds the application variable name to the innerHTML of a certain stage.
Ng-init command to initialize AngularJS application variable age
AngularJS expressions are written in double braces: {5 + 5 }}.