require参数的值可以用下面的前缀进行修饰,这会改变查找控制器时的行为:?如果在当前指令中没有找到所需要的控制器,会将null作为传给link函数的第四个参数.^如果添加了^前缀,指令会在上游的指令链中查找require参数所指定的控制器.?^将前面两个选项的行为组合起来,我们可选择地加载需要的指令并在父指令链中进行查找.没有前缀如果没有前缀,指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器(或具有指定名字的指令)就抛出一个错误. 在自定义Angular指令时. 举个简单的例子…

app //应用入口 directive //自定义指令 require-main //require的主配置文件  存放公共调用的js service //请求后端数据公有类 controllers所有ctrl文件 |--fun //存放公有ctrl 例如上传逻辑ctrl require-main.js requirejs.config({ baseUrl: '/', paths: { 'jquery': '/lib/jquery/1.9.1/jquery.min', 'angular': '…

前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务端同学那里修改代码,维护成本高,卖力不讨好＝＝ 工作了这么久,深深的感受到了那句名言的魅力,时间就是金钱呀!后来我发现,现在的web开发,谁还用这种低级的方法,大家都已经开始搞前后端分离了! 前后端分离的目的和作用 要弄清前后端分离的目的和作用,首先要知道什么是前后端分离. 现在的web前端越来越偏…

心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs+angular+angular-route(+zepto) 最后这个zepto可有可无,主要是给团队中实…

direictives/index.js: module.exports = function(ngModule) { //register all the directives here require('./hello')(ngModule); }; directives/hello.js module.exports = function(ngModule) { ngModule.directive('webHello', function() { return { restrict: '…

说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的模块化,模块间低耦合高内聚,目的就为了团队合作效率: 可扩展性.这个不用说了. 学习成本.一个框架再好,团队新成员难以掌握,学习难度大,结果很容易造成代码混乱. 而根据实际经验来看,方便是必然首要地位,除此之外,应该是代码管理了.团队合作过程中,各种协作,代码冲突等等,都会给一个优秀框架带来各种奇怪…

2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所以干脆就不写.现在我觉得这样想是不对的,每个人都有一个成长的过程,从学徒到能独立完成任务,再到师傅,再到专家.我想记录这个过程,并且通过写博客养成总结的好习惯,构建自己的知识体系,同时锻炼自己的写作能力. 真正接触编程是在大一下学期(2010年初)学的C语言,而接触前端则是在大一结束后的暑假(201…

接上篇,angular 实战部分,angular比较适合spa项目,这里不借助任何seed和构建工具,直接从零搭建,基本的angular项目结构大致包含如下几个部分: 1)app.js 入口 2)index.html html框架页 3)lib(vendor)第三方类库 4)components 业务组件 5)styles/images 静态资源部分 1.常规实现 创建文件夹demo1,按照上述结构分别创建app.js ,index.html文件,创建lib.components.styles和…

requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs+angular+angular-route(+zepto) 最后这个zepto可有可无…

总所周知,在前端开发中,大家用的比较多的框架就是angular,vue,react等,今天就为大家讲一下angular大家框架的原理及运用 1.本次所举的例子是以依赖require.js的, <script src="js/libs/require-2.3.3.min.js" data-main="main" charset="utf-8"></script> <script> document.documen…

