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>

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

  1. AngularJS入门篇

    AngularJS是一个JavaScript框架,它通过指令扩展了HTML,且通过表达式绑定数据到 HTML.顺便一提,什么是框架?比如struts2.spring.hibernate.thinkph ...

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

    下面做的是一个更新时间的效果,每一秒钟就会更新一下,视图中会显示出当前的时间   下面的这个例子中,SceondController函数将接受两个参数,既该DOM元素的$scope和$timeout. ...

  3. AngularJS入门心得3——HTML的左右手指令

    在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...

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

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

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

    现在我也在学习Swift语言,常常去逛很多苹果社区和论坛,看到了圈子很多奇怪的现象,发现很多人都赶忙去翻译 Swift书籍 和 发布Swift的视频 .他们这种对新知识的探索精神我本人是很佩服的.但是 ...

  6. PHP学习笔记 - 入门篇(2)

    PHP入门篇(2) 什么是变量 变量是用于存储值的容器,如下 $var = @"6666" 如何定义变量 定义变量就是像服务器的内存申请空间,用来存储数据,eg: <?php ...

  7. Mr.聂 带你成为web开发大牛——入门篇(上)

    作为一名IT届的后生,当初也经历过懵懂无知的实习期,对那种无力感深有体会.在这,希望能用我这几年的开发经验,让各位即将踏入或者刚刚踏入web开发领域的新人们少走些弯路.鉴于这是入门篇,下面我就从零为大 ...

  8. 腾讯QQ会员技术团队:人人都可以做深度学习应用:入门篇(下)

    四.经典入门demo:识别手写数字(MNIST) 常规的编程入门有"Hello world"程序,而深度学习的入门程序则是MNIST,一个识别28*28像素的图片中的手写数字的程序 ...

  9. 前端向后台的华丽转身 — PHP入门篇

    三个月就这么悄悄溜走了,本K对于前端虽然有了一定的认识,但对一些方面还是处于一种比较萌币的状态,就在这种萌币状态下,本K又跟着大神浩开始了后台语言-PHP语言的学习.PHP的学习对于学过其他语言的人来 ...

随机推荐

  1. c++ Arx二次开发创建椭圆和样条曲线

    一.本节课程 c++ Arx二次开发创建椭圆和样条曲线 二.本节要讲解的知识点 1.如何应用C++ ARX二次开发创建椭圆(对AcDbEllipse类的构造函数的直接封装和根据外接矩形来创建椭圆) 2 ...

  2. MySQL数据库--外键约束及外键使用

    什么是主键.外键关系型数据库中的一条记录中有若干个属性,若其中某一个属性组(注意是组)能唯一标识一条记录,该属性组就可以成为一个主键. 比如: 学生表(学号,姓名,性别,班级) 其中每个学生的学号是唯 ...

  3. 在eclipse中编译调试ns3

    1首先把ns3项目导入eclipse 然后把上面的的ns3按照上面的提示即可导入成功.   然后可以运行一下 ./waf configure     2 配置C/C++ Build 右键工程,选择属性 ...

  4. ELK Stack (1) —— ELK + Redis安装

    ELK Stack (1) -- ELK + Redis安装 摘要 安装Elasticsearch.Logstash.Kibana与Redis以实现一个日志收集平台 版本 elasticsearch版 ...

  5. HDU 2029 算菜价

    http://acm.hdu.edu.cn/showproblem.php?pid=2090 Problem Description 妈妈每天都要出去买菜,但是回来后,兜里的钱也懒得数一数,到底花了多 ...

  6. 转Git学习碰到的问题

    [原]Git学习碰到的问题 1.通过 windows 下的 gitbash 连接 github 时 $ ssh-keygen -t rsa -C "abcd@efgh.com" / ...

  7. synchronized、Lock、ReentrantLock、ReadWriteLock

    synchronized:同步锁,是java内置的关键字.当一个线程A执行到被synchronized修饰的方法时,其他线程B如果也要执行这个方法,那么B只能等A执行完方法释放锁后才能获取资源锁执行s ...

  8. spring boot 系列之六:深入理解spring boot的自动配置

    我们知道,spring boot自动配置功能可以根据不同情况来决定spring配置应该用哪个,不应该用哪个,举个例子: Spring的JdbcTemplate是不是在Classpath里面?如果是,并 ...

  9. 【刷题】LOJ 6121 「网络流 24 题」孤岛营救问题

    题目描述 1944 年,特种兵麦克接到国防部的命令,要求立即赶赴太平洋上的一个孤岛,营救被敌军俘虏的大兵瑞恩.瑞恩被关押在一个迷宫里,迷宫地形复杂,但幸好麦克得到了迷宫的地形图.迷宫的外形是一个长方形 ...

  10. 【题解】 bzoj3105: [cqoi2013]新Nim游戏 (线性基+贪心)

    bzoj3105,懒得复制 Solution: 首先你要有一个前置技能:如果每堆石子异或和为\(0\),则先手比输 这题我们怎么做呢,因为我们没人要先取掉几堆,为了赢对方一定会使剩下的异或和为\(0\ ...