2018-09-21 Angular.js

1.什么是abngular?

基于javascript开发的客户端应用框架,,使我们可以更加快捷,简单的开发web应用

不适用于 做酷酷的特效,可视化的图形界面,比较适合前后端的数据交互的一些方案。

2.  angular.js的特性:

  MVC模式        指令系统      模块系统      双向数据绑定          依赖注入

  MVC 模式:

  M: module 模块

  V:view 视图

  C: controller 控制器

3.angular指令

ng-repeat 指令会重复一个html元素:

ng-app指令 :定义一个angular应用程序的范围

ng-click指令 : angular中点击事

ng-model指令: 把元素值或者数据 绑定到运用程序 (数据绑定)

ng-bind指令: 把运用 程序数据绑定到html 视图:

ng-init : 给angular.js应用程序初始化变量

ng-class 指令的值可以是字符串,对象,或一个数组。

4.angular方法

1 angular.element()  该方法用来获取某个元素(内置方法)

2 angular.equals() 该方法用来比较两个元素或对象

3 forEach() 该方法用来遍历  接受3个参数 : 参数一: 要遍历的对象 ,

参数二 : 回调函数  ,参数三 : 新的对象

4 fromJson() 和 toJson()都是用来转换json数据格式的。相当于之前的 JSON.parse() 和JSON.stringify()

5 angular.bind() 更改this指向。 该方法返回3个参数 参数一 :绑定对象 

参数二:被绑定的function  参数三:传入的参数 (可选)

6 angular.copy() ;该方法用来拷贝对象;

7 angular.extend();继承对象。 参数一: 继承对象  参数二:被继承对象

8 判断是否为数组: isArray()

9 判断是否为日期对象:  isDate()

10判断是否为数字:      isNumber()

5.angular过滤器

angular.js过滤器用于转换数据,使用一个管道字符添加到表达式和指令中

1 currency : 格式化数据为货币格式

2 filter: {"name":"北"}从数组中选择一个子集

3 lowercase : 格式化字符串为小写

4 uppercase : 格式化字符串为大写

5 orderBy : 根据某个表达式排列数组 | orderBy: '-id'

6 limitTo 截取  | limitTo:5  从前面截取5位 -5从后面截取5位

7 date格式化 | date:"yyyy-MM-dd HH:mm:ss"  转化数字为日期格式

8 number 格式化保留小数 34567.6457678 | number:3 保留3位

1、在AngularJS{{}}和ng-bind区别

  在AngularJS中显示模型中的数据有两种方式:一种方式是使用{{}},另一种是基于属性的指令ng-bind,主要的区别是ng-Bind只能单个绑定变量,而{{ }}可以多个绑定变量;

使用{{}}加载数据时,刷新页面,此时数据如果还没展现出来,结构是能被看到的!会看到这个{{text}}

2、ng-if,ng-show,ng-hide区别