一.安装gulp(已经安装了node环境) npm  install -g gulp 二.在package.json文件中配置依赖插件 { "name": "xxxx", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "devD…

用一周多的时间做了一个简易的wap站 之前研究过webpack但是一直没用过,这次公司要做一个h5网站,正好拿来练练手,话说angular1x对移动端不是很友好,但主要是angular1x比较熟悉,上手快,开发也快,就没去考虑其他前端mvc框架. 好了webpack出了中文版以后,对于我们这些英语不是很好的来说真的是太棒了,话说angularjs啥时候也出个中文文档就更好了,webpack官网:https://doc.webpack-china.org/ 右上角可以选择语言. 开始之前先看一下目…

var angular = require('angular'); module.exports = angular.module('app.mymodule2', []).controller('HWController', ['$scope', function ($scope) { $scope.message = "This is HWController"; }]).name; var angular=require('angular'); module.exports =…

在thinphp5中发现一个好用的模版引擎—think-angular, 此模板引擎主要特点是 不需要额外的标签定义, 全部使用属性定义, 写好的模板文件在IDE格式化代码的时候很整洁, 因为套完的模板文件还是规范的html, 注: 一个标签上可以使用多个模板指令, 指令有前后顺序要求, 所以要注意指令的顺序, 项目地址:https://github.com/top-think/think-angular 文档地址:https://www.kancloud.cn/shuai/php-angula…

首先要了解什么是karma,karma干嘛用的,它的好朋友jasmine又是啥?这些文章可以帮助你: karma干嘛的? angular与karma1 angular与karma2 看了以上几篇文章之后,我们基本上就可以启动我们最简单的一个karma测试例子了.然后我们还要有webpack对吧: karma-webpack插件 这些都配置好,我们的karma配置文件就成了这个样子: // Karma configuration // Generated on Sun Dec 04 2016 19…

ngVerify v1.5.0 a easy Angular Form Validation plugin.简洁高效的__angular表单验证插件__ See how powerful it.看看它有多强大 动态校验 自动关联提交按钮 多种 tip 校验消息提示 不只校验 dom 元素值,还可以校验 ngModel 数据模型 支持任意类型表单元素,甚至可以校验非表单元素 提供 type 类型校验模板,你几乎不需要定校验规则 提供自定义规则 支持第三方组件校验 Show HOME - 首页 DE…

新官网 请不要无视这里,这里都是链接,可以点的 OniUI组件库 学习教程 视频教程: 地址1 地址2 关于AvalonJs 开始的例子 扫描 视图模型 数据模型 绑定 作用域绑定(ms-controller, ms-important) 忽略扫描绑定(ms-skip) 模板绑定(ms-include) 数据填充(ms-text, ms-html) 类名切换(ms-class, ms-hover, ms-active) 事件绑定(ms-on,--) 显示绑定(ms-visible) 插入绑定(m…

avalon经过几年以后,已成为国内一个举足轻重的框架.它提供了多种不同的版本,满足不同人群的需要.比如avalon.js支持IE6等老旧浏览器,让许多靠政府项目或对兼容性要求够高的公司也能享受MVVM的乐趣.avalon.modern.js支持IE10以上版本,优先使用新API,性能更优,体积更少.avalon.mobile.js在avalon.modern的基础提供了触屏事件的支持,满足大家在移动开发的需求.此外,它们分别存在avalon.xxx.shim版本,指无自带加载器版,avalon…

迷你MVVM框架 avalonjs1.5 入门教程 avalon经过几年以后,已成为国内一个举足轻重的框架.它提供了多种不同的版本,满足不同人群的需要.比如avalon.js支持IE6等老旧浏览器,让许多靠政府项目或对兼容性要求够高的公司也能享受MVVM的乐趣.avalon.modern.js支持IE10以上版本,优先使用新API,性能更优,体积更少.avalon.mobile.js在avalon.modern的基础提供了触屏事件的支持,满足大家在移动开发的需求.此外,它们分别存在avalon.…

Angularjs架构搭建      1.搭建Angularjs项目           1)在package.json中配置如下,然后 npm install下载包     {   "name": "angularjst",   "version": "1.0.0",   "description": "轮子",   "author": "Dengwh&q…

环境 windows 10 准备工具 Visual Studio Code Node.js Git 需求 必须支持IE8 步骤开始: 执行命令行工具 mkdir Demo && cd Demo npm init name: demo version:0.0.1 description:This is a demo. entry point:[Enter] test command:[Enter] git repository:[Enter] keywords:[Enter] author:…

之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载的资料.方案如下: 项目的主结构如下图: 1.index.html是最外层的页面,页面代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">…

[AngularJS] 使用AngularAMD动态加载Controller 前言 使用AngularJS来开发Single Page Application(SPA)的时候,可以选用AngularUI Router来提供页面内容切换的功能.但是在UI Router的使用情景里,需要开发人员将每个State所使用的Controller预先加载之后,才能正常的切换页面内容.这也就代表开发人员所建立的SPA,必须要在启动的当下,就先将整个SPA所用到的Controller都预先加载到浏览器之中.而这…

注:本文内容比较基础,供初学者快速入门参考. 更多详细信息请参考官方文档. 本文同步发布于我的博客,欢迎关注^_^ 1. 安装 npm install -g webpack 2. 基本使用 假设项目文件结构如下: /app |--index.html |--main.js |--mymodule.js index.html代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q…

首先认识requirejs requirejs是个包加载器,核心功能是模块化管理,可以实现按需加载. 重点是明白 模块化不是按需加载. 模块化的意义: 是通过代码逻辑表明模块之间的依赖关系和执行顺序,按照模块逻辑来分解代码,起到配合mvc框架架构项目的作用. 按需加载:顾名思义 根据需要 通过模块依赖  event事件  加载所需的模块. 因为做的本地混合应用,在我项目中的主要的作用是模块化,我使用requirejs的原因是模块化管理,不是按需加载. backbone 配合 requirejs…

RequireJS 优化 Web 应用: http://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/ 1.模块之间的依赖关系 2.如何配置requirejs RequireJS 快速入门 http://www.cnblogs.com/yexiaochai/p/3214926.html http://blog.csdn.net/joyhen/article/details/21166757 http://www.cnblogs.c…

avalon2的循环指令的用法完全改变了.avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环.它们都是针对元素内容进行循环.后来又从angular那里抄来了ms-repeat, 这是循环元素内部的. 到avalon2,这三个指令合并成一个ms-for指令 ,用法与angular更相似,但没有$index, $last, $first, $middle. 如果想得到数组元素或对象的键值,在in关键字前指定一个新变量 <div ms-for="…

1. Css We’ll use LESS CSS, all less sources are defined in the app/assets, and they will be compiled to standard css by the build process. Below are steps to use the less css. a.   add sbt-less plugin to your project’s plugins.sbt addSbtPlugin("com.t…

translate 的用法 1.在html页面:文本的翻译 <h1 translate>hello world</h1> <h1 translate = 'hello world '></h1> <h1> 'hello world '|translate </h1> 2. placeholder= {{var|translate}} aria-label={{var|translate}} tooltip = {{var|transl…

http://www.startersquad.com/blog/AngularJS-requirejs/ While delivering software projects for startups, we’ve come to love angularjs. We’ve also come to struggle with clean modularity, both the parts that Angular does really well, and the parts that a…