angularjs主要是做什么

angularjs主要是做什么

本文目录

  • angularjs主要是做什么
  • angularjs 判断对象是否为空
  • Angular到底适合做什么类型的项目
  • Angular有何优势为何备受程序猿喜爱
  • Angular框架有哪些优点和缺点
  • AngularJS 有哪些优缺点
  • AngularJS 为什么如此火
  • angular的中文翻译是什么
  • angular是哪个团队开发的
  • angular中的$log与console.log到底有什么区别

angularjs主要是做什么


AngularJS的官方文档是这样介绍它的。
1、完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术(HTML、CSS和JavaScript)配合使用,使Web应用开发比以往更简单、更快捷。
2、AngularJS主要用于构建单页面Web应用。它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单。
3、AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架。
4、AngularJS使开发Web应用变得非常简单,同时也降低了构建复杂应用的难度。它提供了开发者在现代Web应用中经常要用到的一系列高级功能,例如:
解耦应用逻辑、数据模型和视图;
Ajax服务
依赖注入;
浏览历史(使书签和前进、后退按钮能够像在普通Web应用中一样工作);
测试;

angularjs 判断对象是否为空


在AngularJs中判断对象是否为空,可以使用angular.equals,如下:

AngularJS

AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。

AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 《script》 标签添加到HTML 页面。

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。

AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中。

背景介绍

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。

所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。

通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:

类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等

框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。

框架有:knockout、sproutcore等。

AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。

例如:

使用双大括号{{}}语法进行数据绑定;使用DOM控制结构来实现迭代或者隐藏DOM片段;支持表单和表单的验证;能将逻辑代码关联到相关的DOM元素上;能将HTML分组成可重用的组件


Angular到底适合做什么类型的项目


Angular.js
首先Angular的背后是Google(难道这就是官网被墙的原因?),所以社区基础是不用担心的,整个生态也已经是非常的完整了,从最基本的Tutorial到StackOverflow的问题数到框架本身的剖析都有非常非常多,所以从这个角度看起来Angular应该算是上手比较容易的。
不过Angular目前的问题看起来也很明显
1. 性能
同样是TODOMVC的Sample,Angular完全载入用了1.1s(WebPagetest - Visual Comparison)。目前用到的基于Angular的就是Kibana,不得不说,确实挺慢的。。
2. Angular 2.0
Angular的2.0几乎是一个推翻重做的框架,估计不会有1.X的upgrade方案。所以如果现在新开始的项目采用Angular的话,会是一个很尴尬的时机。同样,如此大的改动似乎也反面印证了1.X并不是那么好。
React.js
React很大的特点就是“轻”,再加上VDOM这个很好的idea让React非常非常快(在上面那个测试里面0.3s左右就载入完毕)。另外React和Angular一个很大的不同就是React采用的是one-way data flow。
React的缺点嘛,大概就是现在还太新了很难说将来有没有大的API变化,目前在大的稳定的项目上采用React的,也就只知道有Yahoo的Email。所以现在很少有批评React的声音。也许不是真的就没有坑,而是那些坑还没有被踩出来而已。
还有就是React本身只是一个V而已,所以如果是大型项目想要一套完整的框架的话,也许还需要引入Flux和routing相关的东西。
总结
Angular是真正的大而全的framework,有自己一套思路,基本follow这个思路往里面填代码就OK。
React是一个简短有力的library,只负责解决某个单一的“痛点”。

Angular有何优势为何备受程序猿喜爱


Angular是目前前端开发使用率比较高的一个框架,它开发简单,不用做过多的页面,扩展性强,让很多程序员都非常喜爱。

单页面模式让程序员快速开发

很久以前开发前端页面都需要一个页面一个页面的编写。比如一个网站有商品列表页,商品详情页,以往的开发方式都是编写2个页面,加重了程序员开发的压力。而Angular则比较注重单页面模式,程序员可以快速的搭建页面,不用在一个页面一个页面的写了。

