• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS入门教程(一):静态模板

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含AngularJS入门教程(一):静态模板等相关知识,希望在学习及工作中可以帮助到您

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

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

git checkout -f step-1
</div>

请编辑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>
</div>

练习

尝试添加多个静态HTML代码到index.html, 例如:

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

总结

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

</div>

您可能想查找下面的文章:

相关文章

  • 2017-05-30Angularjs 依赖压缩及自定义过滤器写法
  • 2017-05-30Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
  • 2017-05-30AngularJS前端页面操作之用户修改密码功能示例
  • 2017-05-30AngularJS中比较两个数组是否相同
  • 2017-05-30angularjs指令中的compile与link函数详解
  • 2017-05-30Angular.js指令学习中一些重要属性的用法教程
  • 2017-05-30Angular2使用Guard和Resolve进行验证和权限控制
  • 2017-05-30AngularJS中实现用户访问的身份认证和表单验证功能
  • 2017-05-30实例详解angularjs和ajax的结合使用
  • 2017-05-30在JavaScript的AngularJS库中进行单元测试的方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS入门教程之Scope(作用域)
    • Angular.JS内置服务$http对数据库的增删改使用教程
    • AngulerJS学习之按需动态加载文件
    • angularJS 中$attrs方法使用指南
    • AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
    • AngularJS的表单使用详解
    • AngularJS基础 ng-cut 指令介绍及简单示例
    • 体验jQuery和AngularJS的不同点及AngularJS的迷人之处
    • AngularJS入门教程(一):静态模板
    • AngularJS封装指令方法详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有