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高级编程这本书学习记录的学习笔记,书本内容感觉挺简单的,但学习容易忘记,因此在边看的同时边作下了笔记,可能其它朋友看的话没有情境和逻辑顺序还请谅解! 一. ...
随机推荐
- 关于页面查询多数据查询问题（foreach）
最近纠结的一个问题,就是页面综合查询总报错,之前用过传参用list传就没问题,但现在用map总是报错,缓释直接贴图吧,希望对遇到问题的朋友有帮助页面传来参数,之前是 这样写的,直接将拿来的数据封装成一 ...
- XML学习笔记2——DTD
在上一篇笔记中,将文档类型分类时,曾经根据文档是否使用并遵守了DTD或Schema来区分为格式良好的XML和有效的XML,那么什么是DTD和Schema呢?DTD和Schema都是用来规范XML文档的 ...
- .NET实现Office Excel自定义公式 广泛应用于报表与数据分析
在管理软件开发的功能点中,有相当一部分功能是与Excel做数据交互,产生Excel 数据报表.如果Excel报表的数据计算方法很有规律可循,则可以通过自定义公式来解决.比如常见的资产负债表,利润表,取 ...
- C# 集合类 ：（Array、 Arraylist、List、Hashtable、Dictionary、Stack、Queue）
我们用的比较多的非泛型集合类主要有 ArrayList类 和 HashTable类.我们经常用HashTable 来存储将要写入到数据库或者返回的信息,在这之间要不断的进行类型的转化,增加了系统装箱和 ...
- 了解HTML表单之input元素的23种type类型
目录 传统类型 text password file radio checkbox hidden button image reset submit 新增类型 color tel email url ...
- 34988 Happy Reversal(二进制去取反)
/* 题意:给多个二进制数,对某些数进行按位取反操作! 然后从中找到最大数和最小数,并输出他们的差值! 注意:所有的数都是整数,包括取反之后 思路:一个n为二进制数x,令tmp为n位全1!则 y=tm ...
- MemCache在win7上的可视化配置以及Nodejs/Net应用
惯例科普:MemCache是一套分布式的高速缓存系统,由LiveJournal的Brad Fitzpatrick开发,但目前被许多网站使用以提升网站的访问速度,尤其对于一些大型的.需要频繁访问数据库的 ...
- HTML5的学习--performance
HTML5提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp),以方便我们进行前端分析. 它是浏览器的直接实现,比在网页中用js设置D ...
- 漫谈可视化Prefuse（二）---一分钟学会Prefuse
前篇<漫谈可视化Prefuse(一)---从SQL Server数据库读取数据>主要介绍了prefuse如何连接数据库sql server并读取数据进行可视化展现. 回头想想还是应该好好捋 ...
- 第17/24周 悲观并发控制（Pessimistic Concurrency）
大家好,欢迎回到性能调优培训.今天标志着第5个月培训的开始,这个月我们会谈论SQL Server里的锁.阻塞和死锁(Locking, Blocking, and Deadlocking). SQL S ...