Angular搭配Bootstrap事半功倍

Angular最显著的特点就是页面值的绑定。这个特性和Bootstrap,CSS搭配起来更能加快开发速度。比如我们要根据一个值来决定复选框是否选中,平常都需要写一堆JS代码来完成这个功能,而如果用Angular则只需要用ng-model绑定值就可以实现功能。

另外Angular和BootStrap的搭配可以更好的实现样式的编写,是快速开发的标配。

各种Angular插件让程序员不用重复写扩展

Angular的另一个特点就是可以很便捷的扩展。我们在平时开发Web程序的时候都会有一些小功能,比如分页功能。在用到这个功能时,需要自己手动写分页。而用了Angular就可以直接用别人写好的插件,配置一下就可以轻松实现分页。目前Angular的社区已经拥有了很多的插件,可以满足开发过程中的大多数需求。不过Angular编写插件对于新生来说可能有一些困难。

针对Angular的优势你还知道哪些点呢?欢迎大家在底下留言评论,大家一起学习吧!


Angular框架有哪些优点和缺点


一、angularjs是一个javascript框架。通过script脚本引入,他是一个用Javascript编写的库。angularjs通过指令扩展了HTML,通过表达式绑定数据到HTML中。AngularJS主要考虑的是构建CRUD(增删改查)应用。

优点:

1. 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令;

2. 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能;

3. 自定义Directive(指令),比jQuery插件还灵活,但是需要深入了解Directive的一些特性,简单的封装容易,复杂一点官方没有提供详细的介绍文档,可以通过阅读源代码来找到某些我们需要的东西,如:在directive使用 $parse;

4. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。

缺点:

1. 验证功能错误信息显示比较薄弱,需要写很多模板标签,没有jQuery Validate方便,所以可以自己封装了验证的错误信息提示

2. ngView只能有一个,不能嵌套多个视图,虽然有angular-ui/ui-router · GitHub 解决,但是貌似ui-router 对于URL的控制不是很灵活,必须是嵌套式的;

3. 对于特别复杂的应用场景,貌似性能有点问题,特别是在Windows下使用chrome浏览器,不知道是内存泄漏了还是什么其他问题,没有找到好的解决方案,奇怪的是在IE10下反而很快;

4. 这次从1.0.X升级到1.2.X,貌似有比较大的调整,没有完美兼容低版本,升级之后可能会导致一个兼容性的BUG,具体详细信息参考官方文档AngularJS ,对应的中文版本:Angular 1.0到1.2 迁移指南

5. ng提倡在控制器里面不要有操作DOM的代码,对于一些jQuery 插件的使用,如果想不破坏代码的整洁性,需要写一些directive去封装插件,但是现在有很多插件的版本已经支持Angular了,如:jQuery
File Upload Demo

6. Angular 太笨重了,没有让用户选择一个轻量级的版本,当然1.2.X后,Angular也在做一些更改,比如把route,animate等模块独立出去,让用户自己去选择。


AngularJS 有哪些优缺点


  • AngularJS 在实际应用中优点:

  1. 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令;

  2. 是一个比较完善的前端MV*框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能;

  3. 自定义Directive,比jQuery插件还灵活,但是需要深入了解Directive的一些特性,简单的封装容易,复杂一点官方没有提供详细的介绍文档,可以通过阅读源代码来找到某些我们需要的东西;

  4. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助,即使UI变化很大,而且产品更新迭代,但是js的代码基本上却很少改动。

