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. 使用控制器:
控制器中的数据可以继承, 继承看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 组件来执行工作。
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。
2.注入 ngRoute 模块作为主应用模块的依赖模块。
let app = angular.module("app", ["ngRoute"]);
3.使用 ngView 指令。
该 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 元素
C: class 类名
M: 注释
A: attribute 属性
let app=angular.module("app",[]);
//必须有驼峰
app.directive("myHello",function(){
return{
restrict:"ECMA",
replace:true,
template:`hello word
`
}
});
函数包含两个参数
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//指定当前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 += `${attr.name}`; //必须有反引号
return html;
}
}
})
例题二
let myApp=angular.module("app",[]);
app.directive("myHello",function () {
return{
restrict:"ECMA",
transclude:true, //是否将指令中的div替换到a中
template:"hello word !!a"
}
})
37、自定义指令配置项当中scope的值有哪些,什么意思
$scope分为 :@:单向绑定, =:双向绑定, &: 用于绑定函数。
require前缀
require使用字符串或数组元素来传入指令。如果是数组,注入的参数是一个相应顺序的数组。如果这样的指令没有被找到,或者该指令没有控制器, 就会报错。 require参数可以加一些前缀:
(没有前缀)如果没有前缀,指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器就抛出一个错误。
? 如果在当前指令中没有找到所需要的控制器,会将null作为传给link函数的第四个参数。
^ 如果添加了^前缀,指令会在上游的指令链中查找require参数所指定的控制器。
?^ 将前面两个选项的行为组合起来,我们可选择地加载需要的指令并在父指令链中进行查找。
高内聚 低耦合
高内聚:一个类或一个方法让它专注去做一件事情
低耦合:要求对象,类之间减少耦合性
考研课
《算法导论》---《计算机数据结构》 《大话数据结构》