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

赞 (0)

相关推荐

  • AngularJS入门教程之静态模板详解

    为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两个手机的基本信息,用以下命令将工作目录重置到步骤1. git checkout -f step-1 请编辑app/index.html文件,将下面的代码添加到index.html文件中,然后运行该应用查看效果. app/index.html <ul> <li> <span>

  • AngularJS入门教程之AngularJS 模板

    AngularJS入门教程之AngularJS 模板

    是时候给这些网页来点动态特性了--用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图

  • AngularJS初始化静态模板详解

    AngularJS可以通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,不管用哪种方法,应用启动后,动态往dom树里面添加的dom元素,无法执行angular指令,即无法通过ng-model.ng-click给动态添加的dom元素绑定数据和事件,怎么办? 动态添加dom元素的场景非常常见,如点击某页面上修改用户资料的按钮,发送ajax请求去查询用户资料,然后通过模板引擎将事先写在页面里的静态模板编译成HTML字符串

  • AngularJs Understanding Angular Templates

    angular template是一个声明规范,与model.controller的信息一起,渲染成用户在浏览器中所看到的视图.它是静态的DOM,包括HTML.CSS.angular特别的元素和angular指定的元素属性.angular元素和属性指示angular去扩展行为以及将template DOM转换为动态视图的DOM. 下面是我们可以在template中使用的angular元素已经元素属性的类型: Directive(http://www.jb51.net/article/91739.

  • AngularJS延迟加载html template

    当使用AngularJs中的routes/views模式建立大型网站或者应用的时候,把所有的自定义文件,如controllers和template等在初始化时全部加载进来,不是一个好的办法.最好的方式是,初始化时仅仅加载所需要的文件.这些文件可能会依赖一个连接或者多个文件,然而它们仅仅被特定的route所使用.当我们切换route时,未被加载的文件将会按需加载.这不但能提高初始化页面的速度,而且可以防止带宽浪费. 网上大部分文章都在讲通过$routeProvider以及第三方服务对control

  • AngularJS ng-template寄宿方式用法分析

    本文实例讲述了AngularJS ng-template寄宿方式用法.分享给大家供大家参考,具体如下: 如果你是一个angular的开发者的话,对于ng-html2js你应该 很熟悉.对于angular的指令,我们经常需要定义模板( directive template/templateUrl),你可以选择讲html page 放在真正的的web容器中寄宿,也可以选择angular的ng-template 放在view的page之上,抑或也可以讲html打成一个js文件和directive 的j

  • AngularJS入门教程之更多模板详解

    在这一步,你将实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示出来. 请重置工作目录: git checkout -f step-8 现在当你点击列表中的一部手机之后,这部手机的详细信息页面就会被显示出来. 为了实现手机详细信息视图我们将会使用$http来获取数据,同时我们也要增添一个phone-detail.html视图模板. 步骤7和步骤8之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 数据 除了phones.json,app/phones/目录也包

  • AngularJS ng-bind-template 指令详解

    AngularJS ng-bind-template 指令 AngularJS 实例 <p> 元素上绑定两个表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

  • AngularJS模板加载用法详解

    本文实例讲述了AngularJS模板加载用法.分享给大家供大家参考,具体如下: angular模板加载 ----ng-template AngularJS作为mvc(或者说mvvm)框架,同样具备模板这一基本概念. NG加载模板的顺序为 内存加载---AJAX加载. 内存加载 如果之前使用过Bootstrap 插件的ng版,即angular-ui,就会了解到这种方式的具体应用.模板本质上是字符串,把字符串直接写入内存,加载时直接从内存获取,速度会更快,有两种方式显式启用内存加载. 通过使用 $t

  • AngularJS实现根据变量改变动态加载模板的方法

    本文实例讲述了AngularJS实现根据变量改变动态加载模板的方法.分享给大家供大家参考,具体如下: directive: return { restrict: 'E', replace: true, templateUrl: 'app/view/order.html', link: function (scope, element, attrs) { scope.Type = attrs.Type; } }; 模板: <div ng-switch on="item.Type"&

  • AngularJS入门教程（二）：AngularJS模板

    是时候给这些网页来点动态特性了--用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: 复制代码 代码如下: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.你可以到GitHub去

  • AngularJS入门教程之链接与图片模板详解

    这一步,你会为手机列表的手机添加缩略图以及一些链接,不过这些链接还不会起作用.接下来你会使用这些链接来分类显示手机的额外信息. 请重置工作目录: git checkout -f step-6 现在你应该能够看到列表里面手机的图片和链接了. 步骤5和步骤6之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 数据 注意到现在phones.json文件包含了唯一标识符和每一部手机的图像链接.这些url现在指向app/img/phones/目录. app/phones/phones.js

  • AngularJS 路由和模板实例及路由地址简化方法(必看)

    AngularJS 路由和模板实例及路由地址简化方法(必看)

    最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们. 话说这AngularJs 开发项目非常的爽,其中爽就爽在它的开发模式,使得代码更加的清晰.更加具有可读性.更简洁.更具有维护性.但是在使用AngularJS开发的过程中也有让我头疼的地方,那就是目前前端框架更多的还是以Jquery为主,很多插件都是依赖于Jquery的,AngulaJS的插件少之又少(除了AngularUI其他的Angula

随机推荐