AngularJS学习3-服务(service)/http服务/跨域

与view无关的，可以复用的代码就是service

其实就是库函数

比如location服务，和js里面的location对象差不多。只是封装了起来。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

 

http服务，封装了http的请求等操作

 

timeout/interval服务，就和nodejs里面的差不多

 

自定义服务

app.service('myService', function() {
    //todo
    }
});

 

 

http服务！

$http是Angular的一个核心服务，它有利于浏览器通过XMLHttpRequest 对象或者 JSONP和远程HTTP服务器交互。

是对XMLHttpRequest以及JSONP的封装

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

或者传类

$http({
    method: 'GET',
    url: '/someUrl'

1. headers:{
2. “Content-Type”:” // your config”
3. },
4. data:{ data: ” // your data” }
5. }

}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

以上代码的 get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题

 

JSON数据可以直接解析

//请求
//data是返回的JSON类，sites是里面的成员，是一个数组

$scope.names = response.data.sites;

//view
<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>



//JSON
{
    "sites": [
        {
            "Name": "菜鸟教程",
            "Url": "www.runoob.com",
            "Country": "CN"
        },
        {
            "Name": "Google",
            "Url": "www.google.com",
            "Country": "USA"
        },
        {
            "Name": "Facebook",
            "Url": "www.facebook.com",
            "Country": "USA"
        },
        {
            "Name": "微博",
            "Url": "www.weibo.com",
            "Country": "CN"
        }
    ]
}

 

还有什么操作数据库的.....这些东西还是交给后端吧，前端只要接收后端操作好的JSON就行

所以前后端分离会有一个问题！跨域问题

 

如果你需要从不同的服务器（不同域名）上获取数据就需要使用跨域 HTTP 请求。

跨域请求在网页上非常常见。很多网页从不同服务器上载入 CSS, 图片，Js脚本等。

在现代浏览器中，为了数据的安全，所有请求被严格限制在同一域名下，如果需要调用不同站点的数据，需要通过跨域来解决。

 

这个以后再看