zoukankan      html  css  js  c++  java
  • --@angularJS--$http服务与后台数据交互

    1、httpBasic.html:

    <!DOCTYPE HTML>
    <html ng-app="app">
    <head>
        <title>$http与后台数据交互</title>
        <meta charset="utf-8">    
        <link rel="stylesheet" href="../css/bootstrap.css">
        <script src="../js/angular.js"></script>
    </head>
    <body>
    <div ng-controller="loadDataCtrl">
        <ul>
            <li ng-repeat="user in users">
                {{user.name}}
            </li>
        </ul>
    </div>
    <script src="httpBasic.js"></script>
    </body>
    </html>

    2、httpBasic.js:

    var myModule = angular.module("app",[]);

    myModule.controller('loadDataCtrl', ['$scope', '$http',
        function($scope,$http){
        $http({
            method:'GET',
            url:'data.json'
        }).success(function(data,status,header,config){
            console.log(data);
            $scope.users = data;//直接为ng-repeat里面的users赋值了
        }).error(function(data,status,header,config){
            console.log("错误......");
        });
    }]);

    3、后台数据文件——data.json

    [{
        "name": "《用AngularJS开发下一代WEB应用》"
    },{
        "name": "《Ext江湖》"
    },{
        "name": "《AngularJS权威指南》"
    }]

  • 相关阅读:
    Native RabbitMQ Direct Exchange
    RabbitMQ系列文章导读
    AbstractQueuedSynchronizer
    CountDownLatch和CyclicBarrier
    显示锁Lock
    《SeleniumBasic 3.141.0.0
    《SeleniumBasic 3.141.0.0
    《SeleniumBasic 3.141.0.0
    《SeleniumBasic 3.141.0.0
    《SeleniumBasic 3.141.0.0
  • 原文地址:https://www.cnblogs.com/koleyang/p/4519071.html
Copyright © 2011-2022 走看看