1.controller 只要在一个地方引用就可以了,路由的时候不用指定controller了,在HTML中指定就可以了,否则会初始化两次 2.angular 模块间的服务无层级关系,相互可见.本质是angularjs将所有模块中的所有服务混入了应用级别的单一命名空间里,顒,对应的每个名字只存在唯一的服务.我们利用这点可以在依赖某模块的同事去覆盖此模块提供的服务.     父模块中的服务会覆盖子模块中同名的服务. 3.可以将自定义的东西新建一个模块,依赖ng 然后 在需要使用的地方依赖此模块就可…

现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可重用的Js代码,并共享构建工具.但很多时候我们可能采用别的语言,如ruby/java/scala等,此时前后端代码基本上是完全独立的.虽然大家都在同一个项目中,但可以分成互相独立的两块,并且前后端通常使用不同的构建工具. 比如当后端使用Scala时,我们会使用sbt进行项目构建,对scala代码进行…

第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节:Angular 2.0 从0到1 (五)第六节:Angular 2.0 从0到1 (六)第七节:Angular 2.0 从0到1 (七)第八节:Angular 2.0 从0到1 (八)番外:Angular 2.0 从0到1 Rx-隐藏在Angular 2.x中利剑番外:Angular 2.0 从0到…

[翻译]How do I “think in AngularJS” if I have a jQuery background? 1. 不要先设计页面,然后再使用DOM操作来改变它的展现 在jQuery中,你通常会设计一个页面,然后再给它动态效果.这是因为jQuery的设计就是为了扩充DOM并在这个简单的前提下疯狂的生长的. 但是在AngularJS里,必须从头开始就在头脑中思考架构.必须从你想要完成的功能开始,然后设计应用程序,最后来设计视图,而非“我有这么一个DOM片段,我想让他可以实现XX…

原文来自于:http://www.infoq.com/cn/articles/backbone-vs-angular 将不同的思想和工具进行对比,是一种更好地理解它们的方式.在本文中,我首先将列举在创建web应用程序时需要重复进行的各项任务,随后为你展现Backbone和Angular将如何帮助你完成这些工作. 我们所尝试解决的问题 作为web开发者来说,我们的大部分工作都可以归结于以下的某个类别中: 实现业务逻辑 构建DOM 实现视图逻辑(声明式与命令式) 在模型与视图间进行同步 管理复杂的U…

转自:https://sanwen8.cn/p/2226GkX.html 没有选择是痛苦的,有太多的选择却更加痛苦.而后者正是目前前端领域的真实写照.新的框架层出不穷:它难吗?它写得快吗?可维护性怎样?运行性能如何?社区如何?前景怎样?好就业吗?好招人吗?组建团队容易吗? 每一个框架都得评估数不清的问题,直到耗光你的精力.这种困境,被称为"布利丹的驴子" -- 一只驴子站在两堆看似完全相同的干草堆中间,不知道如何选择,最终饿死了. 当然,那只是一个哲学寓言.现实中,大多数人采用了很简单…

又继续读angular文档,发现自己之前理解还是有误.按官方文档的思路service不是属于component的,是属于module的.module才是负责完整领域逻辑的单位.demo的英雄编辑器给我误导了,好像service是从component里拆出去,属于component一样. 问题提出:svg拆分粒度选择 主要问题就是拆分的粒度问题: 1 1个svg图对应1个ng的component 2 1个svg图对应多个compoent, 如<g>里定义若干元素如node,link各自作为组件n…

没有选择是痛苦的,有太多的选择却更加痛苦.而后者正是目前前端领域的真实写照.新的框架层出不穷: 它难吗?它写得快吗?可维护性怎样?运行性能如何?社区如何?前景怎样?好就业吗?好招人吗?组建团队容易吗? 每一个框架都得评估数不清的问题,直到耗光你的精力.这种困境,被称为“布利丹的驴子” —— 一只 驴子站在两堆看似完全相同的干草堆中间,不知道如何选择,最终饿死了. 当然,那只是一个哲学寓言.现实中,大多数人采用了很简单的策略来破解它:跟风,选择目前最流行的那个.这是一个低成本高收益的策略, 不过也…

