AngularJs学习第一课 Hello World
首先先介绍一下:AngularJS是干什么的。
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。
开始学习AngularJs，先创建一个经典应用程序"Hello World"
使用你最喜欢的编译器，创建一个HTML文件，例如angulary.html
源码:
| <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </head> <body ng-app> <div> <input type="text" ng-model="World" placeholder="Enter a name here"> <h1>Hello, {{World}}!</h1> </div> </body> </html> |
运行HelloWorld 效果:
输入文字之前
输入文字之后
下面我们介绍一下我们都干了什么?
ng-app
ng-model="World"
{{World}}
首先 要写上最重要的部分 元素的ng-app属性。少了这个属性，AngularJS就没法开始工作。
ng-app可以放到<html>标签中也可以放到 当前<div>中。
其次，我们告诉AngularJS，对页面上的“World”也就是在输入时候的 ng-model="World"属性， 这个Model进行双向数据绑定。<input type="text" ng-model="World" placeholder="Enter a name here">
最后，我们告诉AngularJS，在“{{ World}}”这个指令模版上显示“World”这个Model的数据。
希望此文章对大家学习AngularJS有所帮助，本人能力有限，文章有不足之处欢迎指正。
本次学习来自伯乐在线的 七步AngularJS
AngularJs学习第一课 Hello World的更多相关文章
- AngularJS学习第一课
AngularJS2与AngularJS1有很大的不同. AngularJS2支持ECMAScript6,为了提升性能,支持移动化开发(安卓.ios平台),因此升级为AngularJS 2,Angul ...
- Magento学习第一课——目录结构介绍
Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...
- Elasticsearch7.X 入门学习第一课笔记----基本概念
原文:Elasticsearch7.X 入门学习第一课笔记----基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https: ...
- MFC学习-第一课 MFC运行机制
最近由于兴趣爱好,学习了孙鑫的MFC教程的第一课.看完视频了,自己便用visual studio 2010尝试了MFC编程,其中遇到了一些问题. 1.vs2010不像vs6.0那样可以新建一个空的MF ...
- python学习第一课要点记录
写在要点之前的一段话,留给将来的自己:第一次参加编程的培训班,很兴奋很激动,之前都是自己在网上找免费的视频来看,然后跟着写一些课程中的代码,都是照着模子写,没有自己过多的思考.感觉这样学不好,除了多写 ...
- python学习第一课
第一课: 1.不要使用来路不明的软件 2.下载杀毒软件 3.不懂技术的人在技术人面前会显得愈发无知 4.python无所不能 需要掌握的知识: 1.python基本语法 2.文件处理 3.函数 4.模 ...
- angularjs学习第一天笔记
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- Kotlin学习第一课：从对比Java开始
1. 介绍 今年初,甲骨文再次对谷歌所谓的安卓侵权使用Java提起诉讼,要求后者赔偿高达90亿美元.随后便传出谷歌因此计划将主力语言切换到苹果主导的Swift,不过这事后来没了跟进. 但谷歌在这两天的 ...
- Asp.net MVC4高级编程学习笔记-视图学习第一课20171009
首先解释下:本文只是对Asp.net MVC4高级编程这本书学习记录的学习笔记,书本内容感觉挺简单的,但学习容易忘记,因此在边看的同时边作下了笔记,可能其它朋友看的话没有情境和逻辑顺序还请谅解! 一. ...
随机推荐
- Java 多态——与C++的比较
学习了Java和C++之后,由于长期不使用C++,而java的基础知识掌握不牢,现在已经搞不清java多态了.现在先来谈谈java多态,稍后有时间再更新C++的多态,并进行比较~ 一. Java的多态 ...
- 快速入门系列--TSQL-01基础概念
作为一名程序员,对于SQL的使用算是基础中的基础,虽然也写了很多年的SQL,但常常还是记不清一些常见的命令,故而通过一篇博文巩固相关的记忆,并把T-SQL本身的一些新特性再进行一次学习. 首先回顾基础 ...
- Vertex and Fragment Shader
Semantics语义词: 定义:GPU工作时,数据通常暂存在寄存器,那么在Cg中,语义词就指定了输入/输出数据和图形硬件寄存器之间的映射关系. 原理:根据输入语义,图形处理器从某个寄存器取数据:然后 ...
- IOS MBProgressHUD的使用
一,简介 苹果的应用程序一般都会用一种优雅的,半透明的进度显示效果,不过这个API是不公开的,因此你要是用了,很可能被清除出AppStore.而 MBProgressHUD提供了一个替 ...
- LCA算法的理解
LCA思想: 在求解最近公共祖先为问题上,用到的是Tarjan的思想,从根结点开始形成一棵深搜树,非常好的处理技巧就是在回溯到结点u的时候,u的子树已经遍历,这时候才把u结点放入合并集合中, 这样u结 ...
- 如何让nodejs同步操作
众所周知,异步是nodejs中得天独厚的特点和优势,但同时在程序中同步的需求(比如控制程序的执行顺序为:func1 -> func2 ->func3 )也是很常见的.本文就是对这个问题记录 ...
- 图像映射map
<map>标签:带有可点击区域的图像映射 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 效果图: 点击相应蓝色标签可进入详情页面浏览. 代码: < ...
- 【Java基础】方法
Num1:检查参数的有效性 绝大多数的方法和构造器对于传递给它们的参数值都会有某些限制.比如:索引值必须是非负数,对象引用不能为null等等.这些都很常见,你应该在文档中清楚地指明所有这些限制,并在方 ...
- C#抓取天气数据
使用C#写的一个抓取天气数据的小工具,使用正则匹配的方式实现,代码水平有限,供有需要的同学参考.压缩包中的两个sql语句是建表用的. http://files.cnblogs.com/files/yu ...
- 第20/24周 死锁（Deadlocking）
大家好,欢迎回到性能调优培训.今天讨论SQL Server里的死锁(Deadlocking),第5个月的培训就结束了.当2个查询彼此等待,没有查询可以继续它的工作就会发生死锁.第一步我会概括介绍下SQ ...