<div ng-app="" ng-init="firstName='John'">
<p>Try typing in the input box:</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>You entered: {{ firstName }}</p>
</div>
1.ng-app: Makes the variables in <div> parsed by Angular js
2.ng-init: Initialize application data. {{ firstName }} is a data binding expression for Angular js.
3.ng-model: Bind the element value (such as the value of the input field) to the application.
<div ng-app="" ng-init="quantity=4;price=5">
<h2>Price calculator</h2>
数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">
<p><b>总价：</b> {{ quantity * price }}</p>
</div>//The total price will be 20
4.ng-bind: Tell AngularJS to use the value of the given variable or expression to replace the content of the HTML element.
If the given variable or expression is modified, the HTML element specified to replace is also modified.
<div ng-app = "" ng-init = "myText = 'Hello World!'"> <p ng-bind="myText"></p> </div>//Run result: 'Hello World!'
5.ng-repeat: Repeat an HTML element
<app-div = "" heat = "names = ['1', '2', '3']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Will traverse the display: 1,2,3
6.
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {restrict : "A",
template : "<h1>Custom directive!</h1>"
};
});
</script>
</body>
Use the .directive function to add custom directives. It needs to be split with - when using it, runoob-directive
Setting the directive by setting the restrict attribute to "A" can only be invoked through the HTML element's attribute.