服务service

在ng中 服务 是 一种单例对象，所谓单例，服务在每一个应用中只会被实例化一次。

功能：为应用提供数据和对象
两大类：①内置的服务 ②自定义服务

如果在控制器中，使用ng中内置的服务，需要在控制器的回调函数中
①将对应的服务给注入进来
②使用服务所提供的数据和对象

app.controller('myCtrl',function($scope,$location){
var url = $location.absUrl();
});

---

控制器和作用范围

$scope与$rootScope：
$scope是$rootScope的子作用域控制对象，$rootScope的id为1，其他的为2,3....

不同的控制器之间，所对应的作用域控制对象($scope),之间是相互隔离的，如果要共享数据，怎么办？

借助$rootScope这个根作用域控制对象来实现。

如果父作用域对象想要调用子作用域对象的变量或者方法，ng提供了2个方法：
①$broadcast 将事件从父亲传递给子级
$scope.$broadcast(eventName,data);

②$emit 将事件从子级传递给父亲
$scope.$emit(eventName,data);

接收：
$scope.$on(eventName,function(event,data){

})

---

app.controller('myCtrl', function ($scope,$rootScope) {
    console.log($scope);          //$id=2
    console.log($rootScope);      //$id=1并且是根作用域
})

---

<div ng-controller="myCtrl01">
    <p>{{number}}</p>     //100
    <div ng-controller="myCtrl02">
        <p>{{number}}</p> //100
        <div ng-controller="myCtrl03">
            <p>{{school}}</p> //Tarna
        </div>
    </div>
</div>
<script>

    var app = angular.module('myApp', ['ng']);
    app.controller('myCtrl01', function ($scope,$rootScope) {
        $rootScope.number = 100;
    })
    app.controller('myCtrl02', function ($scope,$rootScope) {
        $rootScope.school='Tarna'
    })
    app.controller('myCtrl03', function ($scope,$rootScope) {
    })

---

父子事件调用

<div ng-controller="myCtrl01">                      parent控制器
    <button ng-click="funcCall()">调用子元素当中的方法</button>  
    <div ng-controller="myCtrl02">                  儿子控制器
        <button ng-click="toChild()">调用</button>
        <div ng-controller="myCtrl03">              孙子控制器
            {{count}}
        </div>
    </div>
</div>
<script>
    var app = angular.module('myApp', ['ng']);
    app.controller('myCtrl01', function ($scope) {
        $scope.$on('event_parent',function(event,data){     //$on就是接收用的，不管是子传父还是父传子，
            console.log("接受到了event_parent事件");
            console.log(data);
            $scope.funcCall=data;
        })
    });
    app.controller('myCtrl02', function ($scope) {
        $scope.toParent=function(){
            console.log('toParent function is called')
        };
        $scope.toChild=function(){
            $scope.number=10;
            $scope.$broadcast('event_child', $scope.number);  向子级传
        };
        $scope.$emit('event_parent',$scope.toParent);         向父级传

    });
    app.controller('myCtrl03', function ($scope) {
        $scope.$on('event_child',function(event,data){
            console.log("接受到了event_son事件");
            console.log(data);
            $scope.count=data;                                 接收后，最好存在当前控制器的方法或变量中   
        })
    });

---

服务依赖注入

 $interval  定时器

<div ng-controller="myCtrl">
    <p>{{num}}</p>
</div>
<script>
    var app = angular.module('myApp', ['ng']);
    app.controller('myCtrl', function ($scope,$interval) {      注入
        $scope.num=0;
     var timer=$interval(function(){
            $scope.num++;
         if ($scope.num>30){
             $interval.cancel(timer)             取消定时器
         }
        },100)
    })

---

$http  Ajax
JSON：片段

[

  {"name":"李磊","age":18,"score":90},
  {"name":"韩梅梅","age":23,"score":60},
  {"name":"王大治","age":25,"score":70},
  {"name":"小明","age":31,"score":82}
]
JS:gety

app.controller('myCtrl', function ($scope,$http) {
    $http.get('data/text.json').success(function(data){  //获取JSON数据
        console.log(data)
    })
})

如果要发起post请求，必须设置头信息，设置的方式：
$http.defaults.headers.post = {'Content-Type':'application/x-www-form-urlencoded'};

var app = angular.module('myApp', ['ng']);
app.controller('myCtrl', function ($scope,$http) {
    //an1.5以下版本使用
    $http.post('data/text.json').success(function(data){
        console.log(data)
    })
    $http.defaults.headers.post = {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})

---

自定义服务
1.factory:

//    创建服务
    app.factory('$show',function(){
        return{
            show:function(){
                alert('hello')
            }
        }
    });
//    注入服务
    app.controller('myCtrl', function ($scope,$show) {
        $scope.callShow=function(){
            $show.show()
        }
    })
2.service

//    创建服务
    app.service('$show',function(){
        this.num=10;
        this.showFun=function(){
            alert('您好'+this.num)
        }
    });
//    注入服务
    app.controller('myCtrl', function ($scope,$show) {
        $scope.callF=function(){
            $show.showFun();
        }
    });

---

路由

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <script src="js/angular.js"></script>
    <script src="js/angular-route.js"></script>
    <title>Title</title>
</head>
<body>
<div ng-view>
      加载代码片段的地方
</div>
<script>
    var app = angular.module('myApp', ['ng','ngRoute']);

//    配置路由词典
    app.config(function($routeProvider){
        $routeProvider  
                .when('/myLogin',{
            templateUrl:'tpl/login.html',   样板地址
            controller:'loginCtrl'          配置控制器
        })
                .when('/myMain',{
                    templateUrl:'tpl/main.html',
                    controller:'mainCtrl'
                })
                //传参
                .when('/myMain/:id',{
                    templateUrl:'tpl/main.html',
                    controller:'mainCtrl'
                })
                .otherwise({redirectTo:'/myLogin'})
    })
    app.controller('loginCtrl', function ($scope,$location) {
        $scope.jump=function(){
            $location.path('/myMain')
        }
    });
    app.controller('mainCtrl', function ($scope,$location,$routeParams) {
        $scope.id=$routeParams.id;
        console.log($scope.id)
        $scope.jump=function(arg){
            $location.path(arg)
        }
    });

</script>
</body>
</html>

代码片段：

<h1>主页面</h1>
<a href="#/myLogin">跳转到登陆页面</a>
<button ng-click="jump('/login.html')">跳转到登陆页面</button>

<h1>登录界面</h1>
<a href="#/myMain/10">跳转到主页面</a>
<button ng-click="jump()">跳转到主页面</button>

---

动画：
1.引入JS.css

<link rel="stylesheet" href="css/test.css">

<script src="js/angular-animate.js"></script>

2.加载模块

var app = angular.module('myApp', ['ng','ngRoute','ngAnimate']);

3.view加载

<div class="page" ng-view>

</div>
4.css内容：

body{
  overflow: hidden;
}
.page {
  position: absolute;
   100%;
}
.page.ng-enter,
.page.ng-leave {
  -webkit-transition: .5s linear all;
  -moz-transition: .5s linear all;
  -ms-transition: .5s linear all;
  -o-transition: .5s linear all;
  transition: .5s linear all;
}
/*׼���뿪*/
.page.ng-leave {
  left: 0;
  opacity: 1;
}
/*�뿪���*/
.page.ng-leave.ng-leave-active {
  left: -100%;
  opacity: 0;
}
/*�տ�ʼ����*/
.page.ng-enter {
  left: 100%;
  opacity: 0;
}
/*�������*/
.page.ng-enter.ng-enter-active {
  left: 0;
  opacity: 1;
}