hello world AngularJS入门教程示例

本文的例子讲述了AngularJS入门教程的Helloworld示例。分享给大家参考，如下：

什么是AngularJs？

Angularjs是一个为动态WEB应用程序设计的结构框架。它允许你使用HTML作为模板语言。通过扩展HTML的语法，您可以更清楚、更简洁地构建应用程序组件。它的创新之处在于利用了数据绑定和依赖注入，这样就不用写很多代码了。所有这些都是通过浏览器端的javascript实现的，这使得它与任何服务器技术都完美集成。

简单的Helloworld示例：

！DOCTYPE HTML！-从这里告诉AngularJs引擎它是ng-app management-html lang=' en-us ' ng-app head metacarset=' utf-8 ' title AngularJs示例/title/head dy！- ng-model数据模型-输入类型=' text' ng-model=' name '占位符=' your name'/！-{ { } } angular expression-h1 hello { { name } }/h1 script type=' text/JavaScript ' src=' http://cdn . static file . org/angular js/1 . 3 . 0-beta . 13/angular . min . js '/script/body

左边是单向数据绑定的示意图，通常需要您管理jquery和主干等框架，右边是angularjs的双向数据绑定。

模型视图控制器

MVC背后的核心概念是，您清楚地将管理数据(模型)、应用程序逻辑(控制器)分开，并在代码之间将数据提供给用户(视图)。

视图从模型中获取数据，并将其呈现给用户。当用户通过点击或输入与应用程序交互时，控制器通过改变模型中的数据进行响应。最后，模型图层通知视图图层它已更改并更新显示。

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

Angularjs数据绑定

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

所有这些工作都做得相当好，但是当您想要向接口中插入新数据或者根据用户输入更改数据时，您需要做很多价值不低的工作来确保在接口和javascript属性中获得的数据的正常状态。

但是，如果我们有一些东西可以为我们做所有这些工作而不用编写代码呢？如果我可以只声明接口的某个部分映射到javascript属性，并让它们自动同步，会怎么样？这种编程方法称为数据绑定。我们在angular中包含了这个特性，因为在编写视图和模型时使用mvc来消除代码是很棒的。从大部分地方自动移动数据。

注：上面的例子可以反映

依赖注射

$scope对象自动将数据绑定传递给我们。我们不需要调用任何函数来创建它。我们只是要求把它放在HelloController构造函数中。

在后续的研究中，我们发现范围并不是我们唯一需要的东西。如果我们需要将其绑定到用户浏览器指定的URL地址，我们需要向构造函数添加一个作用域，这不是我们唯一需要的。如果我们需要将它数据绑定到用户浏览器指定的URL地址，我们需要在构造函数中添加一个location对象，就像这样：

函数hello controller ($ scope，$location) {$ scope。hello={ text : ' hello ' }//在这里使用$ location我们可以通过Angular依赖注入系统获得这个效果。依赖注入允许我们遵循一种开发风格，即我们的类只添加它们需要的东西，而不是创建依赖。

这遵循一个被称为迪米特里定律的设计模式，也被称为最少知识定律。由于HelloController的任务是建立问候语模型的初始值，这种模式意味着它不需要担心如何创建$scope以及在哪里可以找到它。

AngularJs指令

angular最好的部分之一是你可以把你的模板想象成HTML。因为在框架的核心层，我们包含了一个强大的DOM转换引擎，它允许您扩展HTML语法，所以您可以这样做。

我们在模板文件中看到了许多新的属性，这些属性不是HTML规范的一部分。该示例包括两个大括号用于数据绑定，ng-controller用于指定哪个控制器为该教师和学生服务，ng-model将输入框绑定到模型部分。我们称这些为HTML扩展指令。

Angular附带了许多标识符来帮助您为应用程序定义视图。这些标识符可以将我们的公共视图定义为模板。他们可以解释应用程序如何工作或者创建可重用的组件。

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

更多对AngularJS感兴趣的读者可以查看本网站的主题：《AngularJS入门与进阶教程》和《AngularJS MVC架构总结》

希望本文对AngularJS编程有所帮助。