<html ng-app>//全局中引用对应于PhoneListCtrl 模板

<head>

    <script src="js/angular.js"></script>

    <script src="js/test.js"></script>

</head>

<body ng-controller="PhoneListCtrl">

    <ul>

        <li ng-repeat="pho in phones">

            {{pho.name}}

            <p>{{pho.snippet}}</p>

        </li>

    </ul>



    //div里面的作用域 myapp

    <div ng-app="myapp" ng-controller="mytest">

        <ul>

            <li ng-repeat="ph in phone">

                {{ph.name}}

                <p>{{ph.snippet}}</p>

            </li>

        </ul>

    </div>

</body>

</html>

function PhoneListCtrl($scope) {

    $scope.phones = [

      {

          "name": "Nexus S",

          "snippet": "Fast just got faster with Nexus S."

      },

      {

          "name": "Motorola XOOM™ with Wi-Fi",

          "snippet": "The Next, Next Generation tablet."

      },

      {

          "name": "MOTOROLA XOOM™",

          "snippet": "The Next, Next Generation tablet."

      }

    ];

}

//自己声明模板 共外部使用

var app = angular.module('myapp', []);

app.controller('mytest', function ($scope) {

    $scope.phone = [

       {

           "name": "Nexus S",

           "snippet": "Fast just got faster with Nexus S."

       },

       {

           "name": "Motorola XOOM™ with Wi-Fi",

           "snippet": "The Next, Next Generation tablet."

       },

       {

           "name": "MOTOROLA XOOM™",

           "snippet": "The Next, Next Generation tablet."

       }

    ];

});