没有选择是痛苦的,有太多的选择却更加痛苦.而后者正是目前前端领域的真实写照.新的框架层出不穷:它难吗?它写得快吗?可维护性怎样?运行性能如何?社区如何?前景怎样?好就业吗?好招人吗?组建团队容易吗? 每一个框架都得评估数不清的问题,直到耗光你的精力.这种困境,被称为“布利丹的驴子” —— 一只驴子站在两堆看似完全相同的干草堆中间,不知道如何选择,最终饿死了. 当然,那只是一个哲学寓言.现实中,大多数人采用了很简单的策略来破解它:跟风,选择目前最流行的那个.这是一个低成本高收益的策略,不过也有风险…

jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大多基于jQuery和它的插件.而且现在Angular2的组件生态还不是很完善,我们在编写Angular的时候也许会想要用到jQuery.本篇文章就简单介绍下在Angular2中使用jQuery 如果你不知道怎么搭建Angular2开发环境,请参考我之前写这篇文章:Angular2入门系列教程1-使用…

1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-Seed项目来开发,本文首先分析angular-seed项目的目录结构.以及AngularJS团队为我们做了什么事情,提供了我们真实开发最需要的框架结构. 这个项目仅仅是一个典型的AngularJS网络应用程序的应用程序骨架. 您可以使用它来快速引导您的Angular webapp项目和搭建开发环境.…

本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了ng-conf的组织者. 阐述了TypeScript是JavaScript的超集,并不是另外一种语言. 引用了他的两个朋友最喜欢的TypeScript特性. 由于开场白内容不太重要,所以不再详述.下面开始讲解Dan Wahlin最喜欢的TypeScript的特性. 类型支持(Type Support…

后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有熟悉又陌生,关键是简洁 alertMsgServe.alert(resp.msg); 2. 指令调用 放在页面的顶部 <div class="col-md-12" style="padding:0px;"> <alert-msg alert-messa…

相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就错了. textarea不是不可以的,然后我是这样错的.(就是监听scroll 如果出现了,就增加1rows 的高度)然而这样真的很挫 textarea.bind('change','keydown'){ if(scrollTop > 0 ) { textarea.rows += 1 } } 正确的…

博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] 6.[AngularJS控制器] 7.[AngularJS视图] 8.[AngularJS模型] 9.RESTful服务介绍 10.[AngularJS指令] 11.[AngularJS性能优化] 12.[AngularJS安全相关] 13.[AngularJS项目打包和部署]…

一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格.RESTful风格的设计不仅具有更好的可读性(Human Readable),而且易于做缓存以及服务器扩展(scalability).REST风格体现在URL设计上: 每个URL对应一个资源 对资源的不同操作对应于HTTP的不同方法 资源表现形式(representation)通…

1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并且使程序某一部分的重复利用成为可能.除此之外,此模式通过对复杂度的简化,使程序结构更加直观.软件系统通过对自身基本部分分离的同时也赋予了各个基本部分应有的功能.专业人员可以通过自身的专长分组: 控制器(Controller)- 负责转发请求,对请求进行处理. 视图(View) - 界面设计人员进行图…

1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省很多时间,而且编写代码更加高效.工欲善其事,必先利其器. 支持AngularJS较好的编辑器有以下: Visual Studio Code code.visualstudio.com 特点:免费,支持Windows/Mac/Linux三大平台 Sublime Text3 https://www.su…

