`
fiftyk
  • 浏览: 23056 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
文章分类
社区版块
存档分类
最新评论

AngularJS学习(三)模板

阅读更多

JSP也算个模板吧,不过是服务端的。

 

<!DOCTYPE html>
<html ng-app><!-- 必须 -->
    <title>AngularJS学习(三)模板</title>
    <meta charset="utf-8">
    <!-- 引入angularJS -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script src="03-1.js"></script>
    <!-- ng-controller指令指定了一个控制器,见03-1.js中的定义,这个控制器的作用范围(域)即在这个div内 -->
    <div ng-controller="PhoneListCtrl">
        <!-- 这里phones定义在PhoneListCtrl内,即$scope.phones -->
        <p>手机总数:{{ phones.length }}</p>
        <ul>
            <!-- ng-repeat指令 用于循环 -->
            <li ng-repeat="phone in phones"> 
                {{ $index + 1 }}<!-- $index 用于获取循环的当前索引 -->
                {{ phone.name }}
                <p>{{ phone.snippet }}</p>
            </li>
        </ul>
        <hr>
        <!-- ng-init指令 用于初始化一个值 -->
        <div ng-init="friends = {'adam':10, 'amalie':12}">
            <p>对象:{{ friends }}</p>
            <ul>
                <!-- ng-repeat指令 另一种循环方式 -->
                <ol ng-repeat="(key,val) in friends"> 
                    {{ '第' + ($index + 1) + '属性为:' + key + ',它的值是:' + val}}<!-- $index 这种方式下依旧可用 -->
                </ol>
            </ul>
        <div>
    </div>
</html>

 

03-1.js:

var PhoneListCtrl = function($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet."},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet."}
  ];
}

 

在线示例 

1
0
分享到:
评论

相关推荐

    Angularjs标签模板加载原理

    **AngularJS标签模板加载原理详解** AngularJS,作为一款强大的前端JavaScript框架,以其双向数据绑定、模块化和...通过深入学习和实践,你可以更自如地驾驭AngularJS的模板系统,为你的Web应用带来更丰富的交互体验。

    AngularJS 学习资料

    #### 三、AngularJS服务类型 - **工厂(Factory)**:工厂是一种常用的模式,用于创建对象实例,通常包含复杂的逻辑。 - **服务(Service)**:服务是封装特定任务或一组任务的对象,可以被多个控制器共享。 - **提供商...

    AngularJS入门教程02:AngularJS模板

    【AngularJS入门教程02:AngularJS模板】 AngularJS初学者看到中文入门教程,却无法使用GitHub下载到配套的Angular的Seed工程,因此学习曲线大。 在此专门从GitHub下载配套工程打包分享给大家。 本集教程地址: ...

    AngularJS学习 chm 文件

    AngularJS的学习资料众多,其中"AngularJS学习 chm 文件"是一个方便快捷的学习资源。 CHM文件,全称是Compiled HTML Help,是一种由Microsoft开发的帮助文件格式。它将HTML页面、索引和图像等资源打包在一起,形成...

    AngularJS学习笔记

    AngularJS学习笔记是一份个人学习AngularJS过程的记录和总结,内容涵盖了AngularJS的基础概念、组件、服务、指令、过滤器、路由等各个方面。 AngularJS的核心特点之一是数据双向绑定,这允许开发者将数据模型和视图...

    AngularJS入门教程01:静态模板

    【AngularJS入门教程01:静态模板】 AngularJS初学者看到中文入门教程,却无法使用GitHub下载到配套的Angular的Seed工程,因此学习曲线大。 专门下载配套工程打包分享给大家。 本集教程地址: ...

    AngularJs学习笔记.docx

    - **模板(Templates)**:AngularJS 支持动态模板,可以使用表达式来展示数据,也可以使用指令来控制DOM结构。 #### 二、AngularJS 的安装与配置 ##### 2.1 安装 AngularJS 可以通过以下几种方式之一来获取 ...

    AngularJS 学习笔记.pdf

    数据绑定是AngularJS的核心功能,笔记中细分为从数据到模板、从模板到数据、以及相互更新三个部分。模板是视图的HTML部分,AngularJS通过数据绑定来实现数据和模板之间的动态同步。 在模板中,可以使用过滤器来格式...

    AngularJS学习总结&详细介绍

    AngularJS学习总结&详细介绍 AngularJS是一款流行的前端JavaScript框架,用于构建单页应用程序(Single Page Application,简称SPA)。下面是AngularJS学习经验总结,全中文说明: 什么是AngularJS? AngularJS...

    学习AngularJS-1.x.pdf

    AngularJS学习指南 AngularJS是一个流行的前端JavaScript框架,用于构建复杂的Web应用程序。下面是学习AngularJS的关键知识点: 一、环境准备 * 安装Node.js和npm * 安装AngularJS * 创建和配置AngularJS项目 ...

    AngularJS学习手册|Angular手册下载

    在《AngularJS学习笔记.chm》中,读者可以期待找到关于这些概念的深入解释,包括如何创建AngularJS项目,设置模块,编写控制器,使用指令,以及进行数据绑定和依赖注入的实例。此外,还可能涉及如何调试、优化...

    AngularJs 1.5.8

    虽然后来Angular(2+)版本发布,但AngularJS 1.x系列依然有大量项目在运行,对于学习和维护这些项目,理解AngularJS 1.5.8的关键特性是非常必要的。通过下载提供的压缩包,你可以得到完整的AngularJS 1.5.8库,包括...

    angularjs2快速开发模板

    通过这个模板,开发者可以学习到: - 如何构建AngularJS 2应用的基本结构。 - 如何使用`http-server`快速启动本地开发服务器。 - AngularJS 2中的模块化和依赖注入系统。 - 如何创建和使用组件,以及组件间通信的...

    AngularJS学习笔记.pdf

    #### 三、AngularJS 核心特性详解 1. **数据双向绑定** - **原理**:AngularJS 使用了脏检查(Dirty Checking)机制来实现数据双向绑定。每当应用状态发生改变时,AngularJS 会遍历所有绑定的表达式并检查它们是否...

    AngularJS学习笔记 - 进出自由,我的分享1

    【AngularJS学习笔记 - 进出自由,我的分享1】 AngularJS是一款由Google开发的JavaScript框架,用于构建富客户端Web应用程序。它强调数据绑定和依赖注入,简化了前端开发流程,尤其是在实现MVC(模型-视图-控制器)...

    AngularJS入门教程08:更多模板 [示例工程]

    在这一步,你将实现手机... AngularJS初学者看到中文入门教程,却无法使用GitHub下载到配套的Angular的Seed工程,因此学习曲线大。在此专门下载配套工程打包分享给大家。 本集教程地址: http://www.angularjs.cn/A00b

    AngularJS Eclipse 1.2.0 插件下载

    AngularJS Eclipse 1.2.0 插件是专为开发者设计的一款强大的工具,它将AngularJS框架与Eclipse集成,极大地提升了开发AngularJS...如果你是Eclipse用户并且正在使用或打算学习AngularJS,那么这个插件绝对值得你拥有。

Global site tag (gtag.js) - Google Analytics