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基本应用示例”。
该文本基本上是在应用程序模型中设置的,并由控制器范围内的视图上的数据驱动。