AngularJS基础入门
转载：https://blog.csdn.net/xyphf/article/details/53041043
1、AngularJS 表达式把数据绑定到 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.js"></script>
</head>
<body>
<div ng-app="">
<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
2、ng-bind 指令把应用程序数据绑定到 HTML 视图，与{{}}类似；
<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>ng-bind 指令把应用程序数据绑定到 HTML 视图。</title>
<script src="angular.js"></script>
</head>
<body>
<input ng-model="aaa" type="text" value="" />
<span ng-bind="aaa"></span>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
3、ng-bind 指令把应用程序数据计算并绑定到 HTML 视图
<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>ng-bind 指令把应用程序数据计算并绑定到 HTML 视图</title>
<script src="angular.js"></script>
</head>
<body>
<input ng-model="a" type="text" value="0" /><br /><br />
<input ng-model="b" type="text" value="0" /><br /><br />
<span ng-bind="a*b"></span>
{{a*b}}
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
4、修改样式
<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>AngularJS 表达式修改样式</title>
<script src="angular.js"></script>
</head>
<body>
<input ng-model="a" type="text" value="" /><br /><br />
<div style="{{a}}"></div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
5、修改class类名
<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>修改class类名</title>
<style>
.box1{width:200px; height:200px; background:#ccc;}
.box2{width:200px; height:200px; background:red;}
.box3{width:200px; height:200px; background:green;}
.active{ font-size:30px;}
</style>
<script src="angular.js"></script>
</head>
<body>
<input ng-model="a" type="text" value="" /><br /><br />
<div class="{{a}}">和派孔明on</div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
6、ng-init 初始化
<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>ng-init 初始化</title>
<script src="angular.js"></script>
</head>
<body ng-init="a=12;b=5;">
<input ng-model="a" type="text" value="0" /><br /><br />
<input ng-model="b" type="text" value="0" /><br /><br />
{{a*b}}
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
7、angularJS环境问题
<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>控制器与模块</title>
<script src="angular.js"></script>
<script>
/*
控制器:
1 获取你的app
2 定义控制器
3 使用控制器
*/
//1 获取你的app
var app = angular.module("index",[]);
//2 定义控制器
//作用域（scope）
app.controller("main",function($scope){
$scope.a = 12;
});
</script>
</head>
<!--3 使用控制器 控制器与模块-->
<body ng-controller="main" >
{{a}}
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
8、
AngularJS遍历循环 例一;
<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>AngularJS遍历循环 例一</title>
<script src="angular.js"></script>
</head>
<body ng-init="arr=[12,4,5,6,8];">
<ul>
<li ng-repeat="value in arr">{{value}}</li>
</ul>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
AngularJS遍历循环 例二;
<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>AngularJS遍历循环 例二</title>
<script src="angular.js"></script>
</head>
<!-- ng:数据不能重复！ -->
<body ng-init="arr=[{name:'张三',age:18},{name:'李四',age:18},{name:'王五',age:18}];">
<ul>
<li ng-repeat="item in arr">我叫{{item.name}},今年{{item.age}}岁！</li>
</ul>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
9、$http数据
<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title></title>
<script src="angular.js"></script>
<script src="ajax.js"></script>
<script>
var app = angular.module("index",[]);
app.controller("ajax",function($scope,$http){
$scope.arr = [];
//$http.get/post/jsonp(url,{params:{data}}).success(fn).error(fn);
$http.get("a.txt",{params:{}}).success(function(arr){
$scope.arr = arr;
}).error(function(){
alert("失败");
});
});
</script>
</head>
<body ng-controller="ajax">
<ul>
<li ng-repeat="item in arr">{{item}}</li>
</ul>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
10、
jsonp跨域数据 例一：
<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>jsonp跨域数据</title>
<script src="angular.js"></script>
<script src="ajax.js"></script>
<script>
var app = angular.module("index",[]);
app.controller("jsonp",function($scope,$http){
$scope.wd = "";
$scope.arr = [];
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
$scope.show = function(){
//发送jsonp请求
$http.jsonp(url,{params:{wd:$scope.wd,cb:"JSON_CALLBACK"}})
.success(function(json){
//alert("成功" + JSON.stringify(json));
$scope.arr = json.s;
}).error(function(){
alert("失败");
});
};
});
</script>
</head>
<body ng-controller="jsonp">
<input ng-model="wd" type="text" value="" ng-keyup="show();" />
<ul>
<li ng-repeat="item in arr">{{item}}</li>
</ul>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
jsonp跨域数据 例二：
<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>jsonp跨域数据</title>
<script src="angular.js"></script>
<script src="ajax.js"></script>
<script>
var app = angular.module("index",[]);
app.controller("jsonp",function($scope,$http){
$scope.wd = "";
$scope.arr = [];
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
//监听 监视器
$scope.$watch("wd",function(){
//发送jsonp请求
$http.jsonp(url,{params:{wd:$scope.wd,cb:"JSON_CALLBACK"}})
.success(function(json){
$scope.arr = json.s;
});
});
});
</script>
</head>
<body ng-controller="jsonp">
<input ng-model="wd" type="text" value="" />
<ul>
<li ng-repeat="item in arr">{{item}}</li>
</ul>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
11、过滤器
<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>过滤器</title>
<script src="angular.js"></script>
</head>
<body ng-init="arr=[{name:'豆腐花',age:28},{name:'zns',age:16},{name:'如花',age:18}];">
<input ng-model="a" type="text" value="" />
<ul>
<li ng-repeat="item in arr| filter:a">我叫{{item.name}},今年{{item.age}}岁！</li>
</ul>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
12、
控制器一
<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>控制器</title>
<script src="angular.js"></script>
<script>
var app = angular.module("index",[]);
app.controller("test",function($scope){
//ng js环境 互通
$scope.a = 0;
$scope.b = 0;
$scope.sum = function(){
return parseInt($scope.a) + parseInt($scope.b);
};
});
</script>
</head>
<body ng-controller="test" >
<input ng-model="a" type="text" value="0" /><br /><br />
<input ng-model="b" type="text" value="0" /><br /><br />
{{sum()}}
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
控制器二：
<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>控制器</title>
<script src="angular.js"></script>
<script>
var app = angular.module("index",[]);
app.controller("test",function($scope){
//ng js环境 互通
$scope.a = 0;
$scope.b = 0;
$scope.parseInt = function(n){
return parseInt(n);
};
});
</script>
</head>
<body ng-controller="test" >
<input ng-model="a" type="text" value="0" /><br /><br />
<input ng-model="b" type="text" value="0" /><br /><br />
{{parseInt(a)+parseInt(b)}}
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
控制器三：
<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>控制器</title>
<script src="angular.js"></script>
<script>
var app = angular.module("index",[]);
app.controller("test",function($scope){
//ng js环境 互通
$scope.a = 0;
$scope.alert = function(n){
alert(n++);
};
});
</script>
</head>
<body ng-controller="test" >
<input ng-model="a" type="text" value="0" /><br /><br />
<input type="button" value="按钮" ng-click="alert(a);" /><br /><br />
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
控制器四：
<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>控制器</title>
<script src="angular.js"></script>
<script>
var app = angular.module("index",[]);
app.factory("data",function(){
var json = {};
json.userList = [
{name:"zhangsan",age:18},
{name:"liping",age:33},
{name:"HMM",age:20},
{name:"zns",age:17},
{name:"abcd",age:16}
];
return json;
});
app.controller("filterCtrl",function($scope,data){
$scope.data = data;
});
</script>
</head>
<body ng-controller="filterCtrl">
<input type="text" value="" ng-model="search.$"/>
<ul>
<li ng-repeat="item in data.userList|filter:search|limitTo:4|orderBy:'age'">{{item.name|lowercase}}|{{item.age}}</li>
</ul>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
13、
cookie一
<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>cookie</title>
<script src="angular.js"></script>
<script src="angular-cookies.min.js"></script>
<script>
var app = angular.module("index",["ngCookies"]);
app.controller("cookie",function($scope,$cookieStore,$http){
$cookieStore.put("name","zns");
$cookieStore.put("age",18);
$scope.name = $cookieStore.get("name");
$scope.age = $cookieStore.get("age");
//alert($scope.name);
//删除
$cookieStore.remove("age");
});
</script>
</head>
<body ng-controller="cookie">
{{name}}-----{{age}}
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
cookie二
<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>cookie</title>
<script src="angular.js"></script>
<script src="angular-cookies.min.js"></script>
<script>
var app = angular.module("index",["ngCookies"]);
app.controller("cookie",function($scope,$cookieStore){
$cookieStore.put("user",{name:"zns",age:20});
$scope.user = $cookieStore.get("user");
//alert($scope.name);
//删除
$cookieStore.remove("user");
});
</script>
</head>
<body ng-controller="cookie">
{{user}}
{{user.name}}-----{{user.age}}
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
14、隐藏显示；
<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>隐藏显示</title>
<style>
#div1{width:200px; height:200px; background:#ccc;/* display:none;*/}
</style>
<script src="angular.js"></script>
<script>
var app = angular.module("index",[]);
app.controller("test",function($scope){
$scope.a = true;
});
</script>
</head>
<body ng-controller="test">
<input type="button" value="显示隐藏" ng-click="a=!a" />
<div id="div1" ng-show="a"></div>
</body>
</html>