angularjs初学者

最新推荐文章于 2025-08-20 11:37:09 发布

weixin_33897722

最新推荐文章于 2025-08-20 11:37:09 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

文章标签： php

原文链接：https://my.oschina.net/imot/blog/175135

本文通过一个具体的案例展示了如何使用AngularJS来构建一个简单的应用。包括了如何定义控制器、使用指令、双向数据绑定等功能，同时也涉及到了如何组织和管理AngularJS应用的结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html>
<html lang="en" ng-app ng-controller="PhoneListCtrl">
  <head>
    <meta charset="utf-8">
    <title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <base href="http://127.0.0.1/zhen/index.php" />
    <!-- Le styles -->
    <link rel="stylesheet" type="text/css" href="web/metro/css/metro-bootstrap.css">
    <link rel="stylesheet" href="http://127.0.0.1/zhen/web/font-awesome/css/font-awesome.css">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="http://127.0.0.1/angular-1.0.1.min.js"></script>
  </head>
  <body>


  <div class="container">


  <div class="md-col-3">
  <div class="thumbnail tile tile-double tile-green">
    <a href="#">
      <h2 class="tile-text">更新照片</h2>
     </a>
  </div>
  </div>

  <div class="md-col-3">
    <div class="thumbnail tile tile-double tile-orange">
      <a href="#" >
        <h2 class="tile-text"><i class="fa-picture-o"></i> 浏览照片</h2>
      </a>
    </div>
  </div>

  <div class="md-col-3">
    <div class="thumbnail tile tile-double tile-blue">
      <img src="http://talkslab.com/metro-bootstrap/docs/twittertile.png">
      <a href="#" >
        <h2>
          飞呀飞
        </h2>

      </a>
    </div>
    </div>

  <div class="md-col-3">
    <div class="thumbnail tile tile-double tile-yellow">
      <a href="#" >
        <h1 class="tile-text">
          暴走!!
        </h1>
      </a>
    </div>
  </div>

  </div>
  <div class="container">
       
    <p> Hello {{ yourname || 'World'}}!</p>

        
    <p>Your name: <input type="text" ng-model="yourname" placeholder=""></p>

    <div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->

      Search: <input ng-model="query">

    </div>
    <div class="span10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in phones | filter:query">
          {{phone.name}}
        <p>{{phone.snippet}}</p>
        </li>
      </ul>

       </div>
  </div>
</div>

<p>{{hello}}</p>

<script>
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."}
  ];
}

</script>  </div>

  </body>
  </html>

关键字: ng-app ng-controller ng-bind-template ng-model ng-repeat ControllerName( $scope){}

转载于:https://my.oschina.net/imot/blog/175135