了解 AngularJS

分享于 

8分钟阅读

Web开发

  繁體 雙語

介绍

在web应用程序开发的世界中,目前最为讨论的功能之一是有动态网页。 也就是说,将数据绑定到页面并从页面收集数据应该是快速且容易的。 and的Backbone 框架,Knockout,AngularJS ( 从 Google ),等等 这些框架,这些框架接受HTML和CSS的优点,在客户端提供MVC设计方法。

AngularJS

我假设读者对MVC设计方法有了明显的理解,关联的不同组件和使用它的好处。 AngularJS支持MVC的好处,并提供了一种简单而丰富的方法,通过控制器将数据( 型号) 绑定到 HTML ( 视图)。 只要很少,就可以使HTML非常动态和响应底层模型。 因这里,如果模型被更改,它会在视图中快速反映,在视图中进行更改时,模型会相应地改变。 这可以不使用复杂的HTML DOM操作来完成。

AngularJS块

  • 收费模型:web应用所表示的数据或者状态,被关注的网页的状态。
  • 视角:模型的视觉表示和投影。 它的责任是将模型中的信息呈现为用户可以接受的格式。
  • 控制器: 用于指示应用程序行为的大脑。 它的职责是将正确的模型与正确的视图联系起来。

利用AngularJS的步骤

  • 包含AngularJS框架 - 在HTML页面中嵌入以下 script 标记:
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

参考 site- http://angularjs.org/ 了解最新版本,或者甚至可以从那里下载,并在网页中引用。

  • 在框架范围内定义作用域 - 告知AngularJS元素在框架范围内的考虑:

例如对于表单,脯氨酸或者将要保存AngularJS模板的任何元素,添加 ng应用程序:

<formid="mainform"ng-app>...</form>
  • 查看视图中的所有HTML元素和特定的模型属性的重要步骤:

例如考虑使用具有姓氏,名字,Id,等等的model- Employee,该绑定使用 attribute- ng-model 完成绑定:

<table><tr><td>Last Name<inputtype="text"id="txtLastName"ng-model="Employee.LastName"/></td></tr><tr><td>First Name<inputtype="text"id="txtFirstName"ng-model="Employee.FirstName"/></td></tr><tr><td>Id<inputtype="text"id="txtId"ng-model="Employee.Id"/></td></tr><tr><td>Current City<inputtype="text"id="txtCurrentCity"ng-model="Employee.CurrentCity"/></td></tr><tr><td>Current State<inputtype="text"id="txtCurrentState"ng-model="Employee.CurrentState"/></td></tr><tr><td>Current Country<inputtype="text"id="txtCurrentCountry"ng-model="Employee.CurrentCountry"/></td></tr></table>

所以对任何输入文本框进行任何更改,绑定的model- Employee的相应属性会自动更新。 然后,可以使用AngularJS引入的特殊 object- $scope 轻松地提取在UI中输入的数据。 我们将看到当我们讨论控制器时。

使用模型属性,也可以利用这里绑定与不同的视图和元素同步:

<tablewidth="100%"><tr><td>{{ Employee.LastName }}</td></tr><tr><td>{{ Employee.FirstName }}</td></tr><tr><td>{{ Employee.Id }}</td></tr><tr><td>{{ Employee.CurrentCity }}</td></tr><tr><td>{{ Employee.CurrentState }}</td></tr><tr><td>{{ Employee.CurrentCountry }}</td></tr></table>

双花括号 notation- {{ Employee.LastName }} 是一种绑定数据的方法。 在更改模型相对应的属性时,计算花括号之间的表达式。 在传统的方法中,要使用JavaScript来实现这样的同步,我们必须处理大量的DOM操作,然后分配HTML元素。

  • 定义控制器 - 控制器前面解释了将模型链接到视图的实际工作。 例如,在控制器中可以实现的不同操作是从可以用数据实例化模型( 比如 )。 数据可以能从服务调用 等等 中获取,定义行为,如从UI元素收集数据,然后在某些事件上发布。

控制器是使用 attribute- ng-controller 定义的:

<formid="mainform"ng-controller="EmpController"ng-app>...</form>

定义控制器后,使用jquery将模型实例化为:

function EmpController ($scope) {
$scope.Employee= { LastName: 'Bandopadhyaya', 
FirstName:'Rahul',
...
CurrentCountry:'India'};
} 

其中" EmpController"是定义的控制器。 而 $scope 是一个AngularJS提供的对象,它可以桥接控制器和视图。

同样,使用 $scope,可以从用户界面( 因此这个模型) 中提取控制器中的数据,然后将它的发送到某个服务,如下所示:

function EmpController ($scope) {
$scope.Employee= { LastName: 'Bandopadhyaya', 
FirstName:'Rahul',
...
CurrentCountry:'India'};
...
$scope.save = function () {var emp = new Employee2();
emp.LastName = $scope.Employee.LastName;
emp.FirstName = $scope.Employee.FirstName;
emp.Id = $scope.Employee.Id;
emp.CurrentCity = $scope.Employee.CurrentCity;
emp.CurrentState = $scope.Employee.CurrentState;
emp.CurrentCountry = $scope.Employee.CurrentCountry;
$.ajax({
type: "POST",
url: "service url",
data: JSON.stringify(emp),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert("Employee Added");
},
error: function (msg) {
alert("Error while adding employee, please try again...");
}
});
};
} 

其中 Employee2 是一些本地JavaScript类:

function Employee() {this.LastName ="";this.FirstName ="";this.Id = 0;this.CurrentCity ="";this.CurrentState ="";this.CurrentCountry ="";
} 

" $scope.save"是一个接口,可以在按钮单击时调用,如:

<inputtype="button"id="btnAddEmp"value="Add Employee"ng-click="save()"/>

结束语

因这里,本文的目的是说明如何使用像agavi这样的框架,可以快速地创建动态web页面。 我们还了解了利用wince的能力所需的不同步骤( 但不只限于)。

引用

附录

访问 IE 中包含AngularJS的web应用程序时,确保将浏览器模式保留为 IE9 ( 请参考开发人员 Tools- F12 ),否则应用程序可能不会按照预期的方式运行。


angular  
相关文章