angular經過路由實現跳轉 resource加載數據

時間 2019-12-08

標籤 angular 經過路由實現 resource 加載數據欄目 AngularJS 简体版

原文原文鏈接

<!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>