AngularJS is a JavaScript framework.
AngularJS directives
AngularJS directives are HTML attributes with an ng prefix.
-
ng-app directive defines an AngularJS application and the root element of an AngularJS application. It will auto-bootstrap (automatically initialize) the application when a web page is loaded.
-
ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
-
ng-bind directive binds application data to the HTML view.
Example: the letter you type in the input box will appear in <p ng-bind = "name"> simultaneously.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
- ng-init directive initializes AngularJS application variables.
Example: display is "The name is John"
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
You can use data-ng-, instead of ng-, if you want to make your page HTML valid.
AngularJS Expressions
Tow way to use expressions:
- inside double braces: {{ expression }}.
- inside a directive: ng-bind="expression".
Without the ng-app directive, HTML will display the expression as it is, without solving it.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
//My first expression: 10
<div ng-app>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
//My first expression: {{ 5 + 5 }}
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
It is the same using ng-bind:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
AngularJS Expressions vs. JavaScript Expressions
Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.
Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
AngularJS expressions support filters, while JavaScript expressions do not.
网友评论