AngularJS

AngularJS 是一个基于 MVC 处理模式,实现了 MVVM 数据双向绑定的用于开发动态 web

项目的 JavaScript 框架。以其数据和展现分离、MVVM、MVC、DI 等强大的特性活跃于前

端开发市场,是前端敏捷开发使用的主流的必须掌握的框架之一。

AngularJS 就是因为对传统的 HTML 进行了功能的扩展,所以在一定程度上,实现了软件

开发过程中前后端的架构级别的分离——也就是软件前后端分离架构模型。

同时将前端的内容展示、业务功能处理、数据交互有组织的进行了规划,让前端 HTML 更加

适合如今的企业级平台的 web 软件开发

网页中引入 Angular 之后,程序运行时会自动查找 ng-app 指令并从这个入口开始加载编

译并解释执行。. 基础语法结构

开始深入学习 AngularJS 之前,先简单认识 AngularJS 中的各个部分都是怎么定义和使

用的,方便解决后续学习过程中的一些困扰。

ng-app

Angular 应用运行的入口指令,常规情况下,是写在我们前端项目的入口文件的根标签上

的,用于在项目启动的时候引导 Angular 应用

angular.module(..)

Angular 是通过模块来管理我们前端项目中的数据的,通常情况下一个项目中会包含各种

各样的数据,如管理员、会员、商品列表、商品、新闻列表、新闻、公告等等

模块时需要在应用启动的时候就需要加载的,所以 Angular 在设计的过程中对于入口指令

进行了改造可以绑定一个值,这个值就是系统的主模块

基本指令

指令是 Angular 中使用比较多的一个部分,Angular 中的内置指令都是 ng-开头的一种

特殊的语法结构,如:ng-app 等,常见的基本指令如下:

ng-app=”myApp”:程序运行的入口,通过名称绑定一个模块

ng-init:用于在程序运行的过程中,初始化一些变量的数据的操作

ng-model=”param”:数据绑定的指令,主要用于表单元素上的数据绑定

ng-bind:数据绑定的指令,用于将变量的数据显示到页面上,用于替代 mustache 语法的

ng-controller:控制器指令,用于在页面中指定控制器作用范围,通常作为属性出现

ng-[event]:事件指令,用于在页面中发生某些事件时调用指令的函数

基本语法

var app = angular.module(“name”, []):用于定义一个 angular 的模块

 name 是模块的名称

 []中可以添加其他的模块

app.controller(“name”, function() {}):用于定义一个 angular 的控制器

 name 是控制器的名称

 function(){}是这个控制器要处理功能的函数

$scope 作用域

$scope 是放在控制器函数中的一个参数。这个参数不需要传值,而是 angular 自动赋值

在操作的过程中$scope 就相当于一个容器,可以在$scope 上声明变量或者函数,$scope

上的变量和函数会自动和视图页面中的变量进行绑定,称为$scope 挂载数据。

$rootScope 作用域

$rootScope 是 AngularJS 的根作用域,也是全局作用域,放在控制器函数中的一个参

数,参数不需要传值,angular 会自动赋值,挂载在$rootScope 上的数据,会被 Angular

应用中的所有模块下的子模块和控制器公用。

run()函数

配合$rootScope 使用,用于声明和初始化全局数据【当前模块下所有的组件可以访问的

数据】

app.run(function($rootScope) { // 处理代码})

$scope.$watch()

挂载在$scope 上,用于监控数据的变化

监控单个变量:$scope.$watch(“name”, function() {// 处理代码})

监控多个变量:$scope.$watch(“name1 + name2 + ..” + function() {})

angular 事件处理

AngularJS 中的事件操作,由于它自己虚拟 DOM 结构所以不支持普通事件,通常通过它自

己的事件指令来调用通过$scope 挂在到控制器中的函数执行完成,事件指令其实就是对于

常见事件的封装,以 ng-开头,加上事件名称即可,如鼠标单击事件 ng-click

事件 ng-click=”fn”,这里的 fn 必须是挂载在$scope 作用域上的函数。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容