AngularJS——第3章指令

第3章指令所谓指令就是AngularJS自定义的HTML属性或标签,这些指令都是以ng-做为前缀的,例如ng-app.ng-controller.ng-repeat等. 3.1 内置指令 ng-app 指定应用根元素,至少有一个元素指定了此属性. ng-controller 指定控制器 ng-show控制元素是否显示,true显示.false不显示 ng-hide控制元素是否隐藏,true隐藏.false不隐藏 ng-if控制元素是否"存在",true存在.false不存在 ng-…

带你走近AngularJS - 创建自己定义指令

带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍带你走近AngularJS - 体验指令实例带你走近AngularJS - 创建自己定义指令 ------------------------------------------------------------------------------------------------ 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也唯独Ang…

带你走近AngularJS 之创建自定义指令

带你走近AngularJS 之创建自定义指令为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能,并且AngularJS 是目前唯一提供Web应用可复用能力的框架. 目前有很多JavaScript 产品提供插件给Web开发人员.例如, Bootstrap 就是当前比较流行的提供样式和JavaScript插件的前端开发工具包.但是开发人员在使用Booostrap中的插件时, 必须切换到…

AngularJS常用插件与指令收集

angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解使用 AngularJS 开发一个大规模的单页应用 AngularJS常用插件与指令收集 angular-ui帮助文档 UI-Router Angularjs API手册 AngularJS 1.5.8 Developer Guide…

angularjs 创建自定义的指令

创建自定义的指令除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: 你可以通过以下方式来调用指令: 元素名属性类名注释以下实例方式也能输出同样结果: <!DOCTYPE html><html><head&g…

AngularJS:directive自定义的指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script…

AngularJS的表达式、指令的学习（2）

最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expression}},把数据绑定到HTML,其实和与ng-bind是一样的实现,在表达式书写的位置"输出"数据,既可以直接写表达式,而在页面呈现时间就是直接输出的表达式的结果.AngularJS 表达式很像JavaScript表达式:它们可以包含文字.运算符和变量. (1).AngularJS与java…

AngularJS——第9章模块加载

第9章模块加载 AngularJS模块可以在被加载和执行之前对其自身进行配置.我们可以在应用的加载阶段配置不同的逻辑. [AngularJS执行流程] 启动阶段(startup) 开始 --> 浏览器解析DOM树 --> 遇到angular.js停止解析,开始执行脚本 --> Angular监听到DOMContentLoaded事件 --> 启动Angular应用初始化阶段(initial) 启动Angular应用 --> 查找模块依赖 --> 寻找ng-app指令…

AngularJS——第4章数据绑定

