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请求等回调操作,
而数据到页面则由脏检测来做