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