[Angular Tutorial] 1-Static Template

为了说明Angular如何扩展了标准的html,您将会创建了一个纯粹的静态html页面,并且看到我们如何将这些html代码转换成Angular能动态展示的模板。

在这一步您将会在一个html页面中添加两部手机的基本信息。

  ·这个页面现在包含一个有两部手机的基本信息名单。

最重要的不同被列在了下面,您可以点击这里在GitHub上查看全部的不同。

app/index.html:

<ul>
  <li>
    <span>Nexus S</span>
    <p>
      Fast just got faster with Nexus S.
    </p>
  </li>
  <li>
    <span>Motorola XOOM™ with Wi-Fi</span>
    <p>
      The Next, Next Generation tablet.
    </p>
  </li>
</ul>

实验

尝试在静态html页面中添加一些东西吧,比如:

<p>Total number of phones: 2</p>

总结

您应用中新增了静态html来展示列表,让我们去到下一步看怎样使用AngularJS动态生成相同的列表。

时间: 2024-11-06 16:48:28

[Angular Tutorial] 1-Static Template的相关文章

[Angular Tutorial]Turorial

(注:我曾经在<不敢止步>一书中看到,作者认为学习一门技术最好的方法就是翻译某部领域书籍,我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial中的Phonecat范例全部翻译一遍,这当然更多是希望自己能得到一个提高,尽力做到最好,当然质量难以保证,所有专有名词尽量不译,所有章节与https://docs.angularjs.org/tutorial/对应,如果可以,希望您能对照两边学习,给我提些意见.那么,开始吧!) 本节翻译自:https://docs.angular

[Angular Tutorial] 3-Components

在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view).一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户端代码“掌管”并和视图层实现了动态交互,通过在数据模型和状态中即刻更新视图来反应改变,这经常是用户交互的结果(我们不久将在第5步中看到一个例子),这种做法取代了在服务端创建一个静态HTML页面的做法. 模板(视图层包含绑定和展示逻辑的部分)作为一个蓝图,以此来决定我们数据怎么组织和展示给用户.而控制

[Angular Directive] Create a Template Storage Service in Angular 2

You need to define a <template> to be able to use it elsewhere in your app as a TemplateRef. You can store these TemplateRefs in a Service and then access them from any @Directive or @Component in your app. We want to create a service and a componen

[Angular Tutorial] 8 - Templating Links &amp; Images

在这一步中,我们将会在电话列表中为电话添加略图,并附上链接,当然现在也不会链接去哪.在随后的步骤中,我们将使用这些链接来展示电话列表中额外的信息. ·现在电话列表中会有链接和图片. 最重要的不同在下面列出.您可以点击这里在GitHub上查看全部的不同. 数据 注意到phones.json文件中包含了每一部电话的唯一ID和图片URLs.这些URLs指向app/img/phones/目录. app/phones/phones.json (样本代码片段): [ { ... "id": &qu

[Angular Tutorial] 0-Bootstraping

在这一节的tutorial中,您将会逐渐熟悉AngularJS phonecat app的最重要的源代码文件.您也将学到如何将开发服务器与angular-seed绑定到一起,并且在浏览器中运行应用. 在您继续之前,请确保您已经搭建好您的开发环境并且安装了所有必要的依赖,像这里描述的那样. 在angular-phonecat目录下,运行这条指令: git checkout -f step-0 这将使您工作空间的tutorial app重置到step 0.(注:强烈推荐使用sourcetree,可以

[Angular Tutorial] 13 -REST and Custom Services

在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTTP方法和URLs. 最重要的变化列举如下,您可以点击这里在GitHub上查看全部的不同. 依赖 RESTful功能由Angular的ngResource模块提供,这是从Angular核心模块中独立出来的. 由于我们使用了Bower来安装客户端的依赖,这一步更新bower.json配置文件来添加新的依

[Angular Tutorial] 4 - Directory and File Organization

在这一步中,我们将不会在我们的应用中添加任何新功能,相反,我们打算退回一步,重构我们的代码库,移动我们的代码和文件,以此来使我们的应用更具易扩展性和可维护性. 在先前的步骤中,我们已经见识到了如何将我们的应用构建得更具模块性和可测试性.另一种同样重要的思想是,用一种使得查看代码变得容易(无论对我们还是团队中的其他开发者)和能在我们应用中快速指定的某区域的相关代码块的方式来组织我们的代码库. 为此,下面我们将解释为何及如何: ·将每一个实体置于他们自己的文件中(own file). ·通过特定区域

[Angular Tutorial] 10 -More Templating

在这一步中,我们会实现电话细节的视图,这在用户点击列表中的一部电话时被展示. ·当您点击列表中的一部电话时,带有电话特定信息的电话细节页面将被展示. 我们打算使用$http来获取我们的数据,以此来实现电话细节视图,然后刷新phoneDetail组件模板. 最大的不同列举如下,您也可以点击这里从GitHub上看到全部不同. 数据 除了phones.json,app/phones/目录中也包含了每一步电话的JSON文件: app/phones/nexus-s.json: (样本片段) { "addi

[Angular Tutorial] 14 -Animations

在这一步中,我们将会通过在我们先前创建的模板代码中添加CSS和JavaScript动画效果来扩展我们的web应用. ·我们现在使用ngAnimate模块来允许动画效果贯穿整个应用. ·我们也依赖于自带的指令来自动触发动画来进行开发. ·当一个动画效果被发现时,在给定的时间内,它将会和置于元素中的实际DOM操作一同运行(比如:在ngRepeat中插入/删除节点或在ngClass中添加/删除类). 最大的不同列举如下,您可以点击这里在GitHub上查看全部的不同. CSS过渡动画:使ngRepeat