目录: AngularJS 系列 01 - HelloWorld和数据绑定 AngularJS 系列 02 - 模块 (持续更新)…

目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. AngularJS中的数据绑定 3. 简单的数据绑定 4. 数据绑定的最佳实践 1. Hello World 写一个Hello World的应用是咱们接触任何一个语言的基本途径,AngularJS也是如此. 随着学习的深入,我们会逐渐深入到AngularJS的内部原理中,现在,废话不多说,开始咱们的Hello World. 这里我使用…

引导目录: AngularJS 系列 学习笔记 目录篇 前言: 其实,在上篇文章介绍数据绑定的时候,我们的HelloWorld的代码案例中就已经使用了模块(module).哈哈. 本篇就着重介绍一下angular.module()的使用. 本篇目录: 1. 为什么需要模块 2. 什么是AngularJS的模块 3. 参数 1. 为什么需要模块 在JavaScript中,将所有的函数代码全部都定义在全局空间中绝对不是一个好的选择. 暂且不说变量作用域冲突 全局变量污染怎么破,你调试的时候是不是得浪…

AngularJS深入的系列就是这九篇博客了,把我以前在项目中应用到的和自己学习的都总结在了里面.为了更方便的看,把我写的AngularJS系列的博客都列到下面.之后就开始学习ionic:html5移动开发框架,它是基于AngularJS的移动开发框架.希望大家多多关注我的博客,多多推荐. AngularJS之站在jQuery的肩膀上: http://www.cnblogs.com/xuema/p/4335180.html AngularJS应用开发思维之1:声明式界面  http://www.…

写在前面 这个系列是来这家公司到现在,边用边学,以及在工作中遇到的问题进行的总结.深入的东西不多,大多是实际开发中用到的东西. 这里做一个目录,方便查看. 系列文章 [Angularjs]ng-select和ng-options [Angularjs]ng-show和ng-hide [Angularjs]视图和路由(一) [Angularjs]视图和路由(二) [Angularjs]视图和路由(三) [Angularjs]视图和路由(四) [Angularjs]ng-class,ng-class…

