来自 服务器&运维 2019-12-04 16:28 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

详解AngularJS中的作用域_AngularJS_脚本之家

在讲angularjs的模块之前,我们先介绍一下angular的一些知识点:

AngularJS 模块

范围扮演其视图连接控制器的角色一个特殊的JavaScript对象。范围包含了模型数据。在控制器,模型数据通过$scope对象访问。

AngularJS支持模块化的方法。模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁。我们在单独的js文件中定义的模块,并将其命名为按照module.js文件形式。在这个例子中,我们要创建两个模块。

AngularJS是纯客户端技术,完全用Javascript编写的。它使用的是网页开发的常规技术,目的是让网页应用开发更快更容易。

模块定义了一个应用程序。

 var mainApp = angular.module; mainApp.controller("shapeController", function { $scope.message = "In shape controller"; $scope.type = "Shape"; });

Application Module - 用于初始化控制器应用程序

AngularJS简化应用开发的一个重要方法是,将一个些通用的低级开发操作包装起来提供给开发者。AngularJS会自动处理好这些低级操作。它们包括:

模块是应用程序中不同部分的容器。

以下是在上面的例子中需要考虑的重要问题。

Controller Module - 用于定义控制器

1.DOM操作2.设置事件的监听3.输入验证,因为AngularJS会处理大部分这些操作,所以开发者就能更多的专注在应用的业务逻辑上,更少地编写那些重复性的、易错的、低级的代码。

模块是应用控制器的容器。

$scope被作为第一个参数在其构造器确定指标到控制器。 $scope.message 和 $scope.type 是它们在HTML页面中所用的模型。 我们已经设置模型的值将反映应用程序模块的控制器shapeController中。 我们可以在$scope定义函数功能。

应用模块

在AngularJS简化开发的同时,它也为客户端带来了一些精巧的技术,它们包括:

控制器通常属于一个模块。

继承范围

var mainApp = angular.module;

1.数据、业务逻辑、视图的分离2.数据和视图的自动绑定3.通用服务4.依赖注入5.可扩展的HTML编译器6.易于测试7.客户端对这些技术的需求其实已经存在很久了。

创建模块

范围是特定的控制器。如果我们定义嵌套的控制器,然后控制器子将继承其父控制的范围。

在这里,我们已经声明使用 angular.module 功能的应用程序 mainApp 模块。我们已经通过了一个空数组给它。此数组通常包含从属模块。

同时,你还可以用AngularJS来开发单页或者多页的应用,不过其主要还是用来开发单页的。 AngularJS支持浏览器的历史操作,向前,向后按钮,单页应用中的收藏操作。

你可以通过 AngularJS 的 angular.module 函数来创建模块:

 var mainApp = angular.module; mainApp.controller("shapeController", function { $scope.message = "In shape controller"; $scope.type = "Shape"; }); mainApp.controller("circleController", function { $scope.message = "In circle controller"; });

控制器模块

接下来,我们来详细讲解angularJS的模块。

...var app = angular.module; 

以下是在上面的例子中需要考虑的重要问题。

mainApp.controller("studentController", function { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65}, {name:'English',marks:75}, {name:'Hindi',marks:67} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } };});

大部分应用都有一个主方法用来实例化、组织、启动应用。AngularJS应用没有主方法,而是使用模块来声明应用应该如何启动。这种方式有以下几个优点:

"myApp" 参数对应执行应用的 HTML 元素。

我们在shapeController设定模型的值。 我们覆盖的子控制器circleController消息。当“消息”内的控制器circleController的模块使用时,将用于重写的消息。

在这里,我们已经声明采用studentController模块的mainApp.controller功能的控制器。

1.启动过程是声明式的,所以更容易懂。2.在单元测试是不需要加载全部模块的,因此这种方式有助于写单元测试。3.可以在特定情况的测试中增加额外的模块,这些模块能更改配置,能帮助进行端对端的测试。4.第三方代码可以打包成可重用的模块。5.模块可以以任何先后或者并行的顺序加载。

现在你可以在 AngularJS 应用中添加控制器,指令,过滤器等。

例子

..在这里,我们使用 ng-app 指令和控制器采用ng-controller指令应用模块。我们已经在主要的HTML页面导入mainApp.js和studentController.js。示例下面的例子将展示上述所有模块。testAngularJS.htm Angular JS Modulestable, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child { background-color: #f2f2f2;}table tr:nth-child { background-color: #ffffff;}AngularJS Sample ApplicationEnter first name:
    var myAppModule = angular.module; // configure the module. // in this example we will create a greeting filter myAppModule.filter { return function { return 'Hello, ' + name + '!'; }; });     {{ 'World' | greet }}  

添加控制器

下面的例子将展示上述所有指令。testAngularJS.html

Enter last name:

上面的例子,我们是通过在中进行指定,来实现使用myApp这个模块启动应用的。

你可以使用 ng-controller 指令来添加应用的控制器:

 Angular JS Forms AngularJS Sample Application  {{message}} 
 {{type}}   {{message}} 
 {{type}}    {{message}} 
 {{type}}      var mainApp = angular.module; mainApp.controller("shapeController", function { $scope.message = "In shape controller"; $scope.type = "Shape"; }); mainApp.controller("circleController", function { $scope.message = "In circle controller"; }); mainApp.controller("squareController", function { $scope.message = "In square controller"; $scope.type = "Square"; }); 

Name:

以上这个例子写法很简单,但是不适合用同样的写法来写大型应用。我们推荐是将你的应用拆分成以下几个模块:

AngularJS 实例

在Web浏览器打开textAngularJS.html。看到结果如下。

{{student.fullName()}}

1.一个服务模块,用来做服务的声明。2.一个指令模块,用来做指令的声明。3.一个过滤器模块,用来做过滤器声明。4.一个依赖以上模块的应用级模块,它包含初始化代码。

 {{ firstName + " " + lastName }}var app = angular.module;app.controller("myCtrl", function { $scope.firstName = "John"; $scope.lastName = "Doe";});

Subject:

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:详解AngularJS中的作用域_AngularJS_脚本之家

关键词: