zoukankan      html  css  js  c++  java
  • angular通过路由实现跳转 resource加载数据

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>无标题文档</title>
            <script type="text/javascript" src="angular.min.js"></script>
            <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
            <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-resource.min.js"></script>
    
        </head>
        <body>
          <div ng-app="myApp">
    
              <div class="header">
    
                  <a href="#/content/zhangsan">张三</a>
                  <a href="#/content/lisi">李四</a>
              </div>
              <div ng-view></div>
    
    
          </div>
          <script type="text/javascript">
              var app = angular.module("myApp", ['ngRoute','ngResource']);
    
              app.config(['$routeProvider',function($routeProvider){
    
                  $routeProvider
                          .when('/content/:name',{
                              template : '<p><span>姓名:{{data[0].name}}</span> <br><span>job:{{data[0].job}}</span></p>',
                              controller : 'nameController'
                          })
                          .otherwise({
                              redirectTo : '/content/zhangsan'
                          });
    
              }]);
    
    
    
              app.controller('nameController',['$scope','$routeParams','$resource',function($scope,$routeParams,$resource){
                  if($routeParams){
                    var obj=$resource($routeParams['name']+'.json',{},{});
    
                    $scope.data=obj.query();
    
    
                      console.log($scope.data);
                    //$scope.data=$routeParams['name'];
                  }
    
              }]);
    
    
          </script>
           
        </body>
    </html>
    

      

  • 相关阅读:
    2015/12/26 十六、 八 、二 进制转十进制
    2015/12/25 ① 图灵测试 ② 安装jdk出现的问题 ③ 配置环境变量
    java如何产生随机数
    二分查找法
    冒泡排序法
    计算阶乘
    九九乘法小练习
    数组循环语句练习
    经典循环例题练习
    如何用循环语句输出一个三角形
  • 原文地址:https://www.cnblogs.com/mingjixiaohui/p/5570219.html
Copyright © 2011-2022 走看看