公司之前一直用的Web前台框架是Knockout,我们通常直接叫ko,有看过汤姆大叔的KO系列,也有在用,发现有时候用得不太顺手.本人是会WPF的,所以MVVM也是比较熟悉的,学ko也是很快就把汤姆大叔的文章系列看完了,但是ko有时候会有意想不到的问题,同事也有这样的反应,所以就度娘了一下.就找到了AngularJS和KO的对比文章<從Knockout到AngularJS>,看了之后不明觉厉.其实早在AngularJS刚刚问世的那年,因为我订阅了博友--梦想天空(山边小溪)的博客(这里得特别感…

目录 基本验证 验证插件messages 自定义验证 基本验证 <form name="form" novalidate ng-app> <span>{{form.$invalid}}</span> <span>{{form.$valid}}</span> <span>{{form.$dirty}}</span> <span>{{form.$pristine}}</span> &…

目录 $http ngResource $http几乎是所有ng开发中,都会用到的服务.本节将重点说下$http 与 ngResource $http 使用:$http(config); 参数: method:字符串,请求方法. url:字符串,请求地址. params:字符串或者对象,将使用paramserializer序列化并且作为GET请求的参数. data:字符串或者对象,作为请求信息数据的数据. headers:对象,字符串或者函数返回表示发送到服务器的HTTP请求头.如果函数的返回值…

来源:http://hellobug.github.io/blog/angularjs-providers/ 用AngularJS做项目,但凡用过什么service啊,factory啊,provider啊,开始的时候晕没晕?!晕没晕?!感觉干的事儿都差不多啊,到底用哪个啊?!别告诉我你们几个就是为了跟我炫耀兄弟多!! 好吧...也许是我的问题,脑仁儿确实不够大,反正我是晕的直挠墙~ 那到底什么时候该请他们谁出场啊? 经过挠墙之后挠官网文档挠google挠源码挠例子试验,终于让我把他们的区别给挠出…

目录 API概览 使用Angular.UI.Bootstrap 自定义指令 scope link 我的指令 angular中的指令可谓是最复杂的一块 但是我们的上传组件就能这么写 效果图: API概览 先上一段伪代码: angular.module('moduleName', []).directive( 'namespaceDirectiveName', [ function() { return { restrict : '',// 描述指令在模版中的使用方式,包括元素E,属性A,CSS样式…

目录 原理 angular-route ui-router 事件 深度路由 原理 ng的route本质是监听hashchange事件. 在angular-route中 $rootScope.$on('$locationChangeStart', prepareRoute); $rootScope.$on('$locationChangeSuccess', commitRoute); 在ui-router中 listener = listener || $rootScope.$on('$locat…

目录 什么是AngularJS? 为什么使用/ng特性 Hello World 内置指令 内置过滤器 模块化开发 一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样,但是1.x还是足够优秀. 什么是AngularJS? ng是一个js框架,目前最新版本为1.5.8. 官网:https://angularjs.org/ 下载: Install-Package AngularJS.Core npm install angular@1.5.8 为什么使用/ng特性…

一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristine 字段是否 未更改 formName.inputField.$dirty 字段是否 更改 formName.inputField.$valid 字段 有效 formName.inputField.$invalid 字段 无效 formName.inputField.$error 字段 错误信息 问题…

用AngularJS做项目,但凡用过什么service啊,factory啊,provider啊,开始的时候晕没晕?!晕没晕?!感觉干的事儿都差不多啊,到底用哪个啊?!别告诉我你们几个就是为了跟我炫耀兄弟多!! 好吧...也许是我的问题,脑仁儿确实不够大,反正我是晕的直挠墙~ 那到底什么时候该请他们谁出场啊? 经过挠墙之后挠官网文档挠google挠源码挠例子试验,终于让我把他们的区别给挠出来了!(得意的笑--) 首先,provider, value, constant, service, fact…

在视图模板中使用过滤器 过滤器也是一种服务,负责对输入的内容进行处理转换,以便更好地向用户显示. 过滤器可以在模板中的{{}}标记中使用: {{ expression | filter:arg1:arg2}} 预置的过滤器 AngularJS的ng模块实现了一些预置的过滤器,如:currency.number等等,可以直接 使用.例如下面的示例将对数字12使用currency过滤器,结果将是"$12.00": {{12|currency}} 带参数的过滤器 过滤器也可以有参数,例如下面…

----------------------------------------------------------------------------------- 原文:https://www.sitepoint.com/practical-guide-angularjs-directives/ A practical guide to angularJS directives. Directives are the most important components of any Angu…

原文: http://www.cnblogs.com/whitewolf/p/3493362.html 这篇国外的文章也非常好: http://codetunnel.io/angularjs-controller-as-or-scope/ 有些人觉得即使这样我们的controller还是不够POJO,以及对于coffescript爱好者不足够友好,所以在angular在1.2给我带来了一个新的语法糖这就是本文将要说的controller as的语法糖,修改上面的demo将会变成: 1 2 3 4…

参考:http://viralpatel.net/blogs/angularjs-service-factory-tutorial/ https://www.pluralsight.com/blog/tutorials/angularjs-step-by-step-services 想法:定义一个 angular module 之后呢, 在许多的 controller 中会有一些公共的函数,或者是说在很多controller 中都要使用到的共同的方法,类似的逻辑其实是可以提取出来,进行封装. 这…

参考:https://github.com/angular/angular.js/wiki/Understanding-Directives Injecting, Compiling, and Linking functions When you create a directive, there are essentially up to 3 function layers for you to define[1]: myApp.directive('uiJq', function Injec…

angularJS 中 $scope 的原型 和 原型继承之间的细微差别是什么? 参考:http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs The API Reference Scope page says: A scope can inherit from a parent scope. The Dev…

第一部分关于js中的异步编程 异步编程简单的说就是你写了一段代码,但他不会按照你书写代码的顺序立即执行,而是等到程序中发生了某个事件(如用户点击了某个按钮,某个ajax请求得到了响应)才去执行这段代码,而且这段代码可能执行一次(如一个ajax请求得到了响应).也可能执行很多次或者不执行(一个按钮被点击了许多次或者0次)这就是所谓的异步编程. 有两种异步程序模式单次执行模式和监听执行模式.像ajax请求这样的就是属于单次执行模式,请求.回调只会进行一次.像事件绑定就属于监听执行模式,只要事件发生回…

AngularJs有自己的HTML事件 ng-click指令 ng-click指令定义了AngularJs点击事件 当点击按钮的时候,赋值count变量并且给count变量加1,显示出count变量 <body> <div ng-app="Home"> <div ng-controller="ngClickTest"> 测试ng-click指令 <button ng-click="count=count+1&quo…

AngularJs为HTML DOM元素的属性提供了绑定数据的指令 ng-disabled指令 ng-disabled指令直接绑定数据到HTML元素的disabled属性 ng-show指令 ng-show指令隐藏和显示一个HTML元素 ng-hide指令与ng-show相反 <div ng-app="Home"> <div ng-controller="ngDisabledTest"> 测试ng-disabled指令 <button…

AngularJs中你可以使用自己的服务或使用内建服务,服务是一个函数或对象,以下代码试验$location服务,$http服务,$timeout服务,$intverval服务,创建自定义服务 <body> <div ng-app="Home"> <div ng-controller="Index"> 显示当前url <p>{{myUrl}}</p> </div> <div ng-cont…

Scope作用域 Scope作用域是应用在HTML视图和Js控制器之间的纽带 Scope是一个对象,有可用的属性和方法 根作用域 所有的应用都有一个$rootScope,它可以作用在ng-app指令包含的所有的html元素中 $rootScope是各个controller中scope的桥梁,用rootscope定义的值可以在各个控制器中使用 AngularJs控制器 AngularJs控制器控制AngularJs的数据 控制器的方法 AngularJs控制器通过$scope来分配变量,也可以使用…

ng-model指令 ng-model可以将输入域的值与AngularJs的变量绑定 双向绑定 当修改输入域的值时候,AngularJs属性的值也将修改 <div ng-app="Home"> 姓名:<input type="text" ng-model="name"/> <p>{{name}}</p> </div> 验证用户输入 以下提示信息将在ng-show属性返回true的情况下显…

Angularjs通过新的属性和表达式扩展了html Andularjs 可以构建一个单一页面的应用程序(SPAS SinglePageApplications) Angularjs通过指令扩展了html,通过表达式绑定数据到html ng-app指令定义Angularjs的应用程序 ng-model指令绑定元素值到应用程序 ng-bind指令把应用程序数据绑定到html视图 <div ng-app=""> <input type="text" n…

In AngularJS 1.3+, there is One-time binding built-in: The main purpose of one-time binding expression is to provide a way to create a binding that gets deregistered and frees up resources once the binding is stabilized. Reducing the number of expres…

目录 使用promise 补充说明 $q.all $q.when 在上节中,我们在http中使用了then 和 在ngResource中返回了一个'延迟对象'. 本节介绍一下angular中的promise. 我觉得可以把js中的promise比作c#中的Task 的await 以同步的时候 实现回调. 使用promise 我们先可以了解一下$q的defer()方法创建的对象具有哪些方法 resolve(value):用来执行deferred promise,value可以为字符串,对象等. r…

目录 CSS定义 JS定义 ng动画实际帮我们在状态切换的时候 添加特定的样式 从而实现动画效果. 一般我们会通过C3来实现具体的动画. CSS定义 ng-if 图(实际上,图并不能展现出什么): HTML <body ng-app="myApp"> <button ng-click="show=!show">Toggle</button> <div ng-if="show" class="fa…