AngularJS的Hello World

AngularJS不同于AngularJS2,其是一个JS框架,使用方法也和一般的JS框架差不多,无非就是在功能上扩展了html而已。尤其作为JSMVC框架,增加了一些指令之类的。一个基本的Hello World程序使用方式如下:

Step1:引入JS框架

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

需要注意的是,为加快页面的加载速度,建议在</body>底部引入。

Step2:指定AngularJS的应用程序

指定应用程序的方法是使用ng-app指令。

Step3:指定变量并绑定到标签

使用ng-model指令

Step4:进行双向的数据绑定

使用{{ng-model中绑定的变量}}

完整的hello world 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
 
<div ng-app="">
     <p>名字 : <input type="text" ng-model="name"></p>
     <h1>Hello {{name}}</h1>
</div>
 
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,679评论 0 3
  • AngularJS AngularJS概述 介绍 简称:ng Angular是一个MVC框架 其他前端框架: Vu...
    我爱开发阅读 2,358评论 0 8
  • AngularJSAngularJS 是一个 MV* 框架, 最适于开发客户端的单页面应用。它不是个功能库,...
    一直以来都很好阅读 924评论 0 0
  • 简介: AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。 Ang...
    JenniferYe阅读 1,458评论 0 13
  • 世间千百事,最牵动心弦的不过两件事,一件叫作得不到,一件叫作已失去。前者教会人放弃,后者教会人放手。 静妃娘娘年轻...
    儇舞天下阅读 385评论 0 4