AngularJS入门教程之Helloworld示例
本文实例讲述了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的数据双向绑定，
左边为数据单向绑定图解，通常是要你管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相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
本文主要介绍AngularJS 服务，这里整理了AngularJS 服务的基本知识资料，并附示例代码和实现效果图，有兴趣的小伙伴可以参考下2016-08-08
这篇文章主要介绍了angular的输入和输出的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了angularjs实现Tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了AngularJS Select选择框的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了angularJS中router的使用方法和示例分享,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了jQuery和AngularJS的区别浅析,本文着重讲解一个熟悉jQuery开的程序员如何应对AngularJS中的一些编程思想的转变,需要的朋友可以参考下2015-01-01
本篇文章主要介绍了Angular2自定义分页组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
本文主要介绍AngularJS ng-class-even 指令,这里整理了ng-class-even基础知识资料,并附实例代码和效果图,学习AngularJS指令的朋友可以看下2016-08-08
这篇文章主要介绍了Angularjs 实现动态添加控件功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-05-05
本文主要介绍 AngularJS控制器,这里对 AngularJS控制器的知识详细讲解,并提供实例代码有需要的小伙伴可以参考下2016-07-07
最新评论