初识AngularJs

一、AngularJs简介

      1.AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。


     2. 最为核心的特性:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。AngularJS直接用网页本身作为模板。


二、AngularJs的指令

ng-app指令标记了AngularJS脚本的作用域,在中添加ng-app属性即说明整个都是AngularJS脚本作用域。可以直接使用,也可以指定一个名字。

ng-controller = "str"指定一个AngularJs的控制器,相当于ng-app模块下的组件,其最大的作用就是把一个作用域($scope)和模版上的html标签绑定到一起,限定了$scope的作用域

ng-model=””获取和修改具有value属性的值,数据的双向绑定

ng-bind=””修改一个标签内部的innerHTML,设置的值不存在该标签元素不会显示,数据不是双向的

{{ }}插值语法是渲染数据到页面中。插值符号{{}}不能替换属性的名字,能够替换的是文本内容和属性的值。

ng-click=”fun” AngularJs自带的单击事件

ng-dblclick=”fun” AngularJs自带的双击事件

ng-focus=”fun”   AngularJs自带的获取焦点事件

ng-blur=”fun”  AngularJs自带的失去焦点事件

ng-change=”fun” AngularJs自带的事件

ng-submit=”fun” AngularJs自带的表单提交事件

……

ng-class=”{类样式1:true,类样式2:false}”AngularJs设置状态样式

ng-style=”{属性1:值,属性2:值}”AngularJs设置状态样式

ng-readonly=”boolean”  AngularJs设置只读状态,可以提交数据

ng-disable=”boolean”  AngularJs设置未激活状态,不可提交数据

ng-hide=”boolean”  AngularJs设置隐藏状态,不改变dom结构

ng-show=”boolean” AngularJs设置显示状态,不改变dom结构

ng-if=”boolean”  AngularJs设置if判断流程,改变dom结构,true显示该dom,false隐藏该dom元素

ng-switch=”值”AngularJs设置分支判断流程,会改变dom结构

ng-switch-when=”判断值”显示对应值的dom

ng-switch-default默认的值

ng-repeat   AngularJs循环流程,可以循环数组和对象,并且会重新限定一个作用域,在该作用域下有一个对象(包含了各种信息)。

ng-view   实现路由的托管,根据路径的不同,将对应的页面渲染到网页,即ng-view所在的位置

三、AngularJs使用

1、AngularJs的包建议引到head部分

2、使用一个AngularJsBatarang浏览器插件可以辅助开发

3、在script标签中

var app = angular.module('demo', []);

参数一:模块的名字

参数二:要依赖的其它模块名字

作用:创建了一个angularJs模块

app.controller('tian', function ($http, $scope) {

$scope.name = '绑定值';

$scope.click = function () {

$scope.name = '绑定方法,在方法内部再绑定值'

};

$http.get('lisi.json')

.success(function (data) {

console.log(data);

})

});

参数一:控制器的名字

参数二:带$scope、$http、$parse、$rootScope等固定形参(没有顺序)的函数

作用:创建一个控制器并限定函数的作用域

四、AngularJs中的依赖注入

在回调函数中,AngularJs会提供对应参数的对象服务,用什么功能就传什么参数。

$scope控制器的作用域,是一个对象可以在内部绑定任意属性

$scope.$watch(“表达式”,function(newvalue,oldvalue,scope){}) 是$scope上自带的一个方法,用来监听表达式值的变化

$http是angularJs对ajax的封装

$parse作用:将一个AngularJS表达式转换成一个函数

$rootScope可以访问控制器的根(父级)作用域

$timeout是AngularJs对原生timeout的封装

$location是AngularJs对window原生location的封装

$location. path( )是$location对象的一个属性,可以获取路由路径

五、AngularJs中的双向数据绑定

       双 向绑定:把我们的数据和html文档绑定起来,我们只需要关注数据就可以了,dom操作由angularjs去管理,一来方便,二可以提高安全性(程序员写代码的bug概率降低)

六、AngularJs中的mvvm

在angular中MVVM模式主要分为四部分:

1.View:它专注于界面的显示和渲染,在angular中则是包含一堆声明式Directive的视图模板。

2.ViewModel:它是View和Model的粘合体,负责View和Model的交互和协作,它负责给View提供显示的数据,以及提供了View中Command事件操作Model的途径;在angular中$scope对象充当了这个ViewModel的角色;

3.Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象;而angular中的service则是封装和处理这些与Model相关的业务逻辑的场所,这类的业务服务是可以被多个Controller或者其他service复用的领域服务。

4.Controller:这并不是MVVM模式的核心元素,但它负责ViewModel对象的初始化,它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上,使得应用界面在启动加载的时候达到一种可用的状态。

View不能直接与Model交互,而是通过$scope这个ViewModel来实现与Model的交互。对于界面表单的交互,通过ngModel指令来实现View和ViewModel的同步。ngModelController包含$parsers和$formatters两个转换器管道,它们分别实现View表单输入值到Model数据类型转换和Model数据到View表单数据的格式化。对于用户界面的交互Command事件(如ngClick、ngChange等)则会转发到ViewModel对象上,通过ViewModel来实现对于Model的改变。然而对于Model的任何改变,也会反应在ViewModel之上,并且会通过$scope的“脏检查机制”($digest)来更新到View。从而实现View和Model的分离,达到对前端逻辑MVVM的分层架构。

七、什么是单页面应用

本质:无刷新的单页面,当用户操作的时候ajax请求数据,局部的更新我们的页面,所有的操作都在这张页面上完成,都由JavaScript来控制。

理念:更好的用户体验,无停顿的用户交互

问题:写起来非常的麻烦

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

推荐阅读更多精彩内容