自定义指令directive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'>
<!-- directive:myTest -->
<div class="my-test"></div>
<div class="myTest"></div>
<div my-test></div>
<my-test></my-test>
<script src="./angular.min.js"></script>
<script>
var app = angular.module('myapp',[]);
app.controller('myctl',['$scope',function($scope){
}]);
app.directive('myTest' , function(){
return {
restrict:'ECMA', //E:元素 C:类 M:注释 A:属性
replace:true, //是否替换原元素
template:'<h1>文字</h1>' //模版要求只能有一个根元素
// templateUrl:'./url.html' //也可引入外部html文件
}
})
</script>
</body>
</html>
作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app='myapp' ng-controller='myctl' ng-init="nme='tim'">
<h1>myctl {{nme}}</h1>
<div class="two" ng-controller='two'>
<h2>two {{nme}}</h2>
<div class="three" ng-controller='three'>
<h3>three {{nme}}</h3>
</div>
</div>
<script src="./angular.min.js"></script>
<script>
var app = angular.module('myapp',[]);
app.controller('myctl',['$scope',function($scope){
// $scope.nme = 'tom'
}])
app.controller('two',['$scope',function($scope){
// $scope.nme = 'jack'
}])
app.controller('three',['$scope',function($scope){
}])
</script>
</body>
</html>
松开26行注释
app.controller('two',['$scope',function($scope){
$scope.nme = 'jack'
}])
自定义过滤器
能将一个单词的任意字母变为大写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'>
<div>{{ 'testing' | toBig : 5 }}</div>
<script src="./angular.min.js"></script>
<script>
var app = angular.module('myapp',[]);
app.controller('myctl',['$scope',function($scope){
}]);
app.filter( 'toBig' , function(){
return function( word , b ){
var word2 = word.split('')
word2.splice( b , 1 , word.charAt(b).toUpperCase() )
word2.join('')
return word2.join('') ;
}
})
</script>
</body>
</html>
传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'>
<div>{{ 'testing' | fn : 'a' : 'b' : 'c' }}</div>
<script src="./angular.min.js"></script>
<script>
var app = angular.module('myapp',[]);
app.controller('myctl',['$scope',function($scope){
}]);
app.filter( 'fn' , function(){
return function( word , one , two , three ){
console.log( word , one , two , three )
return word ;
}
})
</script>
</body>
</html>
服务
http服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'>
<h1>{{ name }}</h1>
<h1>{{ address }}</h1>
<script src="./angular.min.js"></script>
<script>
var app = angular.module('myapp',[]);
app.controller('myctl',['$scope','$http',function(scope,http){
http({
url:'./data.php',
method:'post',
}).success(function(dt){
scope.name = dt.name ;
scope.address = dt.addr ;
})
}]);
</script>
</body>
</html>
data.php
<?php
echo '{"name":"tom","addr":"usa"}';
?>
http的请求头
- headers:{‘Content-Type’:’application/json’}
app.controller('myctl',['$scope','$http',function(scope,http){
http({
url:'./data.php',
method:'post',
headers:{'Content-Type':'application/json'},
data:{sum:100,ctg:'physic'},
}).success(function(dt){
console.log(dt)
})
}]);
- headers:{‘Content-Type’:’application/x-www-form-urlencoded’}
app.controller('myctl',['$scope','$http',function(scope,http){
http({
url:'./data.php',
method:'post',
headers:{'Content-Type':'application/x-www-form-urlencoded'},
data:'sum=100&ctg=physic',
}).success(function(dt){
console.log(dt)
})
}]);
get请求
get请求,传参应该用params , 这样的话ng会自动将参数拼接到地址后面
data传参是给post用的
app.controller('myctl',['$scope','$http',function(scope,http){
http({
url:'./data.php',
method:'get',
params:{name:'tom',age:18},
}).success(function(dt){
console.log(dt)
})
}]);
JSONP
app.controller('myctl',['$scope','$http',function(scope,http){
http({
url:'./data.php',
method:'jsonp',
params:{
callback:'JSON_CALLBACK'
},
}).success(function(dt){
console.log(dt)
})
}]);
data.php
<?php
$fn = $_GET['callback'];
echo $fn.'({"name":"tom","addr":"usa"})';
?>
location
location.search() angular认为第一个#后面的?才是请求参数
location.search() angular认为第一个#后面的?才是请求参数
location.hash() angular认为第一个#不是锚点,后面再次出现的#才是锚点
$location.path() angular认为第一个#开始后面属于path
$interval $timeout
app.controller('myctl',['$scope','$interval','$timeout',function(scope , interval , timeout ){
var address = 0 ;
var t1 = interval( function(){
console.log( address++ )
if( address > 30 ){
interval.cancel(t1)
}
}, 100 );
}]);
timeout
app.controller('myctl',['$scope','$interval','$timeout',function(scope , interval , timeout ){
var t2 = timeout(function(){
console.log(9999)
},2000);
scope.btn = function(){
timeout.cancel(t2)
}
}]);
控制器里使用服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'>
<h1>{{ nowtime }}</h1>
<script src="./angular.min.js"></script>
<script>
var app = angular.module('myapp',[]);
app.controller('myctl',['$scope','$filter',function(scope,filter){
var now = new Date ;
var date = filter('date');
var now1 = date( now , 'yyyy-MM-dd');
scope.nowtime = now1;
}]);
</script>
</body>
</html>
自定义服务的两种方式
// 使用自定义服务
app.controller('myctl',['$scope','myservice',function(scope,ms){
ms.say('google')
}]);
//使用factory自定义的服务
app.factory( 'myservice' , ['$log' , function(log){
return {
say:function(word){
log.log('hello '+word)
}
}
}])
//使用service自定义服务
app.service('myservice' , ['$log' , function(log){
this.say = function(word){
log.log('你好,'+word )
}
}])
app.value
var app = angular.module('myapp',[]);
// 使用自定义服务
app.controller('myctl',['$scope','pi','version','$log',function(scope,p,v,log){
log.log(p);
log.log(v);
}]);
// 定义常量
app.value('pi',3.1415926);
app.value('version','1.0.0');
config配置
为angular新增一个过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'>
<h1>{{ 8 | test_filter }}</h1>
<script src="./angular.min.js"></script>
<script>
var app = angular.module('myapp',[]);
app.config(['$logProvider','$filterProvider',function($logProvider,$filterProvider){
//新增一个过滤器
$filterProvider.register('test_filter',function(){
return function(arg){
return arg*arg ;
}
})
}])
</script>
</body>
</html>
app.run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'>
<h1>{{ addr }}</h1>
<script src="./angular.min.js"></script>
<script>
var app = angular.module('myapp',[]);
app.controller('myctl',function(){})
// 可以直接运行$http服务
app.run(['$rootScope','$http',function($rootScope,$http){
$rootScope.addr = 'UN'
$http({
url:'./data.php',
method:'get',
}).success(function(dt){
console.log(dt)
})
}])
</script>
</body>
</html>
angular模块拆分到不同文件
目录结构
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app='myapp'>
<div ng-controller='controller1'>
<input type="text" ng-model='data1'>
<input type="text" ng-model='data1'>
</div>
<div ng-controller='controller2'>
<input type="text" ng-model='data2'>
<input type="text" ng-model='data2'>
</div>
<script src="../angular.min.js"></script>
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
(function(){
angular.module('myapp',['module1','module2'])
})()
module1.js
(function(){
angular.module( 'module1' , [])
.controller('controller1' , function($scope){
$scope.data1 = 100 ;
})
})()
module2.js
(function(){
angular.module( 'module2' , [])
.controller('controller2' , function($scope){
$scope.data2 = 200 ;
})
})()