<h1>注入依赖
<body ng-app="app" ng-controller="xmgController">
<p>{{name}}</p>
<script src="angular-1.5.8.js"></script>
<script>
// 1.创建模块
var app = angular.module('app',[]);
// 2.创建控制器
// 行内式注入
// []代表要导入的依赖,最后的回调函数就是导入之后给你传递的参数
app.controller('xmgController',['$scope',function (a) {
a.name = 'xmg';
}]);
//注入依赖格式app.controller('xmgController',['$scope','$location',function ($scope,$locale) {
// console.log($locale.absUrl());
//格式
}]);
// 2.推断式,此方法不推荐
// 在后面做代码构建的时候会将代码压缩,压缩的时候会把函数的形参改成一个字母
app.controller('xmgController1',function ($scope) {
$scope.name = 'app';
})
</script>
<h1>angular 中 $location, $timeout和$interval, $filter, $log, $http 概念
// $log服务:服务是一个对象或函数，对外提供特定的功能.
// 内建服务:
// 1: $location是对原生Javascript中location对象属性和方法的封装。
// 2: $timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。
// 3: $filter(过滤器)在控制器中格式化数据。
// 4: $log打印调试信息
// 5: $http用于向服务端发起异步请求。
// 6: 同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。
<h2>以后用最好都用angular封装的对象,使用原生会出问题的</h2>
<h1>$location服务
/*
$location == 一个完整的url
* 一个完整的网络地址包括哪几部分
* 1.协议头
* 2.域名(ip地址)
* 3.端口号(80)
* 4.文件地址
* 5.参数
* 6.hash值(锚点#)
// 在angular中不建议使用js的原生对象,有可能造成绑定数据失败
//建议使用angular封装的对象
for (key in location){
console.log(key + '-----' + location[key]);
}
*/
<title>04-$location服务</title>
</head>
<body ng-app="app" ng-controller="xmgController">
<script src="angular-1.5.8.js"></script>
<script>
// 1.创建模块
var app = angular.module('app',[]);
// 2.创建控制器
app.controller('xmgController',['$scope','$location',function ($scope,$location) {
console.log($location);
console.log($location.absUrl());
// 获取锚点之后的内容
console.log($location.url());
// 获取第二个锚点之后的内容
console.log($location.hash());
// 主机名
console.log($location.host());
// 返回当前url的子路径(也就是当前url#后面的内容,不包括参数)。
console.log($location.path());
console.log($location.search());
}]);
</script>
<h1>$log 了解就行不常用
<title>05-$log服务</title>
</head>
<body ng-app="app" ng-controller="xmgController">
<script src="angular-1.5.8.js"></script>
<script>
// 1.创建模块
var app = angular.module('app',[]);
// 2.创建控制器
app.controller('xmgController',['$scope','$log',function ($scope,$log) {
$log.info('普通信息');
$log.warn('警告信息');
$log.error('错误信息');
$log.log('打印信息');
$log.debug('调试信息');
//F12打印中可以看到结果
}]);
</script>
<h1>$timeout 一次定时器
//创建一次定时器
<body ng-app="app" ng-controller="zjController">
<p>{{msg}}</p>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller("zjController",['$scope','$timeout',function ($scope,$timeout) {
$scope.msg = 'xmg121';
$timeout(function () {
$scope.msg = 'hello'
},2000);
//angular中清楚定时器
var timerout = $timeout(function (regs) {
$scope.msg = 'hello';
alert(regs);
},2000,false,'a');
$timeout.cancel(timerout);
// 销毁定时器($timeout.cancel(timerout);)
//原生定时器(在angular中会出错,不这样写)
setTimeout(function (rgs) {
$scope.msg = 'hello';
console.log('rgs');
},2000,false,a);
定时器时间后面还可以传四个参数
$timeout (fn,delay,[invokeApply],[Pass]);
fn function() 一个将被反复执行的函数。
delay number 每次调用的间隔毫秒数值。
invokeApply boolean 如果设置为false，则避开脏值检查，否则将调用$apply。
Pass * 函数的附加参数。
<h1> $interval 多次定时器
创建多次定时器
<body ng-app="app" ng-controller="zjController1">
<p>{{num}}</p>
<script src="angular.js"></script>
<script>
app.controller('zjController1',['$scope','$interval',function ($scope,$interval) {
$scope.num = 1;
var timer = $interval(function () {
$scope.num += 1;
if ($scope.num == 5){
$interval.cancel(timer);
定时器num值到5时清楚定时器 $interval.cancel(timer);
}
},1000);
// $interval(fn,delay,[count],[invokeApply],[Pass]);多次定时器也可以传参不过比timeout多一个[count]参数,代表循环的次数
fn function() 一个将被反复执行的函数。
delay number 每次调用的间隔毫秒数值。
count number 循环次数的数值，如果没设置，则无限制循环。
invokeApply boolean 如果设置为false，则避开脏值检查，否则将调用$apply。
Pass * 函数的附加参数。
原生写法是这样的
var timer1 = setInterval(function () {
if(){
clearInterval(timer1);
}
},1000);
}])
</script>
网友评论