A, angular expression
<head>
<Meta charset = "UTF-. 8">
<title> the Title </ title>
<Script the src = "JS / angular.min.js"> </ Script>
<-!
To use the angular 1, must be related to the introduction of the frame
2 must be written in an attribute ng-app page indication angular js application body
3, if necessary to show expression data pages, the two braces need to write, for example: {{} variable or expression }
->
</ head>
<body ng-App>
{100} {100} *
</ body>
two, two-way binding
<head>
<Meta charset = "UTF-. 8">
<title> the Title </ title>
<Script the src = "JS / angular.min.js"> </ Script>
</ head>
<body ng-App>
< ! -
ng-model refers to command input named; if the form data and the background may be acquired in accordance with the value of the attribute name ng-model in the
page may also be obtained by the value of this property, the nature of the data into the current page $
scope stored
->
Please enter your name: <Model-ng the iNPUT = "myName"> <br>
{{}} myName, hello! ! !
</ body>
III initialization command
<head>
<Meta charset = "UTF-. 8">
<title> the Title </ title>
<Script the src = "JS / angular.min.js"> </ Script>
</ head>
<body ng App-NG- init = "myName = 'John Doe'">
<-!
ng the init-initialization command is, as long as the page is loaded on the implementation of the init-ng
$ scope is angular js built-in objects, there is the requested data and the corresponding data, and method
->
Please enter your name: <iNPUT = ng-Model "myName"> <br>
{} {} myName, Hello
</ body>
IV.
<head>
<Meta charset = "UTF-. 8">
<title> the Title </ title>
<Script the src = "JS / angular.min.js"> </ Script>
<Script>
/ *
*. 1, App = var angular.module ( 'myApp', []);
* myApp define a module after the module using the name of the statement on the label body
* 2, app.controller ( 'myController', function ($ scope)} {
* in the module after the declaration statement using a controller on the controller body tag
* /
var App = angular.module ( 'myApp', []); // myApp module defines a
data controller and method definitions // $ scope response to the request
app.controller ( 'myController', function ($ scope) {
$ scope.add = function () {
return the parseInt ($ scope.X) + the parseInt ($ scope.Y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
X:<input ng-model="X"><br>
Y:<input ng-model="Y"><br>
运算结果：{{add()}}
</body>
五、事件指令
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
//定义app模块
var app=angular.module('myApp',[]);
//定义myController控制器
app.controller('myController',function ($scope) {
$scope.add=function () {
$scope.Z=parseInt($scope.X)+parseInt($scope.Y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
X:<input ng-model="X"><br>
Y:<input ng-model="Y"><br> VI loop array</ body>results: the Z {} {}
<Button-ng the Click = "the Add ()"> operational </ button> <br>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('myApp',[]);
//定义控制器
app.controller('myController',function ($scope) {
//声明数组list
$scope.list=[123,12,22,1323];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="list in list">
<td>{{list}}</td>
</tr>
</table>VII cyclic object through the array
</ body>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('myApp',[]);
//定义控制器
app.controller('myController',function ($scope) {
//定义数组
$scope.list=[
{name:'lisi',saylary:12120,sui:120},
{name:'zhangsan',saylary:2200,sui:20},
{name:'张三',saylary:391073,sui:390}
]
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>工资</td>
<td>税收</td>
</tr>
<tr ng-repeat="list in list">
<td>{{list.name}}</td>
<td>{{list.saylary}}</td>
<td>{{list.sui}}</td>
</tr>
</table>
八、内置服务
<head>
<Meta charset = "UTF-. 8">
<title> the Title </ title>
<Script the src = "JS / angular.min.js"> </ Script>
<Script>
var App = angular.module ( ' myApp ', []);
// definition of a controller, $ a http Uno main http requests to transmit, ajax request, $ http.get get request to send
app.controller (' myController ', function ( $ scope, $ HTTP) {
$ scope.findAll = function () {
$ http.get ( 'the data.json') Success (function (Response.) {
$ scope.list = Response;
});
}
});
</ Script>
< / head>
<body ng-App = "myApp" = ng-Controller "myController"ng-init="findAll()">
<table>
<tr>
<td>姓名</td>
<td>工资</td>
<td>税收</td>
</tr>
<tr ng-repeat="list in list">
<td>{{list.name}}</td>
<td>{{list.salary}}</td>
<td>{{list.sui}}</td>
</tr>
</table>
</body>