angular.js四大特征：mvc模式、双向绑定、依赖注入、模块化设计
法则：高内聚低耦合
1.表达式{{}}：
使用angular需要引入<script src="angular.min.js"></script>
同时在body添加：ng-app
<html><head><title>AngularJSDEMO-1表达式</title><script src="angular.min.js"></script></head><body ng-app>{{100+100}}</body></html>2.双向绑定：
ng-model="name"
<html><head> ???<title>AngularJSDEMO-2双向绑定</title> ???<script src="angular.min.js"></script></head><body ng-app>请输入姓名：<input ng-model="name"><input ng-model="name">{{name}}</body></html>3.初始化指令
ng-init="name=‘程大海‘"将name初始化为程大海
<html><head> ???<title>AngularJSDEMO-初始化指令</title> ???<script src="angular.min.js"></script></head><body ng-app ng-init="name=‘程大海‘">请输入姓名：<input ng-model="name"><input ng-model="name">{{name}}</body></html>4.控制器
<html><head> ???<title>AngularJSDEMO-控制器</title> ???<script src="angular.min.js"></script> ???<script> ???????//建立模块 ???????var app = angular.module("myApp",[]) ???????//创建控制器 ???$scopek控制器和视图层交互数据桥梁 ???????app.controller("myController",function($scope){ ???????????$scope.add= function(){ ???????????????return parseInt( $scope.x)+parseInt($scope.y); ???????????} ???????????????}); ???</script> ???????</head><body ng-app="myApp" ng-controller="myController" > 第一个数：<input ng-model="x"> 第二个数：<input ng-model="y"> {{add()}}</body></html>5、事件指令
<html><head> ???<title>AngularJSDEMO-2双向绑定</title> ???<script src="angular.min.js"></script> ???<script> ???????//建立模块 ???????var app = angular.module("myApp",[]) ???????//创建控制器 ???$scopek控制器和视图层交互数据桥梁 ???????app.controller("myController",function($scope){ ???????????$scope.add= function(){ ???????????????$scope.c= parseInt( $scope.x)+parseInt($scope.y); ???????????} ???????????????}); ???</script> ???????</head><body ng-app="myApp" ng-controller="myController" > 第一个数：<input ng-model="x"> 第二个数：<input ng-model="y"> <button ng-click="add()">运算</button>{{c}}</body></html>6、循环数组
<html><head> ???<title>AngularJSDEMO循环数组</title> ???<script src="angular.min.js"></script> ???<script> ???????//建立模块 ???????var app = angular.module("myApp",[]) ???????//创建控制器 ???$scopek控制器和视图层交互数据桥梁 ???????app.controller("myController",function($scope){ ???????????$scope.list = [102,2030,1023,123,23]; ???????????????}); ???</script> ???????</head><body ng-app="myApp" ng-controller="myController" > ?<table> ???<tr ng-repeat="x in list"> ???????<td>{{x}}</td> ???</tr> </table></body></html>7.循环对象数组
<html><head> ???<title>AngularJSDEMO循环数组</title> ???<script src="angular.min.js"></script> ???<script> ???????//建立模块 ???????var app = angular.module("myApp",[]) ???????//创建控制器 ???$scopek控制器和视图层交互数据桥梁 ???????app.controller("myController",function($scope){ ???????????$scope.list = [ ???????????{name:"张三",shuxue:100,yuwen:100}, ???????????{name:"lisi",shuxue:22,yuwen:2}, ???????????{name:"wangwu",shuxue:33,yuwen:1}] ???????????????}); ???</script> ???????</head><body ng-app="myApp" ng-controller="myController" > ?<table> ???<tr> ???????<td>姓名</td> ???????<td>数学</td> ???????<td>语文</td> ???</tr> ???<tr ng-repeat="entity in list"> ???????<td>{{entity.name}}</td> ???????<td>{{entity.shuxue}}</td> ???????<td>{{entity.yuwen }}</td> ???</tr> ?????</table> ?</body></html>8.内置服务
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>angular入门小demo</title> ???<script src="angular.min.js"></script> ???????????<script> ???????//建立模块 ???????var app = angular.module("myApp",[]) ???????//创建控制器 ???$scopek控制器和视图层交互数据桥梁 ???????app.controller("myController",function($scope,$http){ ???????????$scope.findList= function(){ ???????????????$http.get("data.json").success(function(response){ ???????????????????$scope.list = response; ???????????????}) ???????????} ???????????????}); ???</script></head><body ng-app="myapp" ng-controller="controller" ng-init="findList"> <table> ???<tr> ???????<td>姓名</td> ???????<td>数学</td> ???????<td>语文</td> ???</tr> ???<tr ng-repeat="entity in list"> ???????<td>{{entity.name}}</td> ???????<td>{{entity.shuxue}}</td> ???????<td>{{entity.yuwen }}</td> ???</tr> ?????</table> </body></html>angular.js
原文地址：https://www.cnblogs.com/jinyu-helloword/p/10459482.html