加载路由依赖，放在angular框架后面 <div class="snippet-clipboard-content notranslate position-re

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clip

$rootscope可以在两个控制器间交换数据 <div class="snippet-clipboard-content notranslate position

路由 about angular-tutorial HOT 3 OPEN

wscats commented on May 12, 2024

路由

from angular-tutorial.

Comments (3)

Wscats commented on May 12, 2024

$http是 AngularJS应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据，是一个异步请求数据的方法

$http()接受的配置对象可以包含以下属性:

method:http请求方式，可以为GET,DELETE,HEAD,JSONP,POST,PUT
url:字符串，请求的目标
params:字符串或者对象，会被转换成为查询字符串追加的url后面
data:在发送post请求时使用，作为消息体发送到服务器
headers:一个列表，每个元素都是一个函数，返回http头
xsrfHeaderName(字符串)：保存XSFR令牌的http头的名称
xsrfCookieName:保存XSFR令牌的cookie名称
transformRequest:函数或者函数数组，用来对http请求的请求体和头信息进行转换，并返回转换后的结果。
transformResponse:函数或者函数数组，用来对http响应的响应体和头信息进行转换，并返回转换后的结果。
cache:布尔类型或者缓存对象，设置之后angular会缓存get请求。
timeout:数值，延迟请求
responseType：字符串，响应类型。可以为arraybuffer, blob,document,json, text, moz-blob, moz-chunked-text, moz-chunked-arraybuffer

所以我们平时可以以这样的写法来请求数据

$http.get('wsscat.php', {
                    params: {
                        page: 1,

                    },
                })

事实上转化成这样的XHR请求
http://wsscat.php?page=1
还可以以这样的写法

$http({
        url: 'wsscat.php',
        method: 'get',
        params: {
                page: 1,

                },
        })

推荐用下面的这样写法，首先比较直观，其次就是修改比较方便，比如当我们不想用get方法而改为post方法请求的时候，就可以使用变量对其进行改变

from angular-tutorial.

Wscats commented on May 12, 2024

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="data" data-example-demo="456" e='123'></div>
    </body>
    <script>
        //旧的读取和设置方法
        var data = document.getElementById('data').getAttribute('data-example');
        var data1 = document.getElementById('data').getAttribute('e');
        //document.getElementById('data').setAttribute('fuck','love');


        //新的读取和设置方法
        //相当于docunment.getElementById
        //首先要获取这个节点，再去读这个dataset对象，然后用驼峰的方法把(data-)后面的变量读取出来
        var data2 = document.querySelector('#data').dataset.exampleDemo;
        //相当于document.getElementsByTagName
        var data3 = document.querySelectorAll('#data')[0].dataset.exampleDemo;
        //设置的(data-)值的方法
        document.querySelector('#data').dataset.exampleDemo = 'love';
    </script>
</html>

以data-XXX这种形式保存值在html标签的方法是H5新增的方法
首先它可以兼容我们旧版getAttribute的方法去获取值也适用setAttribute方法去设置值
但是还有更为简便的新接口读取它们的值，那就是dataset属性，获取节点后，读取dataset属性值就可以返回一个对象，里面的值就是以data-形式保存在标签的值，注意如果类似读标签上data-example-demo必须用驼峰的方式这样来读写dataset.exampleDemo

from angular-tutorial.

Wscats commented on May 12, 2024

$rootscope可以在两个控制器间交换数据

//路由就是#这个符号加这个字符串/home——>#/home
        app.controller('homeCtrl',['$scope','$rootScope',function($scope,$rootScope){
            //利用$rootScope交换数据
            $rootScope.exchange = '123';
            $scope.name = '123';
        }])

当我们在home.html进行控制器切换的时候，$rootScope.exchange就可以在另外控制器中被读取
<a ng-href="#/detail">利用$rootScope在控制器之间交换数据</a>

app.controller('detailCtrl',['$scope','$rootScope',function($scope,$rootScope){
            console.log($rootScope.exchange);
            $scope.name = '123';
        }])

但是当我们刷新页面的时候$rootScope就会丢失

from angular-tutorial.

路由 about angular-tutorial HOT 3 OPEN

Comments (3)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent