angular部分小单词

1.angular.js内置小方法:

angular.bind(改变后this的指向, fn, args);
angular.copy(复制谁, 复制到哪里去);
angular.isArray(arr);              //检验数组
angular.isDate(oDate);         //检验时间 
angular.equals(args1, args2);      //相等比较          NaN与NaN是相等的
angular.forEach(arr, function(val, key){}); //便利数组    v=内容    k=下标
angular.lowercase(str);       //小写
angular.uppercase(str);      //大写

2.指令: 扩展HTML语法, 以ng-开头;

ng-app:                //开启angular应用模式;
ng-show & ng-hide:         //是否显示&隐藏, 取值(true/false);
ng-bind="dataname":          // 绑定数据; {{}}
ng-eventName:           //事件;
ng-init:               //非input类标签初始化数据   初始值 ;
ng-repeat="(val, key) in arr":           // 循环创建;
ng-model="dataname":             // 针对input类标签的数据初始化;
angular: mvvm, mvc model=> 数据层  模块   , view  =>视图 表现层  , controller  => 控制器;

3.控制器:

var app = angular.module('模块名', [依赖的模块], fn[配置函数]); //前两个参数是必须的;
app.controller('控制器的名字', function($scope){});// 参数名字必须写死;=

4. 使用控制器:

  <div ng-controller="控制器的名字"></div>
  控制器中的数据可以继承, 继承看DOM结构;
  控制器之间的数据传递:
  父级拿到子级的数据:
      子级发送数据: $scope.$emit('数据名字', 数据);
      父级接收数据: $scope.$on('数据的名字', function(event, data){ });
子级取到父级的数据:
      父级给子级广播数据: $scope.$broadcast('数据的名称', 数据);
      子级接收数据: $scope.$on('数据的名称', function(event, data){ });
$scope.$apply(); $interval();  $timeout(); 数据的脏检查:
数据改变了, 但是视图没有改变;

5.angular.js特点:

1>. 双向数据绑定;  
2>. 依赖注入, 跟顺序无关; 名字定死;

6.注入的都是服务[service]:

 $scope;     //依赖注入
$timeout();      //延迟器
$interval() ;     //定时器

7. App:

(1).原生App      native App  
     安卓   =>   java;             ios苹果  =>   oc
     劣势:开发成本高   效率高      优势:调用后台应用    性能
(2).混合 App:  hybrid App
    优势:性能没有原生的App高    
    劣势:调用后台应用,效率高,开发成本低
(3).WebApp      切页面  
   优势:效率高 开发成本低   
   劣势:不能调用后台

函数标准调用

show(12,5)   this改变指针方向
 => show.call(this,参数1,参数2);  
  =>show.apply(this,[arr数组]);

清楚浮动

 clear:both  overflow:hidden;
.clearfix:after { content: ""; display: block; clear: both; }
.clearfix { zoom: 1; }
clearfix =>document.onclick =>  绑定添加

定位 position

  absolute  => 绝对定位   
  relative => 相对定位
  fixed    => 固定定位  
  static   =>  取消定位

判断浏览器内核

 window.navigator.userAgent  内核
 window.navigator.userAgent.toLowerCase().indexOf('chrome')!=-1

字符串的方法 8种

split    
indexOf    //检验字符串的位置
toLowerCase   //小写
toUpperCase  // 大写
splice  
replace  //替换
lastIndexOf  // 检验字符串最后一次出现的位置
match 
charAt

数组方法

concat     //合并
slice         //截取数组
join         //分隔符
reverse   // 倒叙
sort         // 排序
push       // 尾部添加
pop         //头部添加
unshift    //尾部删除
shift       // 头部删除

8 .数学方法

Math.random()       //随机数         
Math.sqrt();            // 开平方
Math.max();           //求最大值         
Math.min()            //求最小值
Math.round()        // 四舍五入          
Math.pow()          // 求几次幂
Math.sin()             //正弦              
Math.cos()           // 余弦
Math.tan()            //正切              
Math.ceil()           // 向上取整
Math.floor()         // 向下取整

9 .选择器优先级

    !important > 行内样式 > id > class >标签  > *

10 .盒子模型

width=border   *    2  +   padding   *   2  +   width

11.

  ev 
   => chrome  
   => ie9 ++  包括 ie9   
   => firefox    火狐
 Event  
 => chrome 
 => ie系 ie7++;  

12 .兼容问题

 ie   => Trident
 firefox   =>#  # Gecko   火狐
 chrome   => webkit   谷歌

13.

window.onload
   // => 页面中所有资源加载完成以后才会去加载   img  video audio  标签    慢
document.addEventListener('DOMContentLoaded',function(){},false)            快
$(function(){})

14 .阻止ie7 8 默认事件

    oEvent.setCapture  && oEvent.setCapture();                  // 将所有的事件聚集到某个oEvent
    oEvent.releaseCapture  && oEvent.releaseCapture();    // 将所有事件与某个oEvent减除事件

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

 在AngularJS中显示模型中的数据有两种方式:
方式一   :{{ }}  :   //可以多个绑定变量;数据没展现出来,结构能被看到的!会看到这个{{text}}
方式二:ng-bind,主要的区别是ng-Bind只能单个绑定变量,

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

ng-if 指令用于 false 时移除 HTML 元素(如果 if 语句 true,会添加移除元素,并显示
ng-hide,ng-show将隐藏元素显示, ng-hide 隐藏元素,而 ng-if 是从 DOM 中移除元素。

17、$scope 和$rootScope 区别?

    $rootScope   //针对全局的作用域生效
   $scope      //只针对当前的controller作用域生效

18、简写$http,post、get请求*****

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

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

 app.service('one', function() {
       this.myFunc = function (x) {
             return x.toString(2);
      }
  });

20、自带过滤器

  currency     //(货币处理)                
  date    //(日期格式化)               
  filter    //(匹配子串)
  limitTo   //(限制数组长度或字符串长度)                
  lowercase   //(小写)      
  uppercase   //(大写)
  number   //(格式化数字)
  orderBy  //(排序)

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

ng-if    //如果条件为 false 移除 HTML 元素
ng-focus    //规定聚焦事件的行为
ng-click   // 定义元素被点击时的行为
ng-bind   // 绑定 HTML 元素到应用程序数据
ng-class   //指定 HTML 元素使用的 CSS 类

21、angular.js的四大特性?

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

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

  模块定义了一个应用程序。
  模块是应用程序中不同部分的容器。
  模块是应用控制器的容器。
  控制器通常属于一个模块。

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

AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 应用程序被控制器控制

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

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

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

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

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

 app.filter(“reverse”,function(){
          return function(text){
          Return text.split(“”).reverse().join(“”);
          }
    }

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

    $location服务   //它可以返回当前页面的 URL 地址。
    $http 服务     //服务向服务器发送请求,应用响应服务器传送过来的数据。
    $timeout 服务 // 相当于  window.setTimeout 函数。
   $interval 服务  //相当于  window.setInterval 函数。

28、简述ng-controller的作用

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

29、angular的优点有哪些?

    1、模板功能强大丰富,,自带了丰富的Angular指令;
    2、是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能; 
    3、自定义Directive(指令),比jQuery插件还灵活。 
    4、ng模块化能够很容易的写出可复用的代码~

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

   一个AngularJS应用程序中的一些组件可能会依赖于其它组件,例如,控制器需要使用 $scope 组件,使得控制器可以向视图传递数据,即控制器依赖于 $scope 组件来执行工作。
       <script> ... myApp.controller('myCtrl', ['$scope',function($scope){ //在此定义controller的逻辑 }]); ... </script>

31、angular 的数据绑定采用什么机制?

      ng-model 双向绑定

32、 写出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

33、 简述自定义指令的作用

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

34、angular 的缺点有哪些?(答对3个满分)

    验证功能错误信息显示比较薄弱,
    ngView    //只能有一个,不能嵌套多个视图
    对于特别复杂的应用场景,貌似性能有点问题

35、简述实现一个完整路由的步骤

1载入了实现路由的 js 文件:angular-route.js。
   <script src="angular.min.js"></script>   
   <script src="angular-route.js"></script>
2.注入 ngRoute 模块作为主应用模块的依赖模块。
    let app = angular.module("app", ["ngRoute"]);
3.使用 ngView 指令。
<div ng-view></div> 该 div 内的 HTML 内容会根据路由的变化而变化。
4.配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。

    app.config(["$routeProvider", function($routeProvider) {
        $routeProvider  
                 .when("/aaa", {          })
           .when("/bbb", {                             })
           .when("/ccc", {                             })
        .otherwise({                     })
    }]);
     app.controller("ctrl", ["$scope", function($scope) {           }]);

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

Restrict : 限制自定义指令调用方式;
    E: element 元素     <my-hello></my-hello>      
    C:  class 类名           <div class="my-hello"></div>
    M:   注释                 <!-- directive:my-hello --> 
    A:  attribute 属性       <div my-hello></div> 

  let app=angular.module("app",[]);
            //必须有驼峰
    app.directive("myHello",function(){
        return{
            restrict:"ECMA",
            replace:true,
            template:`<p>hello word</p>` 
        }
});

函数包含两个参数

 1 . 参数一:URL   或url正规规则
 2 . 参数二:路由配制对象
  (1). template:   string    ,     // 简单内容
  (2). templateUrl:html模板文件     ==>     string形式
  (3). controller:   "ctrl"(string)  ,function(函数) 或  数组           //在当前模板执行
  (4).controllerAs:  string   // 为controller指定别名
  (5).redirectTo:"/aaa"==>string形式,fn函数   //重定向的地址
  (6).resolve:  object<key , fn>//指定当前controller所依赖的其他模块

link用法

link:function(scope,ele,attr,superCtrl){
         scope    //  单独作用域
         ele     //指令元素内容   
         attr    //指令元素属性   
        superCtrl    //
  }

例题一

let app=angular.module("app",[]);
    app.directive("myHello",function(){
       return{
         restrict:"ECMA",
         replace:true,    //是否替换指令的内容
         template:function(ele,attr){ //  ele :指令元素内容      attr:指令元素属性
           let html="";    
           html += `<div>${attr.name}</div>`; //必须有反引号
           return html;
            }
        }
    })

例题二

let myApp=angular.module("app",[]);
    app.directive("myHello",function () {
        return{
           restrict:"ECMA",
           transclude:true, //是否将指令中的div替换到<div ng-transclude>a</div>中
           template:"<div>hello word !!<div ng-transclude>a</div></div>"
      }
})

37、自定义指令配置项当中scope的值有哪些,什么意思

 $scope分为 :@:单向绑定,     =:双向绑定,     &: 用于绑定函数。

require前缀

  require使用字符串或数组元素来传入指令。如果是数组,注入的参数是一个相应顺序的数组。如果这样的指令没有被找到,或者该指令没有控制器, 就会报错。 require参数可以加一些前缀:

 (没有前缀)如果没有前缀,指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器就抛出一个错误。

? 如果在当前指令中没有找到所需要的控制器,会将null作为传给link函数的第四个参数。
^ 如果添加了^前缀,指令会在上游的指令链中查找require参数所指定的控制器。
?^ 将前面两个选项的行为组合起来,我们可选择地加载需要的指令并在父指令链中进行查找。

高内聚 低耦合

 高内聚:一个类或一个方法让它专注去做一件事情
 低耦合:要求对象,类之间减少耦合性

考研课

《算法导论》---《计算机数据结构》         《大话数据结构》

http://www.browsersync.cn/

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

推荐阅读更多精彩内容