Angularjs
发布时间:2022-04-20 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了快速掌握AngularJs,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
一、前言
对于前端系列,自然少不了AngularJs的介绍了。在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用程序。在开始使用AngularJs开发SPA之前,我觉得有必要详细介绍下AngularJs所涉及的知识点。所有也就有了这篇文章。
二、AngularJs介绍
AngularJS是Google推出的一款Web应用开发框架。它提供了一系列兼容性良好并可扩展的服务,包括数据绑定、DOM操作、MVC和依赖注入等特性。相信下面图片可以更好地诠释AngularJs具体支持哪些特性。
从上图可以发现,AngularJs几乎支持构建一个Web应用的所有内容——数据绑定、表单验证、路由、依赖注入、控制器、模板和视图等。
但并不是所有的应用都适合用AngularJs来做。AngularJS主要考虑的是构建CURD应用,但至少90%的Web应用都是CURD应用。哪什么不适合用AngularJs来做呢? 如游戏、图像界面编辑器等应用不适合用AngularJs来构建。
三、AngularJS核心知识点
接下来,我们就详细介绍了AngularJS的几个核心知识点,其中包括:
- 指令(directive)和数据绑定(Data Binding)
- 模板(ModulE)
- 控制器(Controller)
- 路由(RoutE)
- 服务(servicE)
- 过滤器(Filter)
@H_618_55@3.1 指令和数据绑定
在没有使用AngularJs的Web应用,要实现前台页面逻辑通过给HTML元素设置ID,然后使用Js或Jquery通过ID来获取HTML DOM元素。而AngularJS不再需要给HTML元素设置ID,而是使用指令的方式来指导HTML元素的行为。这样做的好处是开发人员看到HTML元素以及指令(DirectivE)就可以理解其行为,而传统设置Id的方式并不能给你带来任何有用的信息,你需要深入去查看对应的Js代码来理解其行为。
上面介绍了这么多,好像没有正式介绍指令是什么呢?光顾着介绍指令的好处和传统方式的不同了。指令可以理解为声明特殊的标签或属性。AngularJs内置了很多的指令,你所看到的所有以ng开头的所有标签,如ng-app、ng-init、ng-if、ng-model等。
ng-app:用于标识页面是一个AngularJs页面。一般加载HTML的根对象上。
ng-init 用于初始化了一个变量
ng-model:用户在Property和Html控件之间建立双向的数据绑定(Data Binding)。这样Html控件的值改变会反应到Property上,反过来也同样成立。
AngularJs通过表达式的方式将数据绑定到HTML标签内。AngularJs的表达式写在双大括号内:{{expression}}
下面具体看一个指令的例子:
<!DOCTYPE html>
<html ng-app xmlns="http://www.w3.org/1999/xhtml"head>
Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title>Using Directives and Data Binding Syntax</body ng-init="name = '欢迎学习AngularJS'"div>
Name: input type="text" ng-model="name" /> {{name}}
script src="/Scripts/angular.min.js"></scriptbodyhtml>
效果在线预览:点击此运行
从在线预览的页面可以发现,当我们改变输入框的值时,对应的改变会反应到name属性上,从而反应到表达式的值。AngularJs中双向绑定的使用主要是靠ng-model指令来完成的。前面说的都是一些AngularJs内置的指令,其实我们也可以自定义指令。关于这部分内容将会在后面介绍到。
@H_618_55@3.2 模板
在Asp.net MVC中提供了两种页面渲染模板,一种是Aspx,另一种是Razor.然而Asp.net MVC的这两种模板都是后端模板,即页面的渲染都是在服务端来完成的。这样不可避免会加重服务器端的压力。AngularJs的模板指的是前端模板。AngularJS有内置的前端模板引擎,即所有页面渲染的操作都是放在浏览器端来渲染的,这也是SPA程序的一个优势所在,所有前端框架都内置了前端模板引擎,将页面的渲染放在前端来做,从而减轻服务端的压力。
在AngularJs中的模板就是指带有ng-app指令的HTML代码。AngularJs发现Html页面是否需要用AngularJs模板引擎去渲染的标志就是ng-app标签。
在AngularJs中,@H_618_55@我们写的其实也并不是纯的Html页面,而是模板,最终用户看到的Html页面(也就是视图)是通过模板渲染后的结果。
下面来看下模板的例子:
ng-app
="mainApp">Template Demo
>
="http://sandBox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js">
(function() {
// 创建模块
var mainApp = angular.module("@H_361_217
@mainApp
,[]);
创建控制器,并注入scope
mainApp.controller(tempController:1.5!important; BACkground-color:rgb(245,[$scope:1.5!important; BACkground-color:rgb(245, ($scopE) {
$scope.val = Welcome to study AngularJs.;
}]);
})()
h2>AngularJS 模块演示
>
div ng-controller="tempController">
><="val"> {{val}}
>
在线预览地址:点击此运行
3.3 控制器
其实模板中的例子中,我们就已经定义了名为"tempController"的控制器了。接下来,我们再详细介绍下AngularJs中的控制器。其实AngularJs中控制器的作用与Asp.net MVC中控制器的作用是一样的,都是模型和视图之间的桥梁。而AngularJs的模型对象就是$scope。所以AngularJs控制器知识$scope和视图之间的桥梁,它通过操作$scope对象来改变视图。下面代码演示了控制器的使用:
>
AngularJS 控制器演示
>
:rgb(0,[]);
mainApp.controller(cntoController ($scopE) {
DefaultValue Learninghard 前端系列;
$scope.val DefaultValue;
$scope.click = () {
$scope.val DefaultValue;
};
}]);
})()
="cntoController"textarea ng-modeltextarea>{{val}}
button ng-click="click()">重置
button>
在线预览效果: 3.4 路由
之所以说AngularJs框架=MVC+MVVM,是因为AngularJs除了支持双向绑定外(即MVVM特点),还支持路由。在之前介绍的KnockoutJs实现的SPA中,其中路由借用了Asp.net MVC中路由机制。有了AngularJs之后,我们Web前端页面完全可以不用Asp.net MVC来做了,完全可以使用AngularJs框架来做。
单页Web应用由于没有后端URL资源定位的支持,需要自己实现URL资源定位。AngularJs使用浏览器URL"#"后的字符串来定位资源。路由机制并非在AngularJS核心文件内,你需要另外加入angular-route.min.js脚本。并且创建mainApp模块的时候需要添加对ngRoute的依赖。
下面让我们具体看看路由的例子来感受下AngularJs中路由的使用。具体的示例代码如下:
主页面AngularJsRouteDemo.html
="mainApp"
xmlns>AngularJs路由演示="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"() {
设置当前模块依赖,“ngRoute”,用.NET的解就是给这个类库添加“ngRoute”引用
'ngRoute]);
mainApp.config([$routeProvider($routeProvider) {
路由配置
route $routeProvider;
指定URL为“/” 控制器:“listController”,模板:“route-list.html”
route.when(/list:1.5!important; BACkground-color:rgb(245,{ controller: listController:1.5!important; BACkground-color:rgb(245,templateUrl: route-list.html });
注意“/view/:id” 中的 “:id” 用于捕获参数ID
/view/:idviewControllerroute-view.html 跳转
/:1.5!important; BACkground-color:rgb(245,{ redirectTo: });
route.otherwise({ redirectTo: });
}]);
创建一个提供数据的服务器
mainApp.factory(service() {
list [
{ id: 1:1.5!important; BACkground-color:rgb(245,title: 博客园:1.5!important; BACkground-color:rgb(245,url: http://www.cnblogs.com },{ id: 2知乎http://www.zhihu.com3codeprojecthttp://www.codeproject.com/4stackoverflowhttp://www.stackoverflow.com/ }
];
return (id) {
假如ID为无效值返回所有
if (!id) return list;
t 0;
匹配返回的项目
angular.forEach(list,245)">(v,i) {
(v.id == id) t i;
});
list[t];
}
});
创建控制器 listController,注入提供数据服务
mainApp.controller(:1.5!important; BACkground-color:rgb(245,($scope,servicE) {
获取所有数据
$scope.list service();
}]);
创建查看控制器 viewController,注意应为需要获取URL ID参数 我们多设置了一个 依赖注入参数 “$routeParams” 通过它获取传入的 ID参数
$routeParams:1.5!important; BACkground-color:rgb(245,service,$routeParams) {
$scope.model service($routeParams.id || ) || {};
}]);
})()
a href="#/list">列表abr ng-view>
列表页面route-list.html
ul ng-repeat="item in list"li="#view/{{item.iD}}">{{item.title}}ul>
详细页面 route-view.html
>
网站ID:{{model.iD}}>网站名称:="{{model.url}}" rel="nofollow">{{model.titlE}}>访问地址:{{model.url}} 在线预览地址:点击此运行
前面我们已经介绍过指令了。除了AngularJs内置的指令外,我们也可以自定义指令来供我们程序使用。
如果我们在程序中需要对DOM操作的话,我们可以使用指令来完成。下面让我们来看下一个全选复选框的自定义指令的实现:
>
AngularJs 指令演示="http://sandBox.runjs.cn/uploads/rs/376/pbcx3e1z/jquery-1.10.2.min.js"(){
:rgb(0,[]);
() {
[
{ id: }
];
(id) {
假如ID为无效值返回所有
list;
;
angular.forEach(list,245)"> (v,i) {
i;
});
list[t];
};
});
mainApp.directive(imcheck:1.5!important; BACkground-color:rgb(245,[ {
reStrict: A:1.5!important; BACkground-color:rgb(245,replace: false:1.5!important; BACkground-color:rgb(245,link: (scope,element) {
all thead input[type='checkBox'];
item tbody input[type='checkBox']当点击选择所有项目
element.on(change () {
o $(this).prop(checked);
tds element.find(item);
tds.each( (i,check) {
$(check).prop(:1.5!important; BACkground-color:rgb(245,o);
});
});
子项修改时的超值
ischecked true (o) {
element.find(item).each( () {
$()) {
ischecked ;
;
}
;
});
}
element.find(all).prop(:1.5!important; BACkground-color:rgb(245,o && ischecked);
});
}
};
}]);
mainApp.controller(dectController ($scope,servicE) {
$scope.list service();
}]);
})()
table ="dectController" im-checkthead>
tr>
th="checkBox">选择>网站ID>网站名称>链接地址tbodytr td>{{item.iD}}>{{item.url}}table>
演示效果:
3.6 服务
在上面的路由例子和自定义指令中都有用到AngularJs中的服务。我理解AngularJs的服务主要是封装请求数据的内容。就如.NET解决方案的层次结构中的Services层。然后AngularJs中的服务一个很重要的一点是:服务是单例的。一个服务在AngularJS应用中只会被注入实例化一次,并贯穿整个生命周期,与控制器进行通信。即控制器操作$scope对象来改变视图,如果控制器需要请求数据的话,则是调用服务来请求数据的,而服务获得数据可以通过Http服务(AngularJS内置的服务)来请求后端的Web API来获得所需要的数据。
AngularJS系统内置的服务以$开头,我们也可以自己定义一个服务。定义服务的方式有如下几种:
- 使用系统内置的$provide服务
- 使用Module的factory方法
- 使用Module的service方法
在前面的例子我们都是以factory方法创建服务的,接下来演示下如何使用$provide服务来创建一个服务,具体的代码如下所示:
(){
@H_618_55@:rgb(0,[]).config([$provide($providE){ 使用系统内置的$provide服务来创建一个提供数据的服务器
$provide.factory( () { list[t];
};
});
}]);
mainApp.directive( ischecked);
});
}
};
}]);
mainApp.controller( 具体的运行效果与上面的效果一样。 3.7 过滤器
AngularJs过滤器就是用来格式化数据的,包括排序,筛选、转化数据等操作。下面代码创建了一个反转过滤器。
>
AngularJs 过滤器演示>
>
() {
:rgb(0,[]);
定义反转过滤器,过滤器用来格式化数据(转化,排序,筛选等操作)。
mainApp.filter(reverse() {
(input,uppercasE) {
input input '';
out ""for ( i ; i < input.length; i++) {
out input.charAt(i) + out;
}
(uppercasE) {
out out.toUpperCase();
}
out;
};
});
mainApp.controller(filterController($scopE) {
$scope.greeTing AngularJs;
}]);
})()
="filterController"="greeTing" type="text"br>
No filter: {{greeTing}}>
Reverse: {{greeTing|reversE}}>
Reverse + uppercase: {{greeTing|reverse:truE}}>
具体的运行效果: 3.8 前端模块化开发
前面例子中的实现方式并不是我们在实际开发中推荐的方式,因为上面的例子都是把所有的前端逻辑都放在一个Html文件里面,这不利于后期的维护。一旦业务逻辑一复杂,这个Html文件将会变得复杂,导致跟踪问题和fix bug难度变大。在后端开发过程中,我们经常讲职责单一,将功能相似的代码放在一起。前端开发也同样可以这样做。对应的模块化框架有:RequireJs、SeaJs等。
也可以使用AngularJs内置的模块化来更好地组织代码结构。具体的代码请到本文结尾进行下载。这里给出一张采用模块化开发的截图:
四、总结
到这里,本文的所有内容就结束了,在后面的一篇文章中,我将分享使用AngularJs实现一个简易的权限管理系统。
更多内容参考:
AngularJS教程
AngularJs官网
本文所有源码下载:AngularJsQuickStart
本图文内容来源于网友网络收集整理提供,作为学习参
考使用,版权属于原作者。
@H_@R_450_11248@_860@
@H_586_
874@
上一篇:Angular:这个锅我不背下一篇:[AngularJS面面观] 4. scope中的$a
猜你在找的Angularjs相关文章
@H_
607_897@angular.js实现数据双向通信的原理angular的核心特性有:MVVM、模块化、依赖注入、自动化双
向数据绑定、语义标签等。1、AngularJS的scopes对象AngularJS的scopes对象,是
一般的javascript对象,可以在他们上面绑定属性和其他对象,也可以添加一些功能,用于观察数据结构上的变化。观察功能都由dirty-
checking来实现,并且都在一个digest循环中...
@H_
607_897@AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。AngularJS 扩展了 HTMLAngu
@H_
607_897@AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有前缀ng-。ng-app指令初始化一个 AngularJS 应
@H_
607_897@AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:
{{ expression }}。AngularJS 表达式把数据绑定到 HT