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"

首先要写上最重要的部分元素的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