补充:Angular支持单元测试和e2e-testing。

  • AngularJS 在实际应用中缺点:

  1. 验证功能错误信息显示比较薄弱,需要写很多模板标签,没有jQuery Validate方便,所以我们自己封装了验证的错误信息提示;

  2. ngView只能有一个,不能嵌套多个视图,虽然有 angular-ui/ui-router · GitHub 解决,但是貌似ui-router 对于URL的控制不是很灵活,必须是嵌套式的;

  3. 对于特别复杂的应用场景,貌似性能有点问题,特别是在Windows下使用chrome浏览器;

  4. 这没有完美兼容低版本,升级之后可能会导致一个兼容性的BUG;

  5. ng提倡在控制器里面不要有操作DOM的代码,对于一些jQuery 插件的使用,如果想不破坏代码的整洁性,需要写一些directive去封装插件,但是现在有很多插件的版本已经支持Angular了;

  6. Angular 太笨重了,没有让用户选择一个轻量级的版本,;

使用的人多才会暴露更多的问题,一起为这些问题寻找解决方案是一个社区的良性趋势,选择Angular,的确使开发效率大大提高。


AngularJS 为什么如此火


数据绑定和scopes(作用域)
首先第一个浮出大脑的问题是:angular支持数据绑定吗?下面让我们来了解angular.js的数据绑定:
《body ng-app》
《span》Insert your name:《/span》
《input type=“text“ ng-model=“user.name“ /》
《h3》Echo: {{user.name}}《/h3》
《/body》
在这代码片段中,在我们解释细节之前,我还是希望尝试下其效果:
注:此刻暂时不要太心急去了解ng-app。
如你所见,我在input中输入的将会显示在后边echo。这是如何工作的?简单来说,angular的ng-model(更多关于指令的将在文章后续)给我带来了双向绑定机制。
如此是好,但是user.name存储在哪里呢?其存储在我们的$scope上,当我们在input中输入任何字符都会及时的更新scope对象上
的user.name属性。然后我们可以利用angular的表达式{{…}}现实在HTML中。所以当我们在input中输入时,其会及时更新
scope上的user,name属性,在由修改HTML显示。
好吧,这并不难,但是你所说的$scope是个什么东东呢?在angular中$scope是连接controllers(控制器)和templates(模板view/视图)的主要胶合体。我们可以把我们的model存放在scope上,来达到双向你绑定。
这就好比:
这意味着我们我们从template上为$scope设置了一个属性对象user.name,所以我们也可以在controller中访问这个对象(user.name).
让我们来看个更复杂的示例:
var app = angular.module(’app’, );

app.controller(’MainCtrl’, function($scope) {
$scope.message = ’World’;
});
body ng-app=“app“ ng-controller=“MainCtrl“》
Hello, {{ message }}
《/body》
在这里首先我们定义了angular application,只是简单的创建了一个angular module,其接受一个module名字和依赖数组为参数
紧接着创建了一个controller,通过调用 app module的controller方法,并传入一个controller
名字和function。function函数接受$scope参数(可以接受更多的参数,放在后面部分)。所以我们可以开始双向绑定了。
在$scope中我们附加了message的字符串属性。
在view中你可能注意到了body tag多出了一些东东,这是干什么的?这些是angular的指令(directives),它给HTML带来了新的语法扩展,在这例子中我们使用了两个angular内置的指令:
ng-app:它会告诉angularbody节点包含了我们的angular应用,换句话说,在body中的一切会被angular所接受管理。其参数为我们的app module的名字,和我们在javascript中命名一致。
ng-controller:在这指令在我们传入的是controller 名字,此例中为MainCtrl。
最后我们将message插入我们的remplate。
所以其可视化表示将是:
聪明的你可以冒出一个疑问:我们能够在$scope上绑定function?当然。
var app = angular.module(’app’, );

