Angular.js简单介绍
石喜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<input type="text" ng-model="Count" />
{{Count}}
</div>
<div>
{{5+4}}
</div>
<div ng-init="a=1;b=3">
{{a*b}}
</div>
<div ng-init="num=1;price=30">
总价：<span ng-bind="num*price"></span>
</div>
<div ng-init="FirstName='Jack';LastName='Sparrow'">
{{FirstName+" "+LastName}}
</div>
<div ng-init="FirstName1='Louis';LastName2='Lain'">
<span ng-bind="FirstName1+' '+LastName2"></span>
</div>
<div ng-init="Person={name:'jack',age:12}">
{{Person.name+" "+Person.age}}
</div>
<div ng-init="NewPerson={FirstName:'jacksss',Sex:'female'}">
<span ng-bind="NewPerson.FirstName"></span>
</div>
<div ng-init="Point=[32,43,23,543,4,543,4345,345345]">
{{Point[3]}}
</div>
<div ng-init="Array=[23,54,34,23,5,4,34,2,4,5,34,6,5,55]">
<span ng-bind="Array[4]"></span>
</div>
<div ng-init="EngLish='Jack'">
<input type="text" ng-model="EngLish" />{{EngLish}}
</div>
<div ng-init="price2=3;num2=3">
单价：<input type="number" ng-model="price2" />
数量：<input type="number" ng-model="num2" />
{{price2*num2}}
</div>
<div ng-init="Names=['jack','smith','john']">
<ul>
<li ng-repeat="x in Names">{{x}}</li>
</ul>
</div>
<div ng-init="NameList=[{names:'jack',age:23},{names:'wade',age:34}]">
<ul>
<li ng-repeat="x in NameList">
{{x.names+" "+x.age}}
</li>
</ul>
</div>
<runoob-directive></runoob-directive>
名字：<input type="text" ng-model="realName" />
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.Count = 12;
});
app.directive("runoobDirective", function () {
return {
template: 'test'
}
});
//app2 = angular.module('myApp2', []);
app.controller('myCtrl', function ($scope) {
$scope.realName = 'JACKSON'
});
</script>
</html>
类似资料：