angularJs入门篇-hello world 开头

AngularJS 采用了完全不同的解决方案,它创建实时视图模板代替视图,而不是将数据合并进模板之后更新DOM。

任何一个独立视图组件中的值都是 动态替换的。这个功能可以说是AngularJS中最重要的功能之一。

自动数据绑定使我们可以将视图理解为 模型状态的映射

MCV 是一种软件架构设计模式,它将表现从用户交互中分离出来。通常来讲,模型中包含应用的数据和与数据进行交互的

方法,视图将数据呈现给用户,而控制器则是二者之间的桥梁。

//那么如下 就是我们第一个AngularJS的例子

<input ng-model="name" type="text" placeholder="hello world">

<h1>Hello {{ name }}</h1>

在AngularJS中如果遇到了$符号,你都可以只把它看作是一个AngularJS对象

AngularJS中最特别的就是双向绑定,这就意味着如果视图改变了某个值,数据模型会通过脏检查观察到这个变

化,而如果数据模型改变了某个值,视图也会依据变化重新渲染。

那么应该讲解下什么是控制器了,那么接下来就写我们的第一个控制器

//////////// HTML

<div ng-controller="FirstController">

<input ng-model="person.name" type="text" placeholder="your name">

<h1>HELLO {{ person.name }}</h1>

</div>

//////////// SCRIPT

<script type="text/javascript">

angular.module("myApp", [])

.controller("FirstController", function($scope) {

$scope.person = {

"name": "M-lin"

};

});

</script>

时间: 2024-10-07 07:03:24

angularJs入门篇-hello world 开头的相关文章

AngularJs入门篇-控制器的加深理解基础篇

下面做的是一个更新时间的效果,每一秒钟就会更新一下,视图中会显示出当前的时间   下面的这个例子中,SceondController函数将接受两个参数,既该DOM元素的$scope和$timeout. 可以将视图中clock变量用{{}}包起来,以显示$scope中的clock的值. ///////////////  THML <div ng-controller="SceondController"> <h5>{{ clock }}</h5> &l

angularjs入门学习【指令篇】

一.首先我们来了解下指令API 属性 含义 restrict 申明标识符在模版中作为元素,属性,类,注释或组合,如何使用 priority 设置模版中相对于其他标识符的执行顺序 Template 指定一个字符串式的内嵌模版,如果你指定了模版是一个URL,那么是不会使用的 tempateUrl 指定URL加载的模版,如果你已经指定了内嵌的模版字符串,那么它不会使用的 Replace 如果为真,替换当前元素,如果是假或未指定,拼接到当前元素 Transclude 移动一个标识符的原始字节带你到一个新

AngularJS入门心得2——何为双向数据绑定

前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉的.看过了大漠的视频,算是了解了AngularJS的一些优良特性.后来准备投身<AngularJS权威教程>,跟着它走,可是一来可能自己道行不够,二来,个人觉得这本书翻译的有些生硬以及一些瑕疵,比如: (1)9.2节:在指令中适用自作用域 (2)9.2节:在指令中适用自作用域 当然,以上都是一些瑕

MYSQL新手入门篇

MYSQL新手入门篇 一.数据库的简介 什么是数据库? 数据的仓库,如:在atm的实例中我们创建一个db目录称之为数据库 什么是 MySQL.Oracle.SQLite.Access.MS SQL Server等 ? 他们是数据库软件,主要功能为两部分:1.讲数据保存到内存或者文件.2.接受特定的命令对数据进行操作 什么是SQL? 上述问题说过,数据库要接受特定的命令,这个命令就是用SQL编写,他是结构化查询语言(Structured Query Language)的缩写,一种专门与数据库交互的

PHP学习笔记——入门篇(1)——语法&变量

基础 PHP 语法 PHP 脚本可放置于文档中的任何位置. PHP 脚本以 <?php 开头,以 ?> 结尾: PHP 文件通常包含 HTML 标签以及一些 PHP 脚本代码. 注释:PHP 语句以分号结尾(;).PHP 代码块的关闭标签也会自动表明分号(因此在 PHP 代码块的最后一行不必使用分号). PHP 支持三种注释: //单行注释 #单行注释 /*多行注释*/ PHP 大小写敏感区分: 在 PHP 中,所有用户定义的函数.类和关键词(例如 if.else.echo 等等)都对大小写不

sed修炼系列(一):花拳绣腿之入门篇

本文为花拳绣腿招式入门篇,主要目的是入门,为看懂sed修炼系列(二):武功心法做准备.虽然是入门篇,只介绍了基本工作机制以及一些选项和命令,但其中仍然包括了很多sed的工作机制细节.对比网上各sed相关文章以及介绍sed的书籍,基本上都只介绍了sed是如何使用的,却没有"How sed Works"这种工作机制的原理性内容,最多给出一段稍微解释下.即使是非常流行的<sed & awk>也只是零零散散地介绍了一些sed工作机制细节.我想本文必能刷新你对sed的认知.

Swift入门篇-基本类型(2)

现在我也在学习Swift语言,常常去逛很多苹果社区和论坛,看到了圈子很多奇怪的现象,发现很多人都赶忙去翻译 Swift书籍 和 发布Swift的视频 .他们这种对新知识的探索精神我本人是很佩服的.但是我也觉得语言都没有发布几天,就赶忙去翻译书籍和Swift视频,然后讲SWift语言多么优美和多么好.我个人觉得他们都没有静下心来,去敲代码和研究Swift语言到底好在那里,而急于去翻译 未免也太草率了. 今天主要分享的是 swift中基本类型的 下半部分.如果您对 SWift 中变量和常量 不是很清

netty深入学习之中的一个: 入门篇

netty深入学习之中的一个: 入门篇 本文代码下载: http://download.csdn.net/detail/cheungmine/8497549 1)Netty是什么 Netty是Java NIO之上的网络库(API).Netty 提供异步的.事件驱动的网络应用程序框架和工具,用以高速开发高性能.高可靠性的网络服务器和客户端程序. 2)Netty的特性 统一的API.适用于不同的协议(堵塞和非堵塞).基于灵活.可扩展的事件驱动模型.高度可定制的线程模型.可靠的无连接数据Socket支

Farseer.net轻量级开源框架 V1.x 入门篇:表的数据操作

导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 V1.x 入门篇:表实体类映射 下一篇:Farseer.net轻量级开源框架 V1.x 入门篇:视图实体类映射 前言 先跟大家抱歉下,教程迟迟没有更新,因为一个人的精力实在有限(借口?好吧,我认了). 想要Farseer.Net发展的更好,需要认真.客观解读群里朋友们的建议,实际上也确实是这样,有些思想.功能自己确实没想到(必境我自己所能接触的业务场景是非常有限的). 当然在考虑Farse