AngularJs 快速入门参考代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<script src=”http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js”></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
1.使用ng-model传值
<div >
<p>输入name : <input type=”text” ng-model=”name1″></p>
<h1>Hello {{name1}}</h1>
</div>
2.ng-init初始化 很少用 一般用 controller
<div ng-init=”name2=’John'”>
<p>初始化名字 <span ng-bind=”name2″></span></p>
</div>
3.表达式的使用
<div >
<p>我的第一个表达式： {{ name1 + name2 }}</p>
</div>
<h1>AngularJS 实例</h1>
4.ng-init初始化一个对象 类似于jason格式
<div ng-init=”person={firstName:’John’,lastName:’Doe’}”>
<p>姓为 {{ person.lastName }}</p>
</div>
5.ng-init初始化一个数组 ng-repeat进行数据的遍历
<div ng-init=”names=[‘A’,’B’,’C’]”>
<ul><li ng-repeat=”x in names”>{{x}}</li></ul>
</div>
6.定义一个控制器 js代码可外置
<div ng-app=”myApp” ng-controller=”myCtrl”>
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.carname = “Volvo”;
});
</script>
7.controller受 ng-model影响
<div ng-app=”myApp” ng-controller=”myCtrl”>
<input ng-model=”name”/>
<h1>{{name}}</h1>
</div>
<script>
var app = angular.module(‘myApp’,[]);
app.controller(‘myCtrl’,function($scope){
$scope.name=”testname”;
});
</script>
8.$rootScope 类似于全局变量
<div ng-app=”myApp” ng-controller=”myCtrl”>
<ul><li ng-repeat=”x in names”>{{x}}{{h}}</li></ul>
</div>
<script>
var a=’hehe’;//给 ajax 传值 提供了可能
var app = angular.module(‘myApp’,[]);
app.controller(‘myCtrl’,function($scope){
$scope.names=[‘A’,’B’,’C’];
$scope.h=a;
});
</script>
9.controller 控制器方法
<div ng-app=’myApp’ ng-controller=’myCtrl’>
<h1>{{fullname()}}</h1>
</div>
<script>
var app = angular.module(‘myApp’,[]);
app.controller(‘myCtrl’,function($scope){
$scope.aname=’A’;
$scope.bname=’B’;
$scope.fullname=function(){
return $scope.aname+’ ‘+$scope.bname;
}
});
</script>
10.controller升级版
<div ng-app=’myApp’ ng-controller=’myCtrl’>
<ul><li ng-repeat=’x in names’>{{x}}</li></ul>
</div>
<script>
angular.module(‘myApp’,[]).controller(‘myCtrl’,function($scope){
$scope.names=[‘A’,’B’,’C’];
});
</script>
11.过滤器uppercase大写 lowercase 格式化字符串为小写
<div ng-app=’myApp’ ng-init=’name=”aaa”‘>
{{name | currency}}
</div>
<script>
angular.module(‘myApp’,[]);
</script>
12. currency 格式化数字为货币格式
<div ng-app=’myApp’ ng-init=’name=”aaa”‘>
数量：<input type=’number’ ng-model=’quantity’>
单价：<input type=’number’ ng-model=’price’>
<p>总价：{{quantity*price | currency}}</p>
</div>
<script>
angular.module(‘myApp’,[]);
</script>
13.orderBy 过滤器根据表达式排列数组
<div ng-app=’myApp’ ng-controller=’myCtrl’>
<ul><li ng-repeat=’x in names | orderBy : “num”‘>{{x.num}} {{x.name}}</li></ul>
</div>
<script>
angular.module(‘myApp’,[]).controller(‘myCtrl’,function($scope){
$scope.names=[{num:2,name:’B’},{num:3,name:’C’},{num:1,name:’A’}];
});
</script>
14.服务 $location.absUrl() 返回当前页面的 URL 地址
<div ng-app=’myApp’ ng-controller=’myCtrl’>
{{url}}
</div>
<script>
angular.module(‘myApp’,[]).controller(‘myCtrl’,function($scope,$location){
$scope.url=$location.absUrl();
});
</script>
15.$http 服务
<div ng-app=’myApp’ ng-controller=’myCtrl’>
{{mydata}}
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope, $http) {
$http.get(“syscfg/workermsg.action?fn=angular”).then(function (response) {
$scope.mydata = response.data;
});
});
</script>
16.$timeout 服务 定时器
<div ng-app=’myApp’ ng-controller=’myCtrl’>
{{myHeader}}
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope, $timeout) {
$scope.myHeader = “Hello World!”;
$timeout(function () {
$scope.myHeader = “How are you today?”;
}, 2000);
});
</script>
17.$interval 服务 间隔重复执行 心跳器
<div ng-app=’myApp’ ng-controller=’myCtrl’>
{{theTime}}
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>
18.创建自定义服务
<div ng-app=’myApp’ ng-controller=’myCtrl’>
{{hex}}
</div>
<script>
var app = angular.module(‘myApp’, []);
app.service(‘hexafy’, function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller(‘myCtrl’, function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>
19.过滤器中，使用自定义服务
<div ng-app=”myApp”>
<input type=’number’ng-init=’num=0′ ng-model=’num’/>
<h1>{{num | myFormat}}</h1>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.service(‘hexafy’, function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter(‘myFormat’,[‘hexafy’, function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</script>
20.AngularJS $http 存在跨域问题无法请求 需放置本地文件
<div ng-app=’app’ ng-controller=’ctrl’>
<ul><li ng-repeat=’x in names’>{{x.Name+’,’+x.Country+’,’+x.City}}</li></ul>
</div>
<script>
angular.module(‘app’,[]).controller(‘ctrl’,function($scope,$http){
$http.get(“http://www.runoob.com/try/angularjs/data/Customers_JSON.php”)
.success(function(response){$scope.names = response.records;});
});
</script>
21.下拉框select
<div ng-app=”myApp” ng-controller=”myCtrl”>
<select ng-model=”selectedSite” ng-options=”x.site for x in sites”>
</select>
<p><a href=”{{selectedSite.url}}”>{{selectedSite.site}}</a></p>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.sites = [
{site : “Google”, url : “http://www.google.com”},
{site : “Runoob”, url : “http://www.runoob.com”},
{site : “Taobao”, url : “http://www.taobao.com”}
];
});
</script>
22.表格 css 参考在头部 利用oderBy排序 $index+1显示排序
<div ng-app=”myApp” ng-controller=”myCtrl” >
<table >
<tr ng-repeat=’x in sites | orderBy : “num”‘>
<td>{{$index+1}}</td>
<td>{{x.site}}</td>
<td>{{x.url}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.sites = [
{num:3,site : “Google”, url : “http://www.google.com”},
{num:1,site : “Runoob”, url : “http://www.runoob.com”},
{num:2,site : “Taobao”, url : “http://www.taobao.com”}
];
});
</script>
</body>
</html>
