Angular.JS的常用知识总结
2018-01-28 21:35
197 查看
1.关于angularJS简介
AngularJs是一款被由Google收购的优秀的前端框架,
核心特性:MVC,模块化,自动化双向数据绑定,语义化标签,依赖注入
AngularJS是一个javaScript框架,以JavaScript编写的库.可以通过<script>标签添加到HTML标签
AngularJs通过指令扩展了HTML,且通过表达式绑定数据到HTML
MVC:是一种使用MVC设计创建Web应用程序的模式
angularJs遵循软件工程的MVC模式,鼓励展现数据和逻辑之间的松耦合,通过依赖注入,为客户端的web应用带来了传统服务端的服务.
因此减轻了后端负担,产生了更轻的web应用
将后台的MVC模式写入了前端语言中
.model:数据
4000
,其实就是angular变量($scope.xx)
,view:数据的呈现. Html+Directive(指令)
,Controller:操作数据,就是function,数据的增删改查
模块化设计
高内聚低耦合法则
1)官方提供的模块 ng/ ngRoute / ngAnimate
2)用户自定义的模块 angular.module('模块名',[ ]);
自动化双向数据绑定
angularJs开发理念:申明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑.框架采用并扩展了传统HTML,通过双向数据绑定来适应动态内容.上相的数据绑定允许模型和视图之间的自动同步,因此.AngularJS使得对DOM的操作不再重要,并提升了可测试性
传统的数据绑定是单向绑定,数据只能从model和controller生成需要的html,但不能反过来使用.
双向数据绑定:也就是说修改前面数据,后面直接同步出来.这也是angularJS灵活的一大主要原因.
依赖注入
在功能模块上直接注入相关其他Controller或service..使多个控制模块更加灵活的来使用,和java中的实现有异曲同工之妙.
2.AngularJS的语法
语法也是指研究指令属性
所谓指令属性就是绑定在DOM元素上的函数,它可以调用方法,定义行为,绑定controller以及$scope对象,操作DOM等.具体自行百度
在一个AngularJS应用启动时,AngularJS编译器就会遍历DOM树,起点为ng-app指令属性开始.将指令属性按优先级一一执行..(每个指令属性都有优先级)
表达式
{{ 表达式 }}
表达式可以是标量或者运算式
指令
ng-app 指令 作用是为AngularJs编译器提供开始执行的起点,定义了angularJS应用程序的根元素,也就是告诉子元素以下指令是归angularJS识别
<html>
<head>
<title>Demo-1</title>
<script
src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>
ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量
<html>
<head>
<title> demo-2</title>
<script
src="angular.min.js"></script>
</head>
<body ng-app>
请输入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>
ng-init:初始化指令
在页面加载的时候初始化angularJs方法的函数,以及初始化变量的值
<html>
<head>
<title>入门小Demo-3 初始化</title>
<script
src="angular.min.js"></script>
</head>
<body ng-app ng-init="myname='大海'">
请输入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>
控制器
ng-controller 用于指定所使用的控制器
$scope : $scope的使用贯穿整个angularJsAPP应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻跟新$scope,同样的$scope发生改变时也会立刻重新渲染视图.
事件指令
ng-click="" 最常用的单击事件指令,,鼠标点击的时候触发控制器的某个方法
ng-if="" 用来做判断的标签 当值为true时,显示标签体,当值为false时,不显示页面
同样的还有ng-show // ng-hide
例:<span ng-if="true">
显示
</span>
<span ng-if="false">
不显示
</span>
ng-repeat="" 用于循环数组集合变量
例:存在集合 List=[xxxxxxxxxxx];
遍历每一个元素
ng-repeat="item in List"
{{item.xx}}
也可以遍历键值对 键值对集合SearchEntity
ng-repeat="(key,value) in searchEntity"
{{ key }} {{value}}
ng-options 属性可以再表达式中使用数组或对象来自动生成一个类似于select中的Option列表..
它和ng-repeat 很相似,很多时候可以用ng-repeat 来代替ng-options .但是ng-options具有减少内存提高运行速度,以及提供选择框让用户来选择,更具有灵活性.
ng-options="item.id as item.name for item in itemList"
ng-keyup 键盘点击事件 xxx( ) 为一个方法
ng-keyup="($event.which ==13)?xxx():0"
点击事件里可以嵌套三元表达式
内置服务
我们的数据一般都是从后端获取的.一般使用内置服务$http来实现.与ajax类似异步的获取数据
$http服务向服务器发送请求，应用响应服务器传送过来的数据
$http的简写GET,POST请求
app.youlinService('youlinService',function($http){
this.find=function(date){
return $http.get('/xxx/someUrl.do?data='+data);
}
this.find1=function( ) {
return $http.post('/xxx/someUrl', entity);
}
});
注:区别是data为普通引用数据
entity为对象类型
AngularJS
$http 是一个用于读取web服务器上数据的服务。
$http.get(url)
是用于读取服务器数据的函数。
v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。
代码如下:
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope,
$http) {
$http({
method: 'GET',
url: 'http://www.百度.com'
}).then(
function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) { // 请求失败执行代码
});
});
AngularJS中内建了30多个服务
$location 服务 ,可以返回当前页面的URL地址
注意$location服务是作为一个参数传递到controller中,如果要使用它,需要在controller中定义.
$location.xxx( ) ['yy'] ; 可以获取url上带的参数
var id= $location.search()['id'];//获取参数值
问题:Angular的很多服务，在DOM中有对应的对象，那为什么不使用这些对象，而是要用服务呢？
回答:因为这些服务可以获取到Angular应用声明周期的每一个阶段，并且和$watch整合，让Angular可以监控应用，处理事件变化。普通的DOM对象则不能在Angular应用声明周期中和应用整合
$watch : 持续监听数据上的变化,更新界面,或者执行方法
$sce 服务提供了很多方法,用来为一些资源和AngularJS系统之间建立信任
常见的有
$sce.trustAsHtml(…)：将一段html文本视为安全
$sce.trustAsUrl(…)
$sce.trustAsResourceUrl(…)
$sce.trustAsJs(…)
在网页搜索功能设置高亮字段的时候我们可以使用$sce服务和过滤器来进行简化开发
例:定义了一个模块'youlin',在下方定义了一个过滤器
var app = angular.module("youlin",[]);
/*$sce服务写成过滤器*/
app.filter('trustHtml',[function($sce){
return function(data){
return $sce.trustAsHtml(data);
}
}]);
$event 获取当前事件元素
$index 获取当前索引
过滤器
自定义过滤器 | 用于调用过滤器
示例:自定义一个过滤器 reverse，将字符串反转
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
angularJs路由 会在路径后面加上一个#号
例:通常我们的URL形式为 http://youlin.com/first/page，但在单页Web应用中
AngularJS 通过 #
+ 标记 实现
总结有不当之处,希望同行指出,一起进步
AngularJs是一款被由Google收购的优秀的前端框架,
核心特性:MVC,模块化,自动化双向数据绑定,语义化标签,依赖注入
AngularJS是一个javaScript框架,以JavaScript编写的库.可以通过<script>标签添加到HTML标签
AngularJs通过指令扩展了HTML,且通过表达式绑定数据到HTML
MVC:是一种使用MVC设计创建Web应用程序的模式
angularJs遵循软件工程的MVC模式,鼓励展现数据和逻辑之间的松耦合,通过依赖注入,为客户端的web应用带来了传统服务端的服务.
因此减轻了后端负担,产生了更轻的web应用
将后台的MVC模式写入了前端语言中
.model:数据
4000
,其实就是angular变量($scope.xx)
,view:数据的呈现. Html+Directive(指令)
,Controller:操作数据,就是function,数据的增删改查
模块化设计
高内聚低耦合法则
1)官方提供的模块 ng/ ngRoute / ngAnimate
2)用户自定义的模块 angular.module('模块名',[ ]);
自动化双向数据绑定
angularJs开发理念:申明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑.框架采用并扩展了传统HTML,通过双向数据绑定来适应动态内容.上相的数据绑定允许模型和视图之间的自动同步,因此.AngularJS使得对DOM的操作不再重要,并提升了可测试性
传统的数据绑定是单向绑定,数据只能从model和controller生成需要的html,但不能反过来使用.
双向数据绑定:也就是说修改前面数据,后面直接同步出来.这也是angularJS灵活的一大主要原因.
依赖注入
在功能模块上直接注入相关其他Controller或service..使多个控制模块更加灵活的来使用,和java中的实现有异曲同工之妙.
2.AngularJS的语法
语法也是指研究指令属性
所谓指令属性就是绑定在DOM元素上的函数,它可以调用方法,定义行为,绑定controller以及$scope对象,操作DOM等.具体自行百度
在一个AngularJS应用启动时,AngularJS编译器就会遍历DOM树,起点为ng-app指令属性开始.将指令属性按优先级一一执行..(每个指令属性都有优先级)
表达式
{{ 表达式 }}
表达式可以是标量或者运算式
指令
ng-app 指令 作用是为AngularJs编译器提供开始执行的起点,定义了angularJS应用程序的根元素,也就是告诉子元素以下指令是归angularJS识别
<html>
<head>
<title>Demo-1</title>
<script
src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>
ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量
<html>
<head>
<title> demo-2</title>
<script
src="angular.min.js"></script>
</head>
<body ng-app>
请输入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>
ng-init:初始化指令
在页面加载的时候初始化angularJs方法的函数,以及初始化变量的值
<html>
<head>
<title>入门小Demo-3 初始化</title>
<script
src="angular.min.js"></script>
</head>
<body ng-app ng-init="myname='大海'">
请输入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>
控制器
ng-controller 用于指定所使用的控制器
$scope : $scope的使用贯穿整个angularJsAPP应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻跟新$scope,同样的$scope发生改变时也会立刻重新渲染视图.
事件指令
ng-click="" 最常用的单击事件指令,,鼠标点击的时候触发控制器的某个方法
ng-if="" 用来做判断的标签 当值为true时,显示标签体,当值为false时,不显示页面
同样的还有ng-show // ng-hide
例:<span ng-if="true">
显示
</span>
<span ng-if="false">
不显示
</span>
ng-repeat="" 用于循环数组集合变量
例:存在集合 List=[xxxxxxxxxxx];
遍历每一个元素
ng-repeat="item in List"
{{item.xx}}
也可以遍历键值对 键值对集合SearchEntity
ng-repeat="(key,value) in searchEntity"
{{ key }} {{value}}
ng-options 属性可以再表达式中使用数组或对象来自动生成一个类似于select中的Option列表..
它和ng-repeat 很相似,很多时候可以用ng-repeat 来代替ng-options .但是ng-options具有减少内存提高运行速度,以及提供选择框让用户来选择,更具有灵活性.
ng-options="item.id as item.name for item in itemList"
ng-keyup 键盘点击事件 xxx( ) 为一个方法
ng-keyup="($event.which ==13)?xxx():0"
点击事件里可以嵌套三元表达式
内置服务
我们的数据一般都是从后端获取的.一般使用内置服务$http来实现.与ajax类似异步的获取数据
$http服务向服务器发送请求，应用响应服务器传送过来的数据
$http的简写GET,POST请求
app.youlinService('youlinService',function($http){
this.find=function(date){
return $http.get('/xxx/someUrl.do?data='+data);
}
this.find1=function( ) {
return $http.post('/xxx/someUrl', entity);
}
});
注:区别是data为普通引用数据
entity为对象类型
AngularJS
$http 是一个用于读取web服务器上数据的服务。
$http.get(url)
是用于读取服务器数据的函数。
废弃声明
v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。代码如下:
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope,
$http) {
$http({
method: 'GET',
url: 'http://www.百度.com'
}).then(
function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) { // 请求失败执行代码
});
});
AngularJS中内建了30多个服务
$location 服务 ,可以返回当前页面的URL地址
注意$location服务是作为一个参数传递到controller中,如果要使用它,需要在controller中定义.
$location.xxx( ) ['yy'] ; 可以获取url上带的参数
var id= $location.search()['id'];//获取参数值
问题:Angular的很多服务，在DOM中有对应的对象，那为什么不使用这些对象，而是要用服务呢？
回答:因为这些服务可以获取到Angular应用声明周期的每一个阶段，并且和$watch整合，让Angular可以监控应用，处理事件变化。普通的DOM对象则不能在Angular应用声明周期中和应用整合
$watch : 持续监听数据上的变化,更新界面,或者执行方法
$sce 服务提供了很多方法,用来为一些资源和AngularJS系统之间建立信任
常见的有
$sce.trustAsHtml(…)：将一段html文本视为安全
$sce.trustAsUrl(…)
$sce.trustAsResourceUrl(…)
$sce.trustAsJs(…)
在网页搜索功能设置高亮字段的时候我们可以使用$sce服务和过滤器来进行简化开发
例:定义了一个模块'youlin',在下方定义了一个过滤器
var app = angular.module("youlin",[]);
/*$sce服务写成过滤器*/
app.filter('trustHtml',[function($sce){
return function(data){
return $sce.trustAsHtml(data);
}
}]);
$event 获取当前事件元素
$index 获取当前索引
过滤器
自定义过滤器 | 用于调用过滤器
示例:自定义一个过滤器 reverse，将字符串反转
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
angularJs路由 会在路径后面加上一个#号
例:通常我们的URL形式为 http://youlin.com/first/page，但在单页Web应用中
AngularJS 通过 #
+ 标记 实现
总结有不当之处,希望同行指出,一起进步
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js常用知识总结(未完待续)
- js常用知识总结01
- js常用知识总结02
- js常用属性及方法总结(温习下旧知识)
- 常用到的js知识1
- ios常用知识总结(2) : 手机号判断、身份证号判断、字符串为空判断
- 2008年总结项目中常用到的JS验证脚本
- js数组去重的三种常用方法总结
- JavaScript基础知识及常用方法总结
- python编程中常用的12种基础知识总结（基础知识，面试可能用得上）
- php，js常用的一些总结
- Python编程中常用的12种基础知识总结
- 总结的js性能优化方面的小知识
- iOS 常用知识总结二
- JS常用的对象函数总结归纳
- python编程中常用的12种基础知识总结
- 总结JS 常用函数
- Javascript正则表达式常用知识总结
- javascript常用知识总结
- Atitit. js mvc 总结(2)----angular 跟 Knockout o99 最佳实践