AngularJS-1.5

AngularJS的优点?

实现了数据、表现、逻辑分离
扩展了HTML的功能

什么是MVC?

M:Model 模型——数据层
V:View 视图——表现层
C:Controller 控制器——业务逻辑层
实现各层之间的完全分离,MVC只是手段,目的是实现代码的复用。

什么是双向数据绑定?

简单来说数据既可以流入,也可以流出。如ng-model="要绑定的变量",可以实现数据的双向绑定。

什么是依赖注入?

例如:正常使用的函数参数是由使用者决定的,依赖注入的意思是函数的参数是由定义者决定的。某个对象内部需要另一个对象,由系统根据需要自动注入进去。

使用controller控制器的注意事项

不要操作DOM(用directive指令操作DOM)
不要做输入输出格式化,这种问题交给表单处理
不要用控制器作用域共享数据,要使用factory、service、provider等服务

ng-bind="要绑定的变量"与模版({{绑定的数据}})区别?

ng-bind可以将数据写入到元素内,并且是覆盖写入;模版的写入更加灵活;共同点:与js不能实现互通。

学习AngularJS的重要事项(非常重要)

angular和JavaScript不互通(函数不互通、变量也不互通、事件也不互通)
Angular的开发模式和传统开发模式完全不同,Angular是以数据为核心,所有的UI交互都通过数据的变化来实现,Angular接管了UI,例如value的赋值操作在Angular中会失效。

ng-app=""的作用是什么?

确定Angular的作用范围。Angular的模块。

通过事件对象获取元素,并转为jq对象

ng-click="fn(event)"scope.fn=function(event){angular.element(event.target).text("string")}

ng-controller=""的作用是什么?

确定Angular模块的控制层,这个控制层可以分为多个。做为Angular和JS交互的桥梁。注意:控制器嵌套关系可以形成作用于链,在子类控制器找不到的变量可以从父控制器拷贝一份出来。这时当父变量改变时,自变量不会改变。不推荐这种用法。

ng-init="a=1;b=2"的作用是什么?

初始化数据。放在父级元素。

ng-include="'xxxxxxxxx'"

可以引入html页面
或者用ng-include scr="'xxxxxxxxx'"
注意:引入的是一个string

ng-repeat的内置变量

{{index}}//当前索引 {{first}}//是否为第一个元素
{{middle}}//是否为中间的元素 {{last}}//是否为最后一个元素

$scope的作用是什么?

绑定属性和方法。

$apply()脏检查的作用?

用于监控当前控制器scope绑定的属性是否发生了变化,如果发生了变化,更新View层。scope.$apply();//检查所有绑定的属性是否发生改变

angular.forEache($scope.属性,function(item,index){});

在Angular的HTML的三元运算符?

模版中可以使用三元运算符。

ng-class的两种使用方式?

class="{{数据}}"或者ng-class=“数组”。
class="{{a:表达式}}"//表达式为true,返回类样式
ng-class-even="'偶数'"
ng-class-odd="'奇数'"

ng-switch的用法

        <ul ng-switch on="status">
            <li ng-switch-when="true">true</li>
            <li ng-switch-when="false">false</li>
        </ul>

ng-style的两种使用方式?

style="{{数据(字符串)}}"或者ng-style="JSON数据"。

ng-repeat与ng-事件放在一起使用产生的影响?

会对ng-事件="变量赋值",这个变量赋值会失效。

controller中函数的依赖注入各个参数如何使用?

1.scope:用于绑定数据和函数。 2.http:为Angular的内部ajax;http.get/post/jsopn("url",{params:{a:1,b:2,cb:"callback"},responseType:"json"}).success(function(res){}).error(function(res){})。 3.interval:Angular的内部的定时器;interval(function(){},时间);清理定时器interval.cancel(变量名)。

4.timeout:Angular的内部的定时器;timeout(function(){},时间);清理定时器$timeout.cancel(变量名)。

scope中的watch()和$apply()方法如何使用?

scope.watch("数据变量",function(newValue,oldValue){},true),true为深度监视;scope.apply()在使用Angular以外的代码更新数据时,需要用$apply()手动脏检查。

自带过滤器的使用

|number:数字//保留几位小数,四舍五入
|currency:字符串//例如在数字前面加¥符号等等 |date:"yyyy-MM-dd hh:mm:ss"//整理时间格式 |limitTo:数字//保留数组的长度 |lowercase//转小写 |uppercase//转大写 |filter:value值//过滤 |filter:自定义方法名scope.自定义方法名=function(obj){//会遍历要过滤的每一个值,根据return的bool结果确定哪个值会被过滤}
|orderby:字符串//排序,在字符串前加-号为倒序排列

如何在控制器内部使用过滤器

filter注入到控制器中 var temp=filter("过滤器名",参数)(要过滤的值);

如何自定义过滤器?

app.filter("name",function(){
这一层的函数只会执行一次
return function(input,agrs){
业务逻辑;(会根据过滤器使用次数而加载)
return 数据;
}
})

内置指令

如何自定义指令(组件)?

app.directive("name",function(){ //name中不能含有_ -等特殊字符
return {
restrict :"ECMA", // E:元素 C:class M:注释 A:属性 <--! directive:name -->必须带空格
template:'html',
replace:true, // 是否去掉外壳
transclude:true //包裹
}
})
<span ng-transclude></span>或者<ng-transclude></ng-tansclude> 把html原有的内容包裹进来

自定义模块如何使用?

可以通过["模块的名字1","模块的名字2","模块的名字3"],模块的依赖注入实现filter,directive,controller的继承,也可实现他们的剥离。注意:一个html页面只能引入一个模块。

控制器的自定义依赖注入项如何使用?

1.factory
app.factory("name",function(){
return 数据;//可以返回任意类型的数据
})
2.provider
app.provider("name",function(){
this.$get=function(){
return 数据;
}
})
3.service
app.service("name",function(){
this.变量=数据;//只能返回引用类型
})
4.constant //注意:这个不能修饰
app.constant("name",数据);
5.value
app.value("name",数据)
只有绑定对象才能实现数据共享

如何实现依赖项的修饰?

app.decorator("自定义依赖项的名字",function(delegate){ 对delegate进行逻辑操作 delegate就是数据 returndelegate;
})

controller之间的数据传递(父子关系)如何实现?

通过html嵌套实现controller的父子级关系。子控制器可以直接得到父控制器的数据。子控制器得到的是父控制器数据的拷贝版本。
通过scope.emit("name",数据) //向父级发射数据
通过scope.broadcast("name",数据) //向子级传播数据
通过scope.on("name",function(event,data){
//data为数据 event为事件
})

controller之间的数据传递(非父子关系)如何实现?

通过自定义依赖实现数据的共享。

如何使用路由?

    <script src="引入route.js文件"/>
    <script src="引入路由使用的controller文件"/>
    <a href="#/文件路径"></a>
    <ng-view></ng-view>
    angular.module("name",["ngRoute"]);
    app.config(function($routeProvider){
            $routeProvider.when().when("/name",{templateUrl:"路径",controller:"name"}).when();
    })

如何延时加载?

    在when()的json里,resolve:{
            delay:function($q){
                    setTimeout(function(){delay.resolve()},3000)
            }
            return delay.promise
    }

$routeParams功能?

放在controller的依赖中,通过$routeParams.tyep获取route的name。

routeChangeStart开始、routeChangeSuccess结束、$routeChangeError失败,功能?

scope.on("name",function(){业务逻辑})

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

推荐阅读更多精彩内容