第4章数据绑定 AngularJS是以数据做为驱动的MVC框架,所有模型(Model)里的数据经由控制器(Controller)展示到视图(View)中. 所谓数据绑定指的就是将模型(Model)中的数据与相应的视图(View)进行关联,分为单向绑定和双向绑定两种方式. 4.1 单向绑定单向数据绑定是指将模型(Model)数据,按着写好的视图(View)模板生成HTML标签,然后追加到DOM中显示,如之前所学的artTemplate 模板引擎的工作方式. 只能模型(Model)数据向视图(V…

AngularJS——第2章模块化

第2章模块化使用AngularJS构建应用时是以模块化的方式组织的,即将整个应用划分成多个小模块,各个模块有各自的职责,最终实现完整的应用. 2.1 定义应用通过为任一HTML标签添加ng-app属性,可以指定一个应用,表示此标签所包裹的内容都属于应用(App)的一部分. 格式: <html lang="en" ng-app="App"> 2.2 定义模块 AngularJS提供了一个全局对象angular,在此全局对象下存在若干的方法,其中ang…

AngularJS——第5章作用域

第5章作用域通常AngularJS中应用(App)是由若干个视图(View)组合成而成的,而视图(View)又都是HTML元素,并且HTML元素是可以互相嵌套的,另一方面视图都隶属于某个控制器(Controller),进而控制器之间也必然会产生嵌套关系. 每个控制器(Controller)又都对应一个模型(Model)也就是$scope对象,不同层级控制器(Controller)下的$scope便产生了作用域. 5.1 根作用域一个AngularJS的应用(App)在启动时会自动创建一个根…

【AngularJS】—— 8 自定义指令

AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容. 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定下面将会介绍如下的内容: 1 如何自定义指令 2 自定义指令的使用 3 自定义指令的内嵌使用如何自定义指令: Angular是基于模块的框架,因此上来肯定要创建一个自己的模块: var myAppModule = angular.module("myApp",[]); 然后在此模块基础上创建指令d…

7.在AngularJS视图中实现指令

指令扩展了HTML的行为.可以创建自定义的HTML元素,属性和特定于应用程序的类与功能. 1.了解指令指令是AngularJS模板标记和用于支持的JavaScript代码的组合.AngularJS指令标记可以是HTML属性,元素名称,或CSS类. AngularJS编译器遍历DOM的模板并编译所有的指令.通过指令与作用域结合,产生新的实时视图来链接指令. 2.使用内置指令支持AngularJS功能的指令扩展表单元素的指令把作用域绑定到页面元素的指令 2.1.支持AngularJS功能的指…

AngularJS开发之_指令

指令是什么? 指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. 1.指令的匹配模式 index.html : <!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> </head> <body> <h…

AngularJS的directive（指令）配置选项说明

js代码如下: var appModule = angular.module("appModule", []); appModule.controller("Ctrl", ["$scope", "$timeout", function($scope, $timeout) { $scope.naomi = { name: "Naomi", address: "1600 Amphitheatre&qu…

angularjs directive and component 指令与组件 ( 1.5.0 以后 )

之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离还有和controller的沟通. 指令的运行过程基本上我们可以简单的理解为 : template -> compile -> controller -> pre-link -> post-link 我们通常只是用到post link,但如果你的指令有嵌套,子层需要父层的一些值的话,可…

AngularJS——第11章其它

第11章其它 11.1jQuery 在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite,通过angular.element不能选择元素,但可以将一个DOM元素转成jQuery对象,如果引提前引入了jQuery则angular.element则完全等于jQuery. 11.2 bower 基于NodeJS的一个静态资源管理工具,由twitter公司开发维,解决大型网站中静态资源的依赖问题. 依赖NodeJS环境和git工具. npm install -g bowe…

AngularJS——第8章服务

第8章服务服务是一个对象或函数,对外提供特定的功能. 8.1 内建服务 1. $location是对原生Javascript中location对象属性和方法的封装. // $location内置服务 // AngularJS 专门提供了一个帮你获URL地址一个服务 App.controller('DemoController', ['$scope', '$location', function($scope, $location) { $scope.title = '学习$location服…

AngularJS——第7章依赖注入

第7章依赖注入 AngularJS采用模块化的方式组织代码,将一些通用逻辑封装成一个对象或函数,实现最大程度的复用,这导致了使用者和被使用者之间存在依赖关系. 所谓依赖注入是指在运行时自动查找依赖关系,然后将查找到依赖传递给使用者的一种机制. 常见的AngularJS内置服务有$http.$location.$timeout.$rootScope等 7.1 推断式注入没有明确声明依赖,AngularJS会将函数参数名称当成是依赖的名称. 示例 //控制器依赖$http.$rootScope服…

AngularJS——第6章作用域

第6章作用域在AngularJS中使用过滤器格式化展示数据,在"{{}}"中使用"|"来调用过滤器,使用":"传递参数. 6.1 内置过滤器 currency--将数值格式化为货币格式 date--日期格式化,年(y).月(M).日(d).星期(EEEE/EEE).时(H/h).分(m).秒(s).毫秒(.sss),也可以组合到一起使用. filter--在给定数组中选择满足条件的一个子集,并返回一个新数组,其条件可以是一个字符串.对象.函数…

AngularJS——第1章简介

第1章简介由谷歌公司开发维护的前端MVC框架,克服了HTML在构建应用上的诸多不足,降低了开发成本,提高了效率. 一个框架以数据和逻辑作为驱动 AngularJS核心特性:模块化,双数据绑定,语义化标签,依赖注入类似框架:React,Vue,BackBone,KnockoutJS 下载通过AngularJS官网下载,不过优于国内特殊情况,需要FQ 通过npm下载,npm install angular 通过bower下载,bower install angular MVC MVC是一种…

AngularJs 第一个自定义指令编写

公司在做一个OA系统, 包括移动端(从微信企业号进入OA系统),电脑端. 电脑端还是用的传统的easyui做界面,asp.net mvc作为服务端.这个技术已经很成熟了配合权限框架很快就能开发出来.但是手机端之前团队也没有什么经验,我之前做过一个jqureymobile的项目,但是这个框架实在是太卡了,直接pass掉.恰好之前有自学一点点angularjs 所以我就推荐手机端的项目使用angularjs来开发,一来团队可以学习一些新技术跟上潮流,二来单页程序很适合我们目前的这个小项目,三是我们以…