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

相关文章

  • angularjs下拉框空白的解决办法

    angularjs下拉框空白的解决办法

    这篇文章主要为大家详细介绍了angularjs下拉框空白的解决方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 详解使用路由延迟加载 Angular 模块

    详解使用路由延迟加载 Angular 模块

    这篇文章主要介绍了详解使用路由延迟加载 Angular 模块,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 模板视图和AngularJS之间冲突的解决方法

    模板视图和AngularJS之间冲突的解决方法

    这篇文章主要介绍了模板视图和AngularJS之间冲突的解决方法,结合实例形式分析了AngularJS模板视图冲突的原因并给出了2种解决方法供大家参考使用,需要的朋友可以参考下
    2016-11-11
  • AngularJS 实现点击按钮获取验证码功能实例代码

    AngularJS 实现点击按钮获取验证码功能实例代码

    本文通过实例代码给大家介绍了AngularJS 实现点击按钮获取验证码功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-07-07
  • Angularjs验证用户输入的字符串是否为日期时间

    Angularjs验证用户输入的字符串是否为日期时间

    这篇文章主要介绍了Angularjs验证用户输入的字符串是否为日期时间,需要的朋友可以参考下
    2017-06-06
  • Angular组件库ng-zorro-antd实现radio单选框选择

    Angular组件库ng-zorro-antd实现radio单选框选择

    这篇文章主要为大家介绍了Angular组件库ng-zorro-antd实现radio单选框取消选择实现问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • angular中实现li或者某个元素点击变色的两种方法

    angular中实现li或者某个元素点击变色的两种方法

    本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下
    2017-07-07
  • Angular中$state.go页面跳转并传递参数的方法

    Angular中$state.go页面跳转并传递参数的方法

    这篇文章主要介绍了angular中$state.go页面跳转并传递参数的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • 使用Angular CLI从蓝本生成代码详解

    使用Angular CLI从蓝本生成代码详解

    这篇文章主要介绍了使用Angular CLI从蓝本生成代码详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 详解Angular之路由基础

    详解Angular之路由基础

    单页应用中,组件时构建应用的基础元素,页面展示什么内容均是靠页面有什么组件决定的,而展示什么组件又是由一组路由(带有Url元素的特定集合,可用于导航视图)决定的,希望本文可以帮助读者了解路由的基础概念和基础使用、写法。
    2021-05-05

最新评论