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 复制代码 代码如下:             Nexus S                 Fast just got faster with Nexus S.                         Motorola XOOM™ with Wi-Fi                 The Next, Next Generation tablet.             练习 尝试添加多个静态HTML代码到index.html, 例如: 复制代码 代码如下: Total number of phones: 2 总结 本步骤往应用中添加了静态HTML手机列表, 现在让我们转到步骤2以了解如何使用AngularJS动态生成相同的列表。 您可能感兴趣的文章: AngularJS 路由和模板实例及路由地址简化方法(必看) AngularJS初始化静态模板详解 AngularJS入门教程(二):AngularJS模板 Angularjs实现页面模板清除的方法 AngularJS 入门教程 静态模板 相关文章 AngularJS基础 ng-repeat 指令简单示例 本文主要讲解AngularJS ng-repeat 指令,这里对ng-repeat的基础资料做了整理,并附有示例代码,有兴趣的朋友可以参考下 2016-08-08 ionic选择多张图片上传的示例代码 本篇文章主要介绍了ionic选择多张图片上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-10-10 AngularJS ng-template寄宿方式用法分析 这篇文章主要介绍了AngularJS ng-template寄宿方式用法,结合实例形式分析了ng-template模板的相关使用技巧,需要的朋友可以参考下 2016-11-11 AngularJS 过滤与排序详解及实例代码 这篇文章主要介绍了AngularJS 过滤与排序,这里整理了详细的资料及简单实例代码,有需要的小伙伴可以参考下 2016-09-09 angular2实现统一的http请求头方法 今天小编就为大家分享一篇angular2实现统一的http请求头方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 AngularJS控制器之间的通信方式详解 这篇文章主要介绍了AngularJS控制器之间的通信方式,结合实例形式分析了作用域继承方式、事件方式及angular服务方式等常用的通信方式,需要的朋友可以参考下 2016-11-11 AngularJS入门教程(一):静态模板 这篇文章主要介绍了AngularJS入门教程(一):静态模板,本文是系列文章的第二篇,本系列会用一个项目来讲解AngularJS的使用,需要的朋友可以参考下 2014-12-12 AngularJS 异步解决实现方法 这篇文章主要介绍了AngularJS 异步解决实现方法的相关资料,需要的朋友可以参考下 2017-06-06 AngularJS入门(用ng-repeat指令实现循环输出 这篇文章主要介绍了AngularJS入门(用ng-repeat指令实现循环输出,需要的朋友可以参考下 2016-05-05 AngularJs Understanding Angular Templates 本文主要介绍AngularJs Understanding Angular Templates的资料,这里整理了详细的资料及简单示例代码,有兴趣的小伙伴的参考下 2016-09-09 最新评论

为了说明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动态生成相同的列表。

您可能感兴趣的文章:

  • AngularJS 路由和模板实例及路由地址简化方法(必看)
  • AngularJS初始化静态模板详解
  • AngularJS入门教程(二):AngularJS模板
  • Angularjs实现页面模板清除的方法
张贴在3