AngularJS入门示例之Hello World详解

本文实例讲述了AngularJS入门示例Hello World。分享给大家供大家参考，具体如下：

以前项目都是使用jQuery和原始的JavaScript，最近参加一个项目需要用到AngularJS、RequireJS等比较潮的框架。这里记录自己的学习过程，虽然冠以原创之名，其实都是参考网上的一些资料，加上自己的一些实践和理解。再没有熟悉AngularJS之前，估计也不出什么高质量的文章，只能算是学习笔记和备忘录。练习使用的版本是1.2.25。

示例代码如下：

<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title>Hello,World!</title>
    <script src="angular1.2.25.js"></script>
  </head>
  <body>
    <input type="text" ng-model="yourName">
      <h1>Hello, {{yourName}}</h1>
  </body>
</html>

用浏览器打开这个网页，在文本框进行输入，发现界面会自动实时显示。如果用javascript或jquery，完成这么一个小功能，我们组要注册监听事件，获取text控件的值，然后将值塞入<h1>中显示。而使用AngularJS，我们需要做的事情是：添加ng-app，添加ng-model，使用{{yourName}}显示。很显然，使用AngularJS要简单的多，而且代码更紧凑。下面我们简单看下这3个东西的意思：

1、ng-app：它可以放在任何dom节点上，代表该结点以及它的所有子节点都在AngularJS的管理范围之内；如果去掉这个标记，发现AngularJS框架不会起效果。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello,World!</title>
    <script src="angular1.2.25.js"></script>
  </head>
  <body>
    <div ng-app>
      <input type="text" ng-model="yourName">
      <h1>Hello, {{yourName}}</h1>
    </div>
    <h1>Hello, {{yourName}}</h1>
  </body>
</html>

这次我们把ng-app放到了<div>上，可以看到div内部的<h1>能够实时显示输入的数据，而外部的<h1>没有效果。可以看到，一个html页面可以全部交予AngularJS来管理，也可以只让AngularJS管理页面的一部分，我们可以按需添加ng-app所在的dom节点。

2、ng-model：这个是AngularJS数据的双向绑定特性。简单点理解：告诉AngularJS这是个数据模型，你帮我存到内存中。界面上修改数据，内存中数据也会自动修改；修改内存中的变量值，界面显示也会自动更改。这个特性显然很方便，能够保持数据的一致性，避免我们自己加代码来完成这个功能。

3、{{yourName}}：这个是框架提供的表达式语法，能够显示内存中数据模型的值。这个跟struts2的<s:property>、<s:text>类似，就是用来显示数据的。这种只是AngularJS定义的语法格式，跟JSP页面中的EL表达式，struts2的OGNL很类似，就是一种数据的获取机制。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

赞 (0)

相关推荐

  • AngularJS使用ng-app自动加载bootstrap框架问题分析

    本文实例分析了AngularJS使用ng-app自动加载bootstrap框架问题.分享给大家供大家参考,具体如下: 前面的文章<AngularJS框架的ng-app指令与自动加载实现方法分析> 提出了使用ng-app指令的情况.之前觉得出现第4和第5种情况很奇怪,因为只看到了现象,没有看到本质.JS错误,最直观的表现方式就是:弹出一个非常不友好的JS错误窗口.当脚本出现了未捕获的错误,浏览器才会弹出错误提示.还有一种比较隐晦的表示:在浏览器的控制台输出错误信息.这提示我们:使用JS框架的时候

  • AngularJS框架的ng-app指令与自动加载实现方法分析

    本文实例分析了AngularJS框架的ng-app指令与自动加载实现方法.分享给大家供大家参考,具体如下: ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说,ng-app是可以带属性值的.如果想要实现自动加载,那么就不能让ng-app带有属性值. <html> <body ng-app> <div>div1:{{1+3*2}}</

  • Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法

    前言 在用AngularJS期间, 经常用到ng-repeat, 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last

  • 基于AngularJS实现页面滚动到底自动加载数据的功能

    要实现这个功能,可以通过 https://github.com/sroze/ngInfiniteScroll 这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序 http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改

  • AngularJS ng-app 指令实例详解

    AngularJS ng-app 指令 AngularJS 实例 让 body 元素称为 AngularJS 应用的根元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

  • Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍

    Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍

    ng-repeat-start与ng-repeat-end时AngularJS(1.2.x)扩展的,使用这两个指令可以灵活控制遍历形式. 例如: index.html <div class="uk-panel" ng-controller="UserCtrl"> <ul class="uk-list uk-list-striped"> <li ng-repeat-start="user in users&q

  • AngularJS实现网站换肤实例

    AngularJS实现网站换肤实例

    网站不应该只注重功能,还应该注重用户体验:成熟的大型网站大都具备让用户自行选择主题及颜色的功能,AngularJS也可以做到这点. 效果图: 原理是使用ng-href来动态为网页更换样式: <link rel="stylesheet" type="text/css" ng-href="{{theme.value}}.css"> 代码: <!DOCTYPE html> <html ng-app="app&qu

  • angularjs中ng-attr的用法详解

    前言 html中的属性很多,同样可以使用angularjs来定义: ng-attr-(suffix)=只能使用变量定义 <div title="angularjs中的title">title</div> <div ng-attr-title="angularjs中的title">title</div><!--这样写显示不出来标题--> <div ng-attr-title="'angular

  • AngularJS 在同一个界面启动多个ng-app应用模块详解

    AngularJS默认在一个html界面中只启动一个 ng-app 模块,而且是界面中第一次出现的那个使用 ng-app 声明的模块,该问题可以通过查看AngularJS源代码或者是文档验证. 解决方案: 直接上代码,如果有兴趣了解其中缘由,可以选择阅读后面的部分: <!DOCTYPE html> <html> <head lang="zh_CN"> <meta charset="UTF-8"> <title&g

  • AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法

    本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法.分享给大家供大家参考,具体如下: 接着前面那篇<AngularJS使用ng-app自动加载bootstrap框架问题分析>,现在我们看下如何使用带属性值的ng-app命令,让ng-app自动加载我们自定义的模块作为根模块. <!DOCTYPE html> <html> <head> <script src="angular.js">&l

随机推荐