<!doctype html>

<!-- 标记ng-app告诉AngularJS处理整个HTML页并引导应用 -->

<html ng-app>

    <head>

        <meta charset="UTF-8">

        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

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

        <!-- 当绑定两个花括号在title元素上可以实现我们的目标，但是你或许发现了，页面正加载的时候它们已经显示给用户看了。一个更好的解决方案是使用ngBind或者ngBindTemplate指令，它们在页面加载时对用户是不可见的 -->

        <title ng-bind-template="Google Phone Gallery: {{'ha ha'}}">Google Phone Gallery</title>

    </head>

    <body ng-controller="PhoneListCtrl">

        <!-- 双向绑定 ng-model="yourname" -->

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

        <hr>

        Hello {{yourname || 'World'}}!

        <hr>

        <!-- 从控制器取出数据，迭代显示 -->

        <!-- PhoneListCtrl控制器里面的方法 -->

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

        <!-- 这里的 orderProp会取出控制器里面的默认 orderProp="age" -->

        Sort by:

        <select ng-model="orderProp">

          <option value="name">name order</option>

          <option value="age">age order</option>

        </select>

        <ul>

            <!-- 控制器中 PhoneListCtrl方法定义的变量 phones迭代   ng-repeat迭代元素-->

            <!-- filter函数使用query的值来创建一个只包含匹配query记录的新数组 -->

            <!-- orderBy排序绑定到上面的 orderProp元素 -->

            <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">

                {{phone.name}}

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

            </li>

            <hr>

            <!-- 下面是一些联系 -->

            <p>Total number of phones: {{phones.length}}</p>

        </ul>

        <hr>

        <div ng-controller="HelloWordCtrl">

            测试控制器: {{hello}}

        </div>

        <hr>

        <table>

            <tr><th>row number</th></tr>

            <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>

        </table>

    </body>

</html>

AngularJS的基础元素应用的更多相关文章

  1. AngularJS指令基础（一）

    AngularJS指令基础(一) 1.什么是指令:粗暴的理解就是,自定义HTML标签.专业理解是指,angularJS扩展具有自定义功能的HTML元素的途径. 2.什么时候用到指令:需求是变化的.多样 ...

  2. Ansible的基础元素和YAML介绍

    本节内容: YAML Ansible常用的数据类型 Ansible基础元素 一.YAML 1. YAML介绍 YAML是一个可读性高的用来表达资料序列的格式.YAML参考了其他多种语言,包括:XML. ...

  3. ansible入门三（Ansible的基础元素和YAML介绍）

    Ansible的基础元素和YAML介绍   本节内容: YAML Ansible常用的数据类型 Ansible基础元素 一.YAML 1. YAML介绍 YAML是一个可读性高的用来表达资料序列的格式 ...

  4. 『心善渊』Selenium3.0基础 — 4、Selenium基础元素定位详解

    目录 1.什么是元素定位 2.Selenium元素定位常用API (1)By_id 定位 (2)by_name 定位 (3)by_class_name 定位 (4)by_tag_name 定位 (5) ...

  5. AngularJS语法基础及数据绑定——详解各种数据绑定指令、属性应用

    AngularJS简单易学,但是功能强大.特别是在构建单页面应用方面效果显著.而 数据绑定 可以说是他被广泛使用的最主要的优点.他舍弃了对DOM的操作方式,一切都由AngularJS来自动更新视图,我 ...

  6. 提高前端开发效率必备AngularJS （基础）

    简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...

  7. AngularJS入门基础PPT（附下载链接）

    学习了Angularjs有段时间,自己写了一个PPT,个人认为总结的非常全面,对于入门基础够了. 大致模块有:Angularjs简单介绍,Angularjs特性,hello world,Control ...

  8. AngularJS实用基础知识---入门必备

    前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. ...

  9. AngularJS入门基础——作用域

    作用域$scope是构成AngularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它是非常重要的. $scope对像是定义应用业务逻辑,控制器方法和视图属性的地方.作用域是视图和控制器之间的 ...

随机推荐

  1. 桌面秀：以ubuntu主为的开发桌面环境

    桌面系统是xubuntu,字体经过美化的(也就是复制了windows7下的微软字体) 可以看到字体效果与vmware下的win7差距已经很小了,略差一点,在可以接受的范围内了. 上图右边的firefo ...

  2. Mybatis常用总结：参数，返回，执行sql，include等

    1.参数注入1.1用#{0},#{1}的形式,0代表第一个参数,1代表第二个参数 public List<RecordVo> queryList(String workerId, Inte ...

  3. 物联网框架SuperIO 2.2.9和ServerSuperIO 2.1同时更新，更适用于类似西门子s7-200发送多次数据，才能读取数据的情况

    一.解决方案 二.更新内容 1.修改IRunDevice接口,把void Send(io,bytes)改成int Send(io,bytes).2.修改网络控制器,发送数据不直接使用IO实例,改为使用 ...

  4. HTML5的新语义化的标签

    在HTML5之前采用HTML+CSS文档结构写法 [ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域)] ...

  5. Web 开发中很实用的10个效果【附源码下载】

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  6. jQuery css3仿游戏网站右键环形菜单

    效果展示 http://hovertree.com/texiao/jquery/86/ PC用户右键弹出环形菜单. 手机用户扫描二维码: 长安可以弹出环形菜单. 转自:http://hovertree ...

  7. SharePoint 部署时报错: 未能提取此解决方案中的cab文件

    在vs里右击SharePoint项目,选择"部署",结果报错: Error occurred in deployment step 'Add Solution':Fail to e ...

  8. Andriod 自定义控件之创建可以复用的组合控件

    前面已学习了一种自定义控件的实现,是Andriod 自定义控件之音频条,还没学习的同学可以学习下,学习了的同学也要去温习下,一定要自己完全的掌握了,再继续学习,贪多嚼不烂可不是好的学习方法,我们争取学 ...

  9. iOS网络1——NSURLConnection使用详解

    原文在此 一.整体介绍 NSURLConnection是苹果提供的原生网络访问类,但是苹果很快会将其废弃,且由NSURLSession(iOS7以后)来替代.目前使用最广泛的第三方网络框架AFNetw ...

  10. Git本地服务器搭建及使用详解

    Git本地服务器搭建及使用 Git是一款免费.开源的分布式版本控制系统.众所周知的Github便是基于Git的开源代码库以及版本控制系统,由于其远程托管服务仅对开源免费,所以搭建本地Git服务器也是个 ...