ng-if 指令用于在表达式为 false 时移除 HTML 元素(如果 if 语句执行的结果为 true,会添加移除元素,并显示。ng-if 指令不同于ng-show, ng-hide,ng-show将隐藏元素显示, ng-hide 隐藏元素,而 ng-if 是从 DOM 中移除元素。

3、$scope 和$rootScope 区别

        $rootScope针对全局的作用域生效

      $scope只针对当前的controller作用域生效

4、简写$http,post、get请求

$http.get().then(successCallback, errorCallback);

$http.post().then(successCallback, errorCallback);

5、创建名为one 的服务,将变量转换为2进制

app.service('one', function() {

    this.myFunc = function (x) {

        return x.toString(2);

    }

});

6、自带过滤器

    1. currency (货币处理)

  2. date (日期格式化)

  3. filter(匹配子串)

5. limitTo(限制数组长度或字符串长度)

6. lowercase(小写)

  7. uppercase(大写)

  8. number(格式化数字)

9. orderBy(排序)

12、写出5个angular自带的指令,说明其含义。

ng-if  如果条件为 false 移除 HTML 元素

    ng-focus 规定聚焦事件的行为

ng-click  定义元素被点击时的行为

ng-bind  绑定 HTML 元素到应用程序数据

ng-class  指定 HTML 元素使用的 CSS 类

ng-route和ui-route的区别:

    1.存储视图的方式不同:ng-route-----  ng-view单路由

ui-route--------ui-view双路由

    2.设置跳转路径的方式不一样:

ng-route用<a herf="#shouye">

ui-route  <a ui-serf="shoue">

    2.配置状态:ng-route-----  $when

    ui-route--------$state

    3.参数:$routeParams-------$stateParams

    4.依赖注入:$routeProvider-------$stateProvider

    5.ng-route不能嵌套更深层次的路由     

        ui-route可以嵌套更深层次的路由  也就是路由嵌套路由(二级路由  三级路由)专业一点说就是多视图路由 

1是什么

2.为什么要用他

3.怎么使用它

4.什么时候使用

7、angular.js的四大特性?

  angularJs共有4大特性:1、MVC架构模式 2、模块化3、双向数据绑定 4、指令系统

8、angular 中模块是有什么作用

  模块定义了一个应用程序。

  模块是应用程序中不同部分的容器。

  模块是应用控制器的容器。

  控制器通常属于一个模块。

9、angular中控制器有哪些作用

    AngularJS 控制器 控制 AngularJS 应用程序的数据。

    AngularJS 控制器是常规的 JavaScript 对象。

    AngularJS 应用程序被控制器控制

10、ng-app有哪些作用?ng-repeat的作用什么

ng-app: 初始化一个应用程序,是告诉子元素一下的指令是归angularJs的,angularJs会识别的。

ng-repeat:ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象

11、angular中SPA代表的是什么?

单页面应用程序(Single Page Application)

12、自定义一个过滤器,实现字符串反转效果  123->321

  app.filter(“reverse”,function(){

return function(text){

Return text.split(“”).reverse().join(“”);

}

}

13、 Angular中自带的服务 :服务是一个函数或对象,可在你的 AngularJS 应用中使用。

  $location 服务  它可以返回当前页面的 URL 地址。

$http 服务    服务向服务器发送请求,应用响应服务器传送过来的数据。

$timeout 服务  相当于  window.setTimeout 函数。

 $interval 服务  相当于  window.setInterval 函数。

    ng-controller 指令定义了应用程序控制器。

    ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。

14、restrict的值分别代表什么?

    Restrict : 限制自定义指令调用方式;

        E: element 元素

        C:  class 类名

        M:  注释

        A:  attribute 属性

15⦁ 简述实现一个完整路由的步骤

    1、载入了实现路由的 js 文件:angular-route.js。

2、注入 ngRoute 模块作为主应用模块的依赖模块。

angular.module('routingDemoApp',['ngRoute'])

3、使用 ngView 指令。

<div ng-view></div>  该 div 内的 HTML 内容会根据路由的变化而变化。

4、配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。

⦁ 自定义指令配置项当中scope的值有哪些,分别代表什么意思

  $scope分为 @,=,& 三种情况。个人认为@:单向绑定,=:双向绑定,&: 用于绑定函数。

16⦁ angular的优点有哪些?

⦁ 模板功能强大丰富,,自带了丰富的Angular指令;

 2. 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能; 

3. 自定义Directive(指令),比jQuery插件还灵活。 

4. ng模块化能够很容易的写出可复用的代码~

17⦁ angular中“依赖注入”你是如何理解的?

一个AngularJS应用程序中的一些组件可能会依赖于其它组件,例如,控制器需要使用 $scope 组件,使得控制器可以向视图传递数据,即控制器依赖于 $scope 组件来执行工作。

<script> ... myApp.controller('myCtrl', ['$scope',function($scope){ //在此定义controller的逻辑 }]); ... </script>

18⦁ angular 的数据绑定采用什么机制?

ng-model 双向绑定

⦁ 写出5个angular动画当中可以自动添加类名的指令

a、适用于ng-if ng-view

进入运动的过程

.ng-enter

.ng-enter-active

离开运动的过程

.ng-leave

.ng-leave-active

B、适用于ng-show ng-hide

  显示元素时

  .ng-hide-remove

  .ng-hide-remove-active

  隐藏元素时

  .ng-hide-add

  .ng-hide-add-active

⦁ 简述自定义指令的作用

  可定义方法操作DOM  封装模块、第三方组件、使代码更简洁。

19、angular 的缺点有哪些?

1. 验证功能错误信息显示比较薄弱,

2. ngView只能有一个,不能嵌套多个视图

 3. 对于特别复杂的应用场景,貌似性能有点问题


20. SPA是什么?路由有什么作用?

单页面应用程序

通过不同的url访问不同的内容,实现多视图的单页面web应用

21. 简述 angular s脏检查机制?

双向数据绑定机制

页面的操作能更改数据,数据的变化也能在页面呈现,

页面到数据的更改是有UI事件和ajax请求等回调操作,

而数据到页面则由脏检测来做

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

推荐阅读更多精彩内容