AngularJS入门教程(一):静态模板

 更新时间:2014年12月06日 15:52:22   投稿:junjie  
这篇文章主要介绍了AngularJS入门教程(一):静态模板,本文是系列文章的第二篇,本系列会用一个项目来讲解AngularJS的使用,需要的朋友可以参考下

为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板。

在本步骤中,我们往HTML页面中添加两个手机的基本信息,用以下命令将工作目录重置到步骤1。

复制代码 代码如下:

git checkout -f step-1

请编辑app/index.html文件,将下面的代码添加到index.html文件中,然后运行该应用查看效果。

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代码到index.html, 例如:

复制代码 代码如下:

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

总结

本步骤往应用中添加了静态HTML手机列表, 现在让我们转到步骤2以了解如何使用AngularJS动态生成相同的列表。

相关文章

  • 前后端如何实现登录token拦截校验详解

    前后端如何实现登录token拦截校验详解

    这篇文章主要给大家介绍了关于前后端如何实现登录token拦截校验的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-09-09
  • Angular(5.2->6.1)升级小结

    Angular(5.2->6.1)升级小结

    今天小编就为大家分享一篇关于Angular(5.2->6.1)升级小结,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12
  • angularjs中的e2e测试实例

    angularjs中的e2e测试实例

    这篇文章主要介绍了angularjs中的e2e测试实例,本文使用Protractor来完成e2e测试,需要的朋友可以参考下
    2014-12-12
  • AngularJS基础 ng-options 指令详解

    AngularJS基础 ng-options 指令详解

    本文主要介绍AngularJS ng-options 指令,这里对ng-options指令的知识做了详细整理,并附有详细的代码示例,有需要的小伙伴可以参考下
    2016-08-08
  • ng-zorro-antd 入门初体验

    ng-zorro-antd 入门初体验

    这篇文章主要介绍了ng-zorro-antd 入门初体验,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • ng-alain的sf如何自定义部件的流程

    ng-alain的sf如何自定义部件的流程

    这篇文章主要介绍了ng-alain的sf如何自定义部件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • AngularJS中的拦截器实例详解

    AngularJS中的拦截器实例详解

    这篇文章主要介绍了AngularJS中的拦截器实例详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • Ionic + Angular.js实现验证码倒计时功能的方法

    Ionic + Angular.js实现验证码倒计时功能的方法

    验证码倒计时这个功能相信对大家每个人来说都不陌生,之前介绍了在Android中的实现方法,下面这篇文章主要给大家介绍了利用Ionic + Angular.js实现验证码倒计时功能的相关资料,文中介绍的非常详细,需要的朋友们下面来一起看看吧。
    2017-06-06
  • angularJS结合canvas画图例子

    angularJS结合canvas画图例子

    这篇文章主要介绍了angularJS结合canvas画图例子的方法,需要的朋友可以参考下
    2015-02-02
  • AngularJS页面带参跳转及参数解析操作示例

    AngularJS页面带参跳转及参数解析操作示例

    这篇文章主要介绍了AngularJS页面带参跳转及参数解析操作,结合具体实例形式分析了AngularJS使用URL传递参数及参数的接收、解析等相关操作技巧,需要的朋友可以参考下
    2017-06-06

最新评论