您可以下载angular的最新版本并将其添加到您的视图脚本中

2020-11-20 10:08:51 来源: INeng财经

ngular.js是Google开发和维护的客户端JavaScript框架。引入它是为了使静态html动态。换句话说,它与数据中的任何更改同步更新Web应用程序的视图(模型)。它使视图数据受驱动。它使我们能够灵活地选择要在Web应用程序中使用的设计模式。

在这里,ViewModel包含表示逻辑,以将其与MVC模式区分开。此外,angular.js创建两种方式的数据绑定,即,数据对象中的任何更改都同时反映在视图上,而视图中的任何更改都会在数据对象中得到更新。因此,在不考虑页面重定向或页面刷新的单页面应用程序开发中,这是一个不错的选择。

在MVC(模型视图控制器)模式中,应用程序的设计使得Modal包含数据以及业务逻辑,View包含演示脚本(html标记),并且控制器是Modal与视图之间的中介。此模式通常与服务器端脚本语言(如PHP)一起使用。

但是,在客户端框架中,经常使用MVVM(模式视图ViewModel)模式,可以通过使用angular.js来完成。

以下基本示例应用程序概述了如何开始Angular JS开发。

1.包含AngularJS脚本

您在这里有两个选择。

您可以下载angular.js的最新版本并将其添加到您的视图脚本中。

或者,您可以使用脚本部分下面提到的URL使用Google提供的托管库。

thegeekstuff.com的AngularJS基本应用示例

2.绑定ng-app属性

在此示例中,我们使用“ ng-app”指令将名为“ someApp”的模块绑定到div元素。

在此步骤中,将ng-app属性(指令)绑定到html标签中的模块名称,在该位置我们要引导角度应用程序。我们将在下一步中创建模块。

thegeekstuff.com的AngularJS基本应用示例

3.创建一个角度模块

接下来,创建一个角度模块并将其添加到您的视图中。

这样可以使应用程序函数的变量与全局名称空间分开。

您也可以将其编写在单独的javascript文件中,然后使用script标签将其添加到视图中。在下面的示例中,它是内联的。

thegeekstuff.com的AngularJS基本应用示例

模块的第二个参数是我们可能具有的模块依赖关系数组。

4.创建一个控制器

在下面的示例中,我们通过链接方法创建一个控制器。

这是一段

请注意,在上面的代码中,我们已在控制器中使用“ $ scope”对象,该对象可在视图中访问。因此,它缝合了控制器和视图。

5.定义控制器范围

最后,在html标记中使用ng-controller指令定义控制器的范围。

在上面的代码中,我们使用使用车把模板绑定{{}}的角度表达式访问范围对象变量。

将以上脚本复制并粘贴到html文件中,然后在任何浏览器中将其打开,以查看运行中的AngularJS。

您将在浏览器中看到文本“ thegeekstuff.com的AngularJS基本应用示例”。

该文本基本上是在应用程序模型中设置的,并由控制器范围内的视图上的数据驱动。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。