zoukankan      html  css  js  c++  java
  • 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脚本等。

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

    这个以后再看

  • 相关阅读:
    Warning: 执行完毕, 但带有警告 trigger trigger_EqPic_insert 已编译。
    c#生成cad缩略图或者图片
    ORACLE ROWNUM解析[转]
    集合已修改;可能无法执行枚举操作。
    JS 变量是否有值的判断
    简单方法解决bootstrap3 modal异步加载只一次的问题
    System.Data.DbType映射关系
    sql zhuan ORACLE
    Enterprise Library
    sql server转oracle需要注意的几点
  • 原文地址:https://www.cnblogs.com/weizhibin1996/p/9314869.html
Copyright © 2011-2022 走看看