AngularJS入门教程之Helloworld示例


Posted in Javascript onDecember 25, 2016

本文实例讲述了AngularJS入门教程之Helloworld示例。分享给大家供大家参考,具体如下:

什么是AngularJs?

angularjs是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件。它的创新点在于,利用数据绑定和依赖注入,它使你不用再写大量的代码了。这些全都通过浏览器端的javascript实现,这也使得它能够完美地和任何服务器技术结合。

AngularJS简单的Helloworld例子:

<!DOCTYPE HTML>
<!-- 告诉AngularJs引擎从这里开始是ng-app管理 -->
<html lang="en-US" ng-app>
<head>
  <meta charset="UTF-8">
  <title>AngularJS例子</title>
</head>
<body>
  <!-- ng-model数据模型 -->
  <input type="text" ng-model='name' placeholder="yourname" />
  <!-- {{}}angular表达式 -->
  <h1>Hello {{name}}</h1>
  <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
</body>
</html>

这个例子其实展示了angularjs的数据双向绑定,

AngularJS入门教程之Helloworld示例

AngularJS入门教程之Helloworld示例

左边为数据单向绑定图解,通常是要你管jquery,backbone这类框架,右边为angularjs数据双向绑定。

模型 视图 控制器(MVC)

MVC背后的核心概念就是,你在你的代码之间明确分离管理数据(模型),应用程序逻辑(控制器),并将数据给用户(视图)。

视图从模型中获取数据展示给用户。当用户通过点击或者输入和应用程序进行交互时,控制器通过改变模型中的数据响应。最终,模型层通知视图层,已经发生改变,一边更新显示。

在Angluar应用中,视图层就是DOM,控制器就是Javascript类,模型数据存储在对象属性中。

angularjs数据绑定

像jquery库这种扩展到客户端的模式,让我们遵循相似的风格,但由于更新的能力,单独地DOM的部分,而不是更新整个页面。这里,我们合并HTML字符串和数据,然后通过元素上设置innerHTML将结构插入到我们想要的Dom中。

这一切都运行的相当好,但是你想将新数据插入到界面,或者改变基于用户输入的数据时,你需要做很多又不是价值不高的工作,来确保同时在界面和javascript属性中获取的数据正常的状态。

但是,倘若我们有什么东西把这些工作都为我们做好了,同时不需要写代码?倘若我能仅仅声明界面的某一部分映射到javascript的属性,让他们自动的同步?这种编程方式叫做数据绑定。我们在angular中包括这种功能,因为当编写视图和模型时,使用mvc来消除代码那是非常棒的。移动数据从一个地方的绝大部分自动发生。

注:最上面的例子就能体现

依赖注入(DI)

$scope对象把数据绑定自动的传递给了我们。我们没有必要通过调用任何函数来创建它。我们只是要求把它放到HelloController构造函数中。

在后续学习中,我们发现,scope并不是我们唯一需要的。如果我们需要数据绑定它到用户浏览器指定的URL地址中,我们需要在构造函数中,添加一个scope并不是我们唯一需要的。如果我们需要数据绑定它到用户浏览器指定的URL地址中,我们需要在构造函数中,添加一个location对象,就这样:

function HelloController($scope,$location){
  $scope.greeting={text:'Hello'}
  //使用$location 在这
}

通过Angular的依赖注入系统,我们可以得到这种效果。依赖注入允许我们遵循一种开发风格,这种开发风格中,不是创建依赖,我们的类仅仅添加他们需要的。

这个遵循了一个叫迪米特法则的设计模式,也被称作最少知识法则。由于HelloController的任务是建立greeting模型的初始值,这种模式就是说,它不需要担心像$scope如何创建以及在那里找到它。

angularJs指令

angular最优秀部分之一是你可以把你写的模板当成HTML。因为在框架的核心层,我们已经包括了一个强大的DOM转换引擎,可以让你扩展HTML语法,因此你才可以这样做。

我们已经在模板文件中看到了多个新的属性,这些并不是HTML规范的一部分。示例中包括两个大括号是用来数据绑定的,ng-controller是用来指定那个控制器来服务那个师徒,ng-model将一个输入框绑定到模型部分。我们称这些叫HTML扩展指令。

angular带有很多标识符,帮助你为你的应用程序定义视图。这些标识符可以定义我们常见的视图作为模板。它们可以说明应用程序如何工作的或者创建可重复使用的组件。

同时不局限于Angular自带的标识符。你可以写你自己的来扩展HTML模板,做任何你想做的事。

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

Javascript 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 #Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 #Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 #Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 #Javascript
JavaScript中数据类型转换总结
Dec 25 #Javascript
javascript实现用户点击数量统计
Dec 25 #Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 #Javascript
You might like
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
Prototype使用指南之base.js
2007/01/10 Javascript
javascript之函数直接量(function(){})()
2007/06/29 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
Python访问纯真IP数据库脚本分享
2015/06/29 Python
python开发之函数定义实例分析
2015/11/12 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Python判断telnet通不通的实例
2019/01/26 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
高校毕业生登记表自我鉴定
2013/11/03 职场文书
优秀村官事迹材料
2014/01/10 职场文书
会计人员演讲稿
2014/09/11 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
Go web入门Go pongo2模板引擎
2022/05/20 Golang