AngularJS入门笔记01

AngularJS 表达式

使用ng-repeat 来循环数组
<div ng-app="" ng-init="names=[‘Jani‘,‘Hege‘,‘Kai‘]">
    <ul>
        <li ng-repeat="x in names">
            {{ x }}
        </li>
    </ul>
</div>

<div ng-app="" ng-init="names=[
{name:‘Jani‘,country:‘Norway‘
},
{name:‘Hege‘,country:‘Sweden‘},
{name:‘Kai‘,country:‘Denmark‘}
];countrys=[
{name:‘1‘,country:‘a‘},
{name:‘2‘,country:‘b‘},
{name:‘3‘,country:‘c‘}
]">
    <p>循环对象:</p>
    <ul>
        <li ng-repeat="x in names">
            {{x.name + ‘,‘ + x.country}}
        </li>

        <li ng-repeat="y in countrys">
            {{y.name + ‘,‘ + y.country}}
        </li>
    </ul>
</div>

时间: 2024-11-08 10:08:43

AngularJS入门笔记01的相关文章

Angular系列----AngularJS入门教程01:AngularJS模板 (转载)

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

[转载]AngularJS入门教程01:静态模板

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

跟我从0开始学angularjs-笔记01

一.angularjs简介 AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用 数据绑定 和 依赖注入,它使你不用再写大量的代码了.这些全都是通过浏览器端的Javascript实现,这也使得它能够完美地和任何服务器端技术结合. 说了这么多,估计你啥都没有理解...对吗?别着急,我来说说他的几个特点吧:模块化,数据双向绑定,依赖注入,指令.下面我们就跟着这几个特点进行学习.

AngularJS入门笔记

演示了AngularJS的基本使用套路 功能: 使用AngularJS将文本框中输入的值绑定到angularJS的声明变量中去,接着将其显示到<li>标签中 1.声明angular的一个作用模块,这里对应第24行,同时在第2行声明此模块的"作用边界",对应指令ng-app, todoList关键词和第24行对应 2.第25行为module注册controller,其中关键词和第8行ng-controller指令对应 3.在第26行声明变量task, 然后对应这里第10行的n

AngularJS 学习笔记--01

学习 AngularJS 要先了解 MVC 模式 , 即 " 模型--视图--控制器 " . 模型: 包含了需要用到的数据 ; 有两种广义上的模型 : 视图模型 , 只表示从控制器传往视图的数据 ; 领域模型 , 包含了业务领域的数据 , 以及用于创建 , 存储和操纵这些数据的各种操作 , 转换和规则 , 统称为模型逻辑 . 控制器 : 是数据模型和视图之间的渠道 , 控制器会向作用域中添加业务领域逻辑 ( 也称为行为 ) , 其中作用域是模型的子集 ; 视图: 使用 HTML 元素来

AngularJS入门笔记02

<body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var app = angular.module("myApp",[]); app.directive("runoobDirective",function () { return { template :"<h1>自定义指令!</h1

AngularJS快速入门指南01:导言

AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 本指南旨在帮助你尽可能快速而有效地学习AngularJS.通过该指南你会学习到AngularJS的一些基本特性,例如指令.表达式.过滤器.模块和控制器等.以及其它所有你需要知道的有关AngularJS的东西,如事件.DOM节点.表单.用户输入.数据验证.Http对象等. AngularJS快速入门指

AngularJS入门学习笔记一

首先声明: 本博客源自于学习:跟我学AngularJs:AngularJs入门及第一个实例.通过学习,我自己的一些学习笔记. 1.AngularJS的一些基本特性 (1)使用双大括号{{}}语法进行数据绑定: (2)使用DOM控制结构来实现迭代或者隐藏DOM片段: (3)支持表单和表单的验证: (4)能将逻辑代码关联到相关的DOM元素上: (5)能将HTML分组成可重用的组件. 他是MVC结构的,有双向数据绑定的特点.下图是双向数据绑定的图解: 使用DOM作为输入,而不是字符串,是Angular

【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇

为了进一步学习PHP,本周我选定了慕课网的PHP工程师学习计划, 从今天2015-07-06 10:24:47开始从头学习:计划本周尽快学习完成本课程,谨此作为笔记. 有个好的学习计划和思路非常非常重要,非常感谢慕课网提供本套学习计划,希望更多地学习平台能提供像这样全面一条龙学习思路清晰地教程. 计划图:链接 我的学习状况:2015-07-06 10:29:46 开始随记: php工程师学习计划笔记——01 入门必学web基础 htmlcss基础课程 篇 入门篇: text-align:cent