一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2.AMD与CMD 在传统的非模块化JavaScript开发中有许多问题:命名冲突.文件依赖.跨环境共享模块.性能优化.职责单一.模块的版本管理.jQuery等前端库层出不穷,前端代码日益膨胀 AMD规范及其代表:RequireJS异步模块定义(Asynchronous Module Definitio…

@(Angular) $compile,在Angular中即"编译"服务,它涉及到Angular应用的"编译"和"链接"两个阶段,根据从DOM树遍历Angular的根节点(ng-app)和已构造完毕的 \$rootScope对象,依次解析根节点后代,根据多种条件查找指令,并完成每个指令相关的操作(如指令的作用域,控制器绑定以及transclude等),最终返回每个指令的链接函数,并将所有指令的链接函数合成为一个处理后的链接函数,返回给Anglua…

接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 视图模型的继承关系 模块和依赖注入的设计 待定 数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="CounterCtrl"> &…

angular做单页面应用是一个比较好的框架,但是它有一定的入门难度,对于新手来说可能会碰到很多坑,也有许多难题,大部分仔细看文档,找社区是能解决的. 但有些问题也许资料比较少,最近遇到过一个要缓存父页面的问题,就是点击进入子页后,再返回时父页面的数据要缓存下来,包括滚动条的位置.再做的过程当中查过 许多资料,都说的不很详细,今天把方法记录下来,供参考. 要想缓存,要用到嵌套路由(ui-router): 有三个嵌套的方法: 使用"点标记法",例如:.state('contacts.li…

文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ago time-1-3:A 使用一键构建工具 (js组件构建) long long ago time-2-1:B 使用工具,long long A ago time-2-2:B 使用兼容工具,long long ago time-2-3:B 使用一键构建工具 (cs样式兼容) 前端正在由蛮荒步入…

ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入angular-resource.min.js文件 2.在模块中依赖ngResourece,在服务中注入$resource var HttpREST = angular.module('HttpREST',['ngResource']); HttpREST.factory('cardResource…

最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供基础功能.在用jQuery操作DOM的时候对Promise的使用欲不够强烈,最近学习node和Angular,需要用js写业务逻辑和数据操作代码的时候这种场景需求就出来了.一般来说事件适合在交互场景中运用,因为用户的行为本来就是分散的,而promise这样的流程控制适合在后台逻辑中处理业务. //j…

上一节我们走通了基本的SPA基础结构,这一节会更彻底的将后端的视图.路由.控制器全部移到前端.篇幅比较长,主要分页面改造.使用AngularUI两大部分以及一些优化路由.使用Angular的其他指令的学习.篇幅虽然长,但熟悉了就是这个套路,特别是第一部分.重点是理解Angular这种操作数据而不是操作Dom的编程方式. 一.移除服务端依赖 上一节中我们还保留了基于jade的layout.为此还保留一个Express的控制器.这一节我们全部在客户端(app_client)实现.先在app_clie…

在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA).这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方式(jade.路由都需要在服务端编译),我们将用Angular在客户端浏览器上跑起来.PS:在正常的开发流程上,我们可能不会在服务器端创建了一个网站,然后又用SPA重建它.但从学习的角度来说这还不错,这样掌握了两种构建方式. 上一节所有Angular相关的代码都在一个js里面,这不便管理和维护,这一…

这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似,但其实Angular定义是MVW框架,W代表(what ever works for you).意味着它可以是控制器或者视图模型,或者服务,就看你怎么定义的.这一节会介绍基本的Angular知识:然后改造我们之前做的页面:并且调用之前的定义的api来获取数据. Angular的数据绑定是指视图的改…

双向绑定是Angular的核心概念之一,它给我们带来了思维方式的转变:不再是DOM驱动,而是以Model为核心,在View中写上声明式标签.然后,Angular就会在后台默默的同步View的变化到Model,并将Model的变化更新到View. 双向绑定带来了很大的好处,但是它需要在后台保持一只“眼睛”,随时观察所有绑定值的改变,这就是Angular 1.x中“性能杀手”的“脏检查机制”($digest).可以推论:如果有太多“眼睛”,就会产生性能问题.在讨论优化Angular的性能之前,笔者希…

最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了“用户引导”功能,对于初次进入系统的用户一些简单的使用培训training.对于大多数网站来说,这是一个很常见的功能.所以在开发这个任务之前,博主尝试将其抽象化,独立于现有系统的业务逻辑,将其封装为一个通用的插件,使得代码更容易扩展和维护. 无图无真相,先上图: 关于这款trainning插件的使用很简单,它采用了类似Angular路由一样的配置,只需要简单的配置其每一步training信息. title:step的…