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 作用域上的函数。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容