zoukankan      html  css  js  c++  java
  • angularjs --- ngResource 类似于 ajax发送请求。

    <!DOCTYPE HTML>
    <html ng-app="myApp">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-resource.min.js"></script>
    <script>
    //ngResource:跟ajax一样,发送请求。
    
    
    var m1 = angular.module('myApp',['ngResource']);
    
    m1.controller('Aaa',['$scope','$resource',function($scope,$resource){
        var objRe = $resource(':name.:aaa',{aaa : 'json'},{});
        console.log(objRe.get());
        $scope.data = objRe.get(
            {name : 'lisi'},
            function(){},//请求成功回调
            function(){} //请求失败回调
        );
    }]);
    
    </script>
    </head>
    
    <body>
    <div ng-controller="Aaa">
        {{data.name}}
    </div>
    </body>
    </html>
    
    
    
    lisi.json:
    [{
        "name" : "李四",
        "age" : "30",
        "job" : "老板"
    }]
    <!DOCTYPE HTML>
    <html ng-app="myApp">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-route.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-resource.min.js"></script>
    <script>
    
    var m1 = angular.module('myApp',['ngRoute','ngResource']);
    
    m1.config(['$routeProvider',function($routeProvider){//路由(类似于tab),
        $routeProvider
            .when('/aaa/:name',{
                template : '<div>{{data[0].name}}</div><div>{{data[0].age}}</div><div>{{data[0].job}}</div>',
                controller : 'Aaa'
            })
            .otherwise({
                redirectTo : '/aaa/zhangsan'
            });
    }]);
    
    m1.controller('Aaa',['$scope','$resource','$location','$routeParams',function($scope,$resource,$location,$routeParams){
        $scope.$location = $location;
        console.log($routeParams);
        if($routeParams.name){
            var objRe = $resource( $routeParams.name +'.json',{},{});
            $scope.data = objRe.query();
        }
    }]);
    
    
    </script>
    </head>
    
    <body>
    <div ng-controller="Aaa">
        <input type="button" value="张三" ng-click="$location.path('aaa/zhangsan')">
        <input type="button" value="李四" ng-click="$location.path('aaa/lisi')">
        <div ng-view>
        </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    (Java) LeetCode 275. H-Index II —— H指数 II
    (Java) LeetCode 82. Remove Duplicates from Sorted List II —— 删除排序链表中的重复元素 II
    前端知识体系目录
    PhoneGap/cordvoa如何添加Media插件
    使用Google Closure Compiler高级压缩Javascript代码注意的几个地方
    javascript中的函数式声明与变量式声明
    call,apply,bind的用法
    canvas学习笔记
    Cookie/Session机制详解
    架构师速成6.8-设计开发思路-领域驱动 分类: 架构师速成 2015-07-30 18:28 15人阅读 评论(0) 收藏
  • 原文地址:https://www.cnblogs.com/yaowen/p/5763901.html
Copyright © 2011-2022 走看看