AngularJS是什么?

AngularJS是目前很火的前端JS框架之一, AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架。它是完全使用JavaScript编写的客户端技术，其设计初衷是为了解决html构建web应用不足的缺陷，通过扩展html的语法，允许用户更容易清楚的构建单页面的应用。它主要包含四个核心思想：依赖注入、模块化、双向绑定、和语义化标签。其中依赖注入和双向绑定是其最大的创新点，相比于JQuery等其他框架, 用户不必写大量的代码了。

AngularJS遵循MVC的设计的框架（也有人说是model-view-whatever框架），在Angular中扮演mode的角色被称为作用域（scope），Html构建的视图脚本则被称为view，JavaScript函数定义自然充当控制器的角色。利用它，开发者可以将页面的一部分封装为一个应用，不强迫整个页面使用AngularJs进行开发，这样使得AngularJs可以和许多其他的web技术结合使用。

AngularJS HelloWorld

Angular JS入门和容易，到达中级水准需要对背后的原理有翻了解，到达专家级别需要大量的工程实践经验。作为初学者，我们先从一个Helloworld说起。代码如下，代码中包含入门的注释：

<!DOCTYPE html>

<!--ng-app用于标识AngularJS的应用范围，置于html标签上表明整个单页面应用在Ags的影响范围内-->

<html ng-app>

<head>

    <title>HelloWorld APP</title>

    <!--引入AngularJS-->

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<!--ng-model指令将内部数据模型对象($scope)中的name属性绑定到了文本输入字段上，  这意味着无论在文本输入字段中输入了什么,都会同步到数据模型中。-->

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

<!--使用{{}}将name包起来，以显示￥scope中的name值-->

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

</body>

</html>

当我们在输入框中输入World, 在Hello之后会自动填充输入框输入的内容World.

本例中我们仅仅使用了十几行的代码就写出了一个Helloworld应用，而且没有使用java script代码就创建出了实时视图应用，自动数据绑定是实现这一功能的关键。自动数据绑定可以理解view是数据模型的映射，当客户端的数据发生变化时，视图实时反映出这种变化。

AngularJs通过脏检查（$digist）来实现数据变化更新机制，相比于通过在数据模型上绑定事件监听的机制，这种方案更加高效。

Conclusion

今天学习了AngularJS的基本概念，通过一个helloworld实例来学习如何使用AngularJS构建一个简单的AngularJS应用。快乐每一天。

AnguarJS 第一天----Hello World的更多相关文章

  1. 菜鸟Python学习笔记第一天：关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

  2. 从0开始搭建SQL Server AlwaysOn 第一篇（配置域控）

    从0开始搭建SQL Server AlwaysOn 第一篇(配置域控) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnb ...

  3. TODO：即将开发的第一个小程序

    TODO:即将开发的第一个小程序 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验.个人理解小程序是寄宿在微信平台上的一个前端框架,具有跨平台功能, ...

  4. ExtJS 4.2 第一个程序

    本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index ...

  5. 《Django By Example》第一章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:本人目前在杭州某家互联网公司工作, ...

  6. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第一章：创建基本的MVC Web站点

    在这一章中,我们将学习如何使用基架快速搭建和运行一个简单的Microsoft ASP.NET MVC Web站点.在我们马上投入学习和编码之前,我们首先了解一些有关ASP.NET MVC和Entity ...

  7. Python爬虫小白入门（四）PhatomJS+Selenium第一篇

    一.前言 在上一篇博文中,我们的爬虫面临着一个问题,在爬取Unsplash网站的时候,由于网站是下拉刷新,并没有分页.所以不能够通过页码获取页面的url来分别发送网络请求.我也尝试了其他方式,比如下拉 ...

  8. spring boot 实战：我们的第一款开源软件

    在信息爆炸时代,如何避免持续性信息过剩,使自己变得专注而不是被纷繁的信息所累?每天会看到各种各样的新闻,各种新潮的技术层出不穷,如何筛选出自己所关心的? 各位看官会想,我们是来看开源软件的,你给我扯什 ...

  9. 为什么很多SaaS企业级产品都熬不过第一年

    因工作缘由,笔者与周边数位SaaS企业级应用的创始人.运营负责人有过深入接触,发现一个有趣的现象:刚起步时,蓝图远志.规划清晰,但是一路下来,却异常艰难,有些甚至熬不过第一年,就关门歇业. 2015年 ...

随机推荐

  1. 2016 Google中国开发者大会游记

    本文地址:http://www.cnblogs.com/likeli/p/6146117.html 写在前面 平时一直埋头写代码,这次既然Google给了门票,也就来看看,看看这种世界顶尖的科技公司, ...

  2. Element-ui,Mint-ui

    style-loader css-loader style!css 饿了么团队开源一个基于vue 组件库 elementUI PC MintUI 移动端 官网: http://element.elem ...

  3. Poj The xor-longest Path 经典题 Trie求n个数中任意两个异或最大值

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5646   Accepted: 1226 Description In an ...

  4. 如何获取ResultSet的行数和列数

    当我们执行数据库查询返回一个ResultSet的时候,很多情况下我们需要知道这个ResultSet的大小,即它的行数和列数.我们知道它的列数可以通过resultSet.getMetaData().ge ...

  5. 用Fiddler的自动响应模拟系统集成

    1. 下载最新版本的Fiddler Fiddler 官网 2, 安装并启动Fiddler 3, 勾选自动响应 见上图 4, 添加自动响应规则 见上图 5, 添加自动响应内容文件 添加响应文件到Fidd ...

  6. Swift #function 和 _cmd (Objective-C)

    NSStringFromSelector(_cmd); // Objective-C print(__FUNCTION__) // Swift 2 print(#function) // Swift ...

  7. Ue4的容器（数据结构）

    之前都没注意,作为程序眼这些还是比较重要的 Engine\Source\Runtime\Core\Public\Containers\

  8. 前端CSS规范整理_转载、、、

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...

  9. php与数据库代码开发规范

    php与数据库代码开发规范 1/25/2016 6:00:31 PM php对各类变量命名规范 目录名 文件命名 局部变量命名 使用英文动词名词,用下划线作为单词的分割,所有字母均使用小写 目录 up ...

  10. 统计学习方法 --- 感知机模型原理及c++实现

    参考博客 Liam Q博客 和李航的<统计学习方法> 感知机学习旨在求出将训练数据集进行线性划分的分类超平面,为此,导入了基于误分类的损失函数,然后利用梯度下降法对损失函数进行极小化,从而 ...