app.controller(’MainCtrl’, function($scope) {
$scope.greet = function() {
$scope.message = “Hello, “ + $scope.user.name;
}
});
《body ng-app=“app“ ng-controller=“MainCtrl“》
What’s your name?:
《input type=“text“ ng-model=“user.name“ /》
《button ng-click=“greet()“》Click here!《/button》
《h3》{{ message }}《/h3》
《/body》
我在示例controller中很容易了解到如何添加function到$scope。示例中function将修改$scope.message为“hello ,”和从input输入的$scope.user.name的字符串连接。
然后在HTML中创建一个附加了angular ng-click 指令的button。ng-click指令是的button在被点击时会执行我们为其赋值的greet()表达式。
注意:在input中enter并不会工作,这是展示ng-click如何工作。
指令
我们已经看见了一些指令了,指令是个什么东东?指令为HTML引入了新的语法。HTML已经很强大了,但是有时我需要更多…
看下面的例子:
《body》
《div id=“chart“》《/div》
《/body》
示例代码在做什么?除了看见id外,我真的什么也不能获知。
然后我们只得从多余30个javascript文件中去查找,最后我们看见如下代码:
$(’#chart’).pieChart({ ... });
Aha!原来是个饼图(pie chart)容器。
在这里如果你不去查找javascript文件将无法获知页面到底是做什么的,实现了什么功能。
下面我们再来看看angular code,
《body》
《pie-chart width=“400“ height=“400“ data=“data“》《/pie-chart》
《/body》
是不是语义很清晰,我们可以一眼看出这是一个pie chart,不仅如此,而且还知道width,height,以及其数据。
如果你对pie chart 示例感兴趣,请猛击这里
angular内置指令
angular给我带来了大量的内置指令。我们已经在前面看见了ng-app,ng-controller,ng-click,ng-model(angular的内置指令都以ng开始),接下来让我了解更多的内置指令。
有时在页面中有部分内容我们只希望到达某状态(属性为true)才显示:
《button ng-click=“show = !show“》Show《/button》

《div ng-show=“show“》
I am only visible when show is true.
《/div》
ng-show仅当angular其表达式值为true时,才显示该元素或子元素。
注意:在这里对于ng-click我们并不是直接在controller中创建function(此刻我们没真正的controller),利用angular表达式作为指令的参数。在首次表达式为undefined,然后我们设置为为true,在false如此交替。
angular同时也提供了ng-hide指令。
让我们看些更有趣的指令,如果有个List或者数组呢?
var app = angular.module(’app’, );

app.controller(’MainCtrl’, function($scope) {
$scope.developers = [
{
name: “Jesus“, country: “Spain“
},
{
name: “Dave“, country: “Canada“
},
{
name: “Wesley“, country: “USA“
},
{
name: “Krzysztof“, country: “Poland“
}
];
});
《body ng-app=“app“ ng-controller=“MainCtrl“》
《ul》
《li ng-repeat=“person in developers“》
{{person.name}} from {{person.country}}
《/li》
《/ul》
《/body》

angular的中文翻译是什么


angular 英[ˈæŋgjələ(r)] 美[ˈæŋɡjəlɚ]
adj. 有角的; 用角测量的,用弧度测量的; 生硬的,笨拙的; (人) 瘦削的;
[例句]He had an angular face with prominent cheekbones.
他的脸棱角分明,颧骨突出。

angular是哪个团队开发的


(1)AngularJS是一个功能强大的基于JavaScript开发框架用于创建富互联网应用
(2)AngulajJS为开发者提供的选项(使用JavaScript)在一个干净的MVC(模型 - 视图 - 控制器)的方式来编写客户端应用程序
(3)AngularJS写的应用都是跨浏览器兼容。AngularJS使用JavaScript代码自动处理适应每种浏览器。
(4)AngularJS是开源的,完全免费的,并且由数千名世界各地的开发者开发维护。它是根据Apache许可证2.0版许可发布。总体来说,AngularJS是一个用来构建大型应用,高性能的Web应用程序的框架,同时使它们易于维护.

angular中的$log与console.log到底有什么区别


区别总结如下:
1.$log会检查浏览器是否支持console.log,这样避免浏览器不支持console.log而报异常。
2.可以开关控制log $logProvider.debugEnabled(false)
3.可以格式化错误信息

免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部