首页 > 代码库 > angularJS搭建简单应用程序的基本架构分析

angularJS搭建简单应用程序的基本架构分析

2024-08-26 07:13:46   224人阅读

本文以一个基于angularJS框架的简单应用分析angularJS应用的基本架构

1.理解几个基本概念

1.1 angularJS控制器

对于刚入门的童鞋来说，提到控制器可能想到了就是电器上的一些开关或者控制设备等，实际上，在JavaScript编程中也有控制器这一概念，angularJS控制器（以下简称控制器）指的是附加在文档对象模型（DOM）节点上的函数，用来驱动应用程序的逻辑。通俗的说就是把一部分的JavaScript功能（方法）封装在一个js文件中，在html文件中进行调用来实现一些功能。

在angularJS中，控制器就是控制angularJS应用程序的数据，用来和作用域通信并响应事件，根据习惯的命名规则，控制器文件都一般都含有“控制”的英文单词全写“control”或简写“ctl”这些字母，在html文件中以ng-controller指定进行定义，在控制器文件中，以controller()方法进行调用。

1.2 angularJS作用域

angularJS作用域（以下简称作用域）可以理解为应用程序在HTML视图（以下简称视图）和控制器之间的上下文，是控制器和界面之间的桥梁（或者中转站），也就是说，控制器中除了作用域，其他的所有内容都是与应用的其他部分隔离的，当作用域在控制器中更新时，视图也会更新；

在angularJS中，提供$scope对象作为作用域的参数传递，它的书写位置在控制器中。

1.3 angularJS模块

angularJS模块(以下简称模块)是将一组紧密联系的逻辑封装在一起，然后利用模块的依赖注入与其关联的模块内容，通俗的说，就是将html中的一组相互联系的组件封装在一个定义的模块中，然后通过模块在控制器中定义这些组件的方法，来实现对视图的行为控制，angularJS中使用angular.module(‘demo’, [])方法定义模块，demo为被封装的组件，[]内为可选依赖，这个后面的文章会讲到，当没有[]时，该方法指的是获取已经定义的模块，两个是不一样的方法。

2.一些angularJS指令

ng-app指的是定义一个angularJS应用程序，位于应用程序的根元素下；

ng-model 指令把元素值（比如输入域的值）绑定到应用程序；

ng-bind 指令把应用程序数据绑定到 HTML 视图；

ng-controller 指令定义了应用程序控制器，一个应用可以有很多控制器；

angularJS中很多自带指定都是以ng开头，比如ng-show用于修改显示样式；ng-form作用于表单；ng-click用于监听事件等。

注意：在JavaScript中，语法不允许变量名使用连字符，所以使用了诸如ngApp,ngClass的驼峰命名，而在html中多以连字符形式书写。

3.以留言簿程序为例分析angularJS简单架构

3.1 架构组成

代码分四三个部分，index.html为视图文件，noteApp.js为应用程序模块文件，noteCtrl.js文件为应用程序控制器文件，angular.min.js为angularJS框架文件。

index.html视图文件：

<!DOCTYPE html>
<html ng-app="note">
<head>
	<meta charset="UTF-8">
	<title>angular</title>
	<script src=http://www.mamicode.com/"js/angular.min.js"></script>>
noteApp.js模块文件：
var app = angular.module("note",[]);

noteCtrl.js控制器文件：
app.controller("noteCtrl",function($scope){
	$scope.message = "";
	$scope.left = function(){
		return 100 - $scope.message.length;
	};
	$scope.clear = function(){
		$scope.message = "";
	}
	$scope.save = function(){
		alert("保存成功");
	};
})


默认效果如下所示
技术分享
3.2 架构分析
整个应用程序被ng-app=”note”定义为一个应用程序，ng-app 指令位于应用的根元素下，应用的根可以是整个页面，或者页面的一小部分，对于单页应用，应用的根通常为 <html> 元素；通过angular.module("note",[])方法被封装成模块noteApp.js文件，通过制定ng-contriller=”noteCtrl”定义了这个应用程序的控制器为文件noCtrl.js文件；
通过制定ng-model=”message”将变量message的值绑定到应用程序中，通过指定ng-bind="left()"将应用程序绑定到视图中，通过指定ng-click()指令调用控制器中的函数为视图中组件绑定事件；
其中视图中的变量message和事件left()以及click()都是通过控制器中的$scope作用域来与控制器中的函数（方法）进行交换信息。
3.3 架构交互
技术分享
angularJS在视图内容导入时自动开始(即用户打开页面时开始)，如果找到 ng-app 指令 ， AngularJS 载入指令中的模块，并将ng-app 作为应用的根进行编译。
当用户输入内容时，视图中数据储存在作用域中，控制器根据作用域中的数据，调用计算剩余字数函数，通过作用域返回到视图中，会看到剩余字数多少；当用户点击保存或情况时，数据也会被传递到作用域中，控制器从作用域中获取数据进行处理并将处理后的数据通过作用域返回给视图，会看到保存弹框和清空效果。
整个交互过程都是在模块中进行的，或者理解为noteApp.js将控制器（包括作用域）和视图封装在模块里面，数据交换和处理都是在这个模块中进行。
用流程图表示如下所示
技术分享
以上只是介绍了angularJS所构建的一个最简单的应用程序架构，其实一个稍微复杂一点的应用程序架构可能还包括服务器，过滤器，http请求等等，因此本文仅作为angularJS框架学习的入门理解的辅助参考。
angularJS搭建简单应用程序的基本架构分析


联系
我们