专访AngularJS框架创始人Misko Hevery：让Web开发更便捷
发表于 20:36|
摘要：AngularJS是Google推出的开源JavaScript MV*（MVW、MVVM、MVC）框架，其通过为开发者呈现一个更高层次的抽象来简化应用的开发。CSDN记者采访了AngularJS的创始人Misko Hevery，请他来介绍AngularJS项目背后的故事。
AngularJS是一款开源的JavaScript MV*（MVW、MVVM、MVC）框架，目前由Google维护。AngularJS弥补了HTML在构建应用方面的不足，其通过使用标识符（directives）结构，来扩展Web应用中的HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。官方网站：AngularJS最初由Mi?ko Hevery和Adam Abrons于2009年开发，后来成为了Google公司的项目。CSDN记者采访了AngularJS的创始人之一Misko Hevery，请他来为我们介绍一下AngularJS项目开发背后的故事。CSDN：请先介绍一下您的经历！Misko：加入Google公司之前，我曾在Intel、Xerox（施乐）、Sun和Adobe公司工作过，主要从事数据库/后端方面的工作。加入Google公司后，我开始转向自动化测试，这个工作的主要目的是改进Google的开发者工作效率，从而改善代码库。我之前并不太热衷于JavaScript，直到我的老板让我涉足这一领域，并让我研究关于JavaScript的所有知识。CSDN：讲讲AngularJS开发背后的故事，当初为什么发起这个项目？Misko：AngularJS最初是作为一个编外项目（side project），当时我想去看看是否有可能让Web设计师（非开发者）只使用HTML标签来创建简单的应用程序。随着时间的推移，AngularJS演变成了一个全面的开发框架。2010年是一个转折点，当时我正参与Google Feedback的开发。我们使用GWT进行开发，比较郁闷的是，开发速度和项目的进展比较缓慢。我意识到，我的这个编外项目也许可以让这个产品的构建过程快一些。随后，我将17K大小的基于GWT的应用程序使用JavaScript进行了重写，且代码只有1500行。这引起了很多人的重视，公司也开始资助我们全职开发AngularJS。CSDN：AngularJS的设计理念是什么？灵感来自于什么？Misko：AngularJS遵循的设计理念是——构建UI应该是声明式的。灵感来自于我之前在Adobe公司所从事的FLEX方面的工作。但是我还想要有大量的声明式UI，这也是AngularJS中标识符（directives）想法的灵感来源。CSDN：AngularJS是如何实现这一理念的？Misko：我发现大多数人开始一个新东西时，往往会从他想到的有可能实现的方面入手，然后围绕它创建一个框架。而我更倾向于从我想要的东西入手，我认为某个想法很棒，就会朝着这个目标不断努力，直到实现它。起初，一些想法看似无法实现，但是随着时间的推移，你的一些技能也许可以让它变成可能。例如：我想要实现不那么突兀的数据绑定，也就是说任何对象都可以进行数据绑定。但是当一个对象发生变化时，无法使用JS来获取通知。这样一来，大多数人就会认为这是无法实现的，他们会让你使用getter/setters来代替字段访问。CSDN：AngularJS的设计目标是什么？Misko：首要目标是，使Web应用开发更容易，并在这个过程中使Web变得更强。第二个目标是，向人们展示以这种方式来构建Web应用程序也是可能的。此外，还希望向人们传达一些关于测试、声明式UI和依赖注入方面的知识。CSDN：AngularJS项目的开发人员有几名？Misko：最初AngularJS项目团队只有Adam Abrons和我两个人。但自从Google公司接管了这个项目后，目前团队人数已经达到了15人。CSDN：你们是如何解决AngularJS开发过程中遇到的困难的？Misko：考虑你想要实现的东西，然后朝着这个目标努力。你或许不会得到一个非常理想的结果，但是这样会比你一开始就以能够实现作为目标的结果要更好。CSDN：AngularJS限定不能超过2000个绑定对象，有人将它视为编写大型应用的限制，对此您怎么看？Misko：这不是一个硬性限制。要知道，Angular应用程序的性能与对象绑定数量呈线性关系。绑定的对象越多，应用程序的速度会变得越慢。对于2000个的限制，我的看法是，这是你能够在一个页面上展示给用户的所有东西的数量限制。通过这个限制，刷新页面的时间可以减少到5ms以下。因此，性能的主要限制因素是人，而不是计算机。CSDN：介绍一下AngularJS的dirty-checking机制？其性能如何？Mi?ko：Dirty-checking是我们用来检测对象的变化的。我们仅在模型可能发生变化时运行它。这是一个事件驱动系统。性能方面，如果对象的比较过程相对简单，那么进行1000次比较，在现代浏览器上可能只需要一两毫秒，所以性能真的不是一个问题。正如前面所提到的，性能的限制因素是人。此外，这样做的好处是，你能够为你的模型使用纯老式的JavaScript对象。CSDN：哪些应用适合使用AngularJS？哪些不适合使用？Misko：AngularJS可以很好地用来开发表单/报表类的应用程序，而这类应用程序在Web中所占比例高达90%。而如果你想构建一个照片编辑类的应用，你可能不会想去使用AngularJS。CSDN：Angular的未来会如何发展？Misko：我们希望未来AngularJS能够更好地与Web标准看齐。我们还打算将AngularJS分解成大量的小型库，你可以将这些库集合起来使用，也可以单独使用某些库。CSDN：对于前端开发者，你有什么建议？Misko：尝试去开发一些伟大的网站，让Web变得更美好。本文为CSDN采访整理，未经允许不得转载，如需转载请联系market#csdn.net(#换成@)【开源专访】系列文章致力于对国内外优秀开源项目作者、团队的专访，挖掘项目背后的故事和更多技术细节，以及对项目的宣传、推广。同时，我们也希望广大开源开发者和爱好者自荐或推荐更多优秀的开源项目。欢迎留言或。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章AngularJS 本例是 权威指南的相关例程， 全面详细，准确，非常有利于学习。 source in ebook 书籍源码 249万源代码下载-
&文件名称: AngularJS& & [
& & & & &&]
&&所属分类:
&&开发工具: JavaScript
&&文件大小: 1268 KB
&&上传时间:
&&下载次数: 0
&&提 供 者:
&详细说明：本例是AngularJS权威指南的相关例程，例程全面详细，准确，非常有利于学习。-This example is AngularJS authoritative guide related routines, routine comprehensive, detailed and accurate, and very conducive to learning.
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&AngularJS权威教程(源码)&&.......................\.gitignore&&.......................\10_configuration&&.......................\................\index.html&&.......................\10_directives-explained&&.......................\.......................\index.html&&.......................\.......................\scope&&.......................\.......................\.....\inherited-scope.html&&.......................\.......................\.....\isolate-scope.html&&.......................\.......................\.....\surrounding-scope.html&&.......................\.......................\transclusion.html&&.......................\11_routing&&.......................\..........\app.css&&.......................\..........\app.js&&.......................\..........\index.html&&.......................\13_dependency-injection&&.......................\.......................\index.html&&.......................\13_validations&&.......................\..............\form-validation&&.......................\..............\...............\index.html&&.......................\..............\index.html&&.......................\14_services&&.......................\...........\index.html&&.......................\15_ajax&&.......................\.......\index.html&&.......................\15_ajax.zip&&.......................\17_promises&&.......................\...........\index.html&&.......................\18_server&&.......................\.........\aws&&.......................\.........\...\app.js&&.......................\.........\...\controllers.js&&.......................\.........\...\directives.js&&.......................\.........\...\index.html&&.......................\.........\...\main.html&&.......................\.........\...\policy.acl&&.......................\.........\...\services.js&&.......................\.........\node&&.......................\.........\....\myApp&&.......................\.........\....\.....\.bowerrc&&.......................\.........\....\.....\app.js&&.......................\.........\....\.....\bower.json&&.......................\.........\....\.....\package.json&&.......................\.........\....\.....\public&&.......................\.........\....\.....\......\index.html&&.......................\.........\....\.....\......\javascripts&&.......................\.........\....\.....\......\...........\app.js&&.......................\.........\....\.....\......\...........\services.js&&.......................\.........\....\.....\......\stylesheets&&.......................\.........\....\.....\......\...........\style.css&&.......................\.........\....\.....\routes&&.......................\.........\....\.....\......\hits.js&&.......................\.........\....\.....\......\index.js&&.......................\.........\....\.....\......\user.js&&.......................\.........\....\.....\views&&.......................\.........\....\.....\.....\index.jade&&.......................\.........\....\.....\.....\layout.jade&&.......................\19_testing&&.......................\..........\karma&&.......................\..........\.....\karma-e2e.conf.js&&.......................\..........\.....\karma.conf.js&&.......................\..........\.....\package.json&&.......................\..........\.....\public&&.......................\..........\.....\......\index.html&&.......................\..........\.....\......\js&&.......................\..........\.....\......\..\app.js&&.......................\..........\.....\......\..\controllers.js&&.......................\..........\.....\......\..\directives.js&&.......................\..........\.....\......\..\filters.js&&.......................\..........\.....\......\lib&&.......................\..........\.....\......\...\angular-mocks.js&&.......................\..........\.....\......\...\angular-route.js&&.......................\..........\.....\......\...\angular.js&&.......................\..........\.....\......\templates&&.......................\..........\.....\......\.........\dashboard.html&&.......................\..........\.....\......\.........\home.html&&.......................\..........\.....\server.sh&&.......................\..........\.....\test&&.......................\..........\.....\....\e2e&&.......................\..........\.....\....\...\directives.js&&.......................\..........\.....\....\...\filters.js&&.......................\..........\.....\....\...\templates.js&&.......................\..........\.....\....\unit&&.......................\..........\.....\....\....\directives.js&&.......................\..........\.....\....\....\filters.js&&.......................\..........\.....\....\....\routes.js&&.......................\..........\.....\....\....\templates.js&&.......................\..........\protractor&&.......................\..........\..........\index.html&&.......................\..........\..........\protractor_conf.js&&.......................\..........\..........\test&&.......................\..........\..........\....\e2e&&.......................\..........\..........\....\...\home.js&&.......................\22_animation&&.......................\............\ng-class&&.......................\............\........\css-animation.html&&.......................\............\........\css-transition.html&&.......................\............\........\js-animation.html&&.......................\............\ng-if&&.......................\............\.....\css-animation.html
&输入关键字，在本站249万海量源码库中尽情搜索：Angularjs有关问题总结 - JavaScript当前位置:& &&&Angularjs有关问题总结Angularjs有关问题总结&&网友分享于：&&浏览：0次Angularjs问题总结
Angularjs版本1.4.4
Angularjs验证记录(1.4.4)
1.使用JS给表单赋值不能验证通过
在使用Angularjs做验证的时候使用jquery或者其他方式直接给input赋值不能通过Angularjs的验证，
是因为需要将值付给ng-model对象中的值
如下：将jquery的赋值方式改为给scope中的实体直接赋值才能通过验证
$("#logoPath").val(data.result.path);
scope.logoPath=data.result.
2.使用requirejs(2.1.9)与Angularjs(1.4.4)整合加载顺序导致找不到Angularjs控制器问题
报错如下Error: [ng:areq] Argument 'brandController' is not a function, got undefined
分析原因如下：
使用bootstrap将应用加载到页面（angular.bootstrap(document, ['pwyecEP']);）时候会先于Controller模块的js先执行导致页面中的标签不能被找到
解决办法:1.将控制器依赖关系写入bootstrap文件中，坏处是多人开发的时候会没人都编写这个文件
'directive/BootstrapSwitch',
'directive/Uploader',
'brand/Ctrl'
], function(angular){
angular.element(document).ready(function(){
angular.bootstrap(document, ['pwyecEP']);
解决办法:2.将代码写成一个返回方法，在调用控制器以后再调用方法
'directive/BootstrapSwitch',
'directive/Uploader',
'brand/Ctrl'
], function(angular){
run:function(){
angular.element(document).ready(function(){
angular.bootstrap(document, ['pwyecEP']);
调用代码：
require(['brand/Ctrl','bootstrap'],function(ctrl,bootstrap){
bootstrap.run(); });
3.集成EasyUI(1.4.3)渲染问题
直接在页面上门通过HTML来渲染EasyUI不可行
要通过JS的方式来渲染 在控制器中添加加载方法
$scope.initGrid=function(){
var columns=[[]];//列信息
var toolbar=[[]]工具条
function layout(){
$('#mainLayout').layout();//加载视图
var options={
queryParams:generateSerachPrams(),
frozenColumns:[[
{field:'ck',checkbox:true}
columns:columns,
toolbar:toolbar
grid=$('#dataList').datagrid(gridHelper.createConfig(options,$scope));
$timeout(layout,0,false);//加载表格到页面（不使用$timeout服务加载会报错）
4.让EasyUI(1.4.3)的行代码可以实现指令
看了下easyUI的代码和API 采用重写 $.fn.datagrid.defaults.view.render方法来实现执行指令
调用$compile服务编译render方法生成出的html代码 让代码可以执行指令
function createConfig(options,scope) {
//重写视图面板让表格支持angular指令
var appview = $.extend({}, $.fn.datagrid.defaults.view, {
render : function(target, container, frozen) {
var _927 = $.data(target, "datagrid");
var opts = _927.
if (opts.groupField) {
var g = this.groupRows(target, _927.data.rows);
this.groups = g.
_927.data.rows = g.
var _928 = [];
for (var i = 0; i & g.groups. i++) {
_928.push(this.renderGroup.call(this, target, i,
g.groups[i], frozen));
var el = $compile(_928.join(""))(scope);//创建Dom元素
$(container).html(el);
var el = $compile(this.renderTable(target, 0,_927.data.rows, frozen))(scope);//创建Dom元素
$(container).html(el);
var defaultOptions={
height:"auto",
pageList:[10,20,50],
singleSelect:true,
checkOnSelect:false,
selectOnCheck:false,
autoRowHeight:false,
pageSize:20,
pageNumber:1,
nowrap: false,
striped: true,
collapsible:true,
rownumbers:true,
fitColumns:true,
view:appview,
url:'querypage.json',
remoteSort: false,
loadFilter:function(data){
var total=0;
var data1=[];
if(data.success){
total=data.result.
data1=data.result.
"total":total,
"rows":data1
onBeforeLoad:function(param){
var grid=$(this);
var options = grid.datagrid('getPager').data("pagination").
var pageNumber = options.pageN
var pageSize = options.pageS
param.pageNumber=pageN
param.pageSize=pageS
$log.log('param: ', param);
idField:null,
pagination:true//翻页工具栏
defaultOptions=app.extend(defaultOptions,options);
return defaultO
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有}