AngularJS输出helloworld
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）来实现数据变化更新机制，相比于通过在数据模型上绑定事件监听的机制，这种方案更加高效。
转载声明，纯属抄袭
学习了AngularJS的基本概念，通过一个helloworld实例来学习如何使用AngularJS构建一个简单的AngularJS应用
AngularJS输出helloworld的更多相关文章
- 项目自动化建构工具gradle 入门2——log4j输出helloWorld
上一章节呢,有一个能跑的程序了.但是对做工程的人来说,用日志输出感觉比用System.out要有档次一点.比如使用log4j.直接上例子: 1进入D:\work\gradle\log目录 ,您电脑没 ...
- Java语言输出HelloWorld
1.新建一个名为HelloWorld.txt的文本文件. 2.将HelloWorld.txt改为.java. 3.将HelloWorld.java用文本文件的方式打开,并输入代码. 4.打开命令行,进 ...
- 初识AngularJS 之 HelloWorld和数据绑定
1.Hello World 我用的开发工具是 atom ,大家有需要的话可以找我要安装包嘻嘻 第一步: 写入以下代码: <!DOCTYPE html> <html ng-ap ...
- less本地环境输出hello-world
在学任何东西之前, 我就是有个习惯, 先搞定这个东西最最简单的使用方法. 然后在 深入学习, 毫无疑问hello-world一直是那么简单. 准备环境 较新版的高级浏览器. WAMP环境. less. ...
- eclipse的springMVC环境搭建并输出HelloWorld
spring简单介绍:https://www.cnblogs.com/package-java/p/10368672.html 1.创建一个Maven Project项目 点击下一步 点击下一步 2. ...
- 不同编程语言实现输出“HelloWorld!”
对于大多数程序语言,第一个入门编程代码便是"Hello World!",下面分别使用不同的语言输出"Hello World!":1. java语言 public ...
- CUDA学习（一）之使用GPU输出HelloWorld
最近在学习CUDA,编程入门第一步便是“HelloWorld”,主要代码如下: #include "cuda_runtime.h" #include "device_la ...
- 项目自动化建构工具gradle 入门1——输出helloWorld
先来一个简单的例子,4个步骤: 1.进入D:\work\gradle\java 目录 ,您电脑没这目录? 那辛苦自己一级一级建立起来吧 新建文件build.gradle,文件内容是: apply p ...
- 使用java输出helloworld
public class tset{ public static void main(String[] args)( System.out.println(helloworld); ) }
随机推荐
- 雷林鹏分享：XML DOM
XML DOM DOM(Document Object Model 文档对象模型)定义了访问和操作文档的标准方法. XML DOM XML DOM(XML Document Object Model) ...
- Juniper基础配置
root> show configuration | display set 配置按set行显示,查看的配置为未commit的配置(commit check)root# set sys ...
- 机器学习基石（台湾大学 林轩田），Lecture 2: Learning to Answer Yes/No
上一节我们跟大家介绍了一个具体的机器学习的问题,以及它的内容的设定,我们今天要继续下去做什么呢?我们今天要教大家说到底我们怎么样可以有一个机器学习的演算法来解决我们上一次提到的,判断银行要不要给顾客信 ...
- Selenium自动化测试框架入门整理
关注嘉为科技,获取运维新知 本文主要针对Selenium自动化测试框架入门整理,只涉及总体功能及框架要点介绍说明,以及使用前提技术基础要求整理说明.作为开发人员.测试人员入门参考. 本文参考:Se ...
- vue动画
最近想搞搞vue的过渡和动画,以为照着官网写就好了,谁知道还是出现一些状况 具体表现就是不用webpack打包时候写的过渡是正常的,而用了webpack打包就不正常了 说使用了未定义的element: ...
- android ------- TCP与UDP
TCP TCP(Transmission Control Protocol,传输控制协议) 即传输控制协议,是一种传输层通信协议 特点:面向连接.面向字节流.全双工通信.可靠 面向连接:指的是要使用T ...
- CSU OJ 1340 A Sample Problem
Description My girlfriend loves 7 very much, she thinks it is lucky! If an integer contains one or m ...
- leetcode-algorithms-17 Letter Combinations of a Phone Number
leetcode-algorithms-17 Letter Combinations of a Phone Number Given a string containing digits from 2 ...
- webpack配置路径及hash版本号，利用html-webpack-plugin自动生成html模板
在项目中,因为需要经常更新文件,但是浏览器缓存问题导致js文件不是最新的,所有想办法添加hash值. 并配置webpack打包文件配置路径: 配置webpack打包文件路径,及非入口 chunk文件: ...
- 函数使用六：ABAP4_CALL_TRANSACTION
此函数是在程序中调用一个事物代码,跳转或者执行事物代码的程序. 参数说明: Import TCODE 执行的事物代码 SKIP_SCREEN ...