AngularJs学习笔记-慕课网AngularJS实战

第1章快速上手放弃了IE8以及以下,不支持. 4大核心特性: 1.MVC Model: 数据模型 View:视图 Controller:业务逻辑和控制逻辑好处:职责清晰,模块化. 2.模块化 3.指令系统 (AngularJs特有的) 4.双向数据绑定(AngularJs特有的) 开发工具: webstorm最强大,占用资源比较多.轻量级:sublime. 调试工具:chrome插件batarang, 它是专门针对angularJS的. 版本管理工具: git小乌龟基于nodejs的开发…

《AngularJs实战》学习笔记(慕课网)

1. Controller使用过程中的注意点不要试图去复用Controller, 一个控制器一般只负责一小块视图不要在Controller中操作DOM, 这不是控制器的职责. 封装在指令里. 不要在Controller中做数据格式化, ng有很好用的表单控件不要在Controller里面做数据过滤操作, ng有$filter服务一般来说, Controller是不会互相调用的, 控制器之间的交互会通过事件进行 ---> 这是强耦合 2. <html ng-app> <!-…

AngularJs学习笔记--unit-testing

原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编译器几乎不能给开发者提供任何帮助.因为这个原因,我们感受到编写任何javascript代码都必须有一套强大完整的测试.angular拥有许多功能,让我们更加容易地测试我们的应用.我们应该没有借口不去写测试(这个嘛……). 一. It is all about NOT mixing concerns(…

AngularJs学习笔记--Forms

原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单)是这些控件的集合,目的是将相关的控件进行分组. 表单和控件提供了验证服务,所以用户可以收到无效输入的提示.这提供了更好的用户体验,因为用户可以立即获取到反馈,知道如何修正错误.请记住,虽然客户端验证在提供良好的用户体验中扮演重要的角色,但是它可以很简单地被绕过,因此,客户端验证是不可信的.服务端验证…

AngularJs学习笔记--expression

原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定区域中(如{{expression}}).表达式通过$parse服务(http://code.angularjs.org/1.0.2/docs/api/ng.$parse)解析执行. 例如,以下是angular中有效的表达式: 1+2 3*10 | currency user.name 一.Angu…

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc…

AngularJs学习笔记--Guide教程系列文章索引

在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看不懂,希望大家在参观的过程中指出其中的错误).经过1个多月断断续续的努力,终于把Guide里面的文章基本上都弄出来.Guide中的部分章节,由于重复的部分似乎有点多,而且篇幅较短,这里就没有列出来. 文章列表如下: AngularJs学习笔记--bootstrap AngularJs学习笔记--ht…

AngularJs学习笔记--bootstrap

AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化. 二.Angular <script> 标签本例用于展示如何通过推荐的路径整合Angular,实现自动初始化. <!doctype html> <html xmlns:ng=&…

AngularJs学习笔记--html compiler

原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自定义新的HTML语法.compiler允许我们对任意HTML元素或属性,甚至是新的HTML标签.属性(如<beautiful girl=”cf”></beautiful >)附加行为.Angular将这些附加行为称为directives. HTML有很多专门格式化静态文档的预定义HTM…

AngularJs学习笔记--concepts(概念)

原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括本文主要是angular组件(components)的概览,并说明他们如何工作.列表如下: statup - 依旧是hello world...改为Hello Kitty! runtime - 介绍angular的runtime scope - view与contorller的纽带(神马glue...胶) controller - app的行为(applicati…

AngularJs学习笔记--Using $location

原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $location服务分析浏览器地址栏中的URL(基于window.location),让我们可以在应用中较为方便地使用URL里面的东东.在地址栏中更改URL,会响应到$location服务中,而在$location中修改URL,也会响应到地址栏中. $location服务: 暴露当前浏览器地址栏的URL,…

AngularJs学习笔记--Managing Service Dependencies

原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他service声明为依赖,使用在自身实例化时使用的构造函数中. 为了声明依赖,我们需要在工厂方法声明中指定它们,并且在工厂方法中通过$inject属性(字符串标识数组)或者使用array notation. 通常$inject属性声明可以被丢弃(即http://www.cnblogs.com/lcllao…

AngularJs学习笔记--Injecting Services Into Controllers

原版地址:http://docs.angularjs.org/guide/dev_guide.services.injecting_controllers 把service当作被依赖的资源加载到controller中的方法,与加载到其他服务中的方法很相似. 由于javascript是一个动态语言,DI不能弄明白应该通过static types(like in static typed languages)注入哪一个service.因此,我们需要通过$inject属性指定service名称, 它是…

AngularJs学习笔记--Creating Services

原版地址:http://docs.angularjs.org/guide/dev_guide.services.creating_services 虽然angular提供许多有用的service,在一些特别的应用中,我们会发现编写自定义service是很有用的.如果我们想做这件事,我们首先要在module中注册一个service工厂方法,可以通过Module.factory api(http://docs.angularjs.org/api/angular.module)或者在module配置方…

AngularJs学习笔记--I18n/L10n

原版地址:http://code.angularjs.org/1.0.2/docs/guide/i18n 一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国际化(Internationalization),简称I18n,是让产品开发在一个他们可以简单地对产品进行语言.文化的本地化的方法的规范.本地化(Localization),简称L10n,一个使得应用.文本有适应特殊的文化或者语言市场的能力的规范.对于应用开发者,使一个程序国际化,意味着需要从程序中…

AngularJs学习笔记--IE Compatibility 兼容老版本IE

原版地址:http://docs.angularjs.org/guide/ie Internet Explorer Compatibility 一.总括这文章描述Internet Explorer(IE)处理自定义HTML属性.标签的特性(可以理解为“特别糟糕的性质”).如果我们打算让应用兼容IE8以及以下的版本,那么可以继续往下看. 二.Short Version(简述) 为了让我们的angular应用在IE上工作,请确保: 1. 按需引入JSON.stringify(IE7或以下的都需要这…

AngularJs学习笔记--Modules

原版地址:http://code.angularjs.org/1.0.2/docs/guide/module 一.什么是Module? 很多应用都有一个用于初始化.加载(wires是这个意思吗?)和启动应用的main方法.angular应用不需要main方法,作为替代,module提供有指定目的的声明式,描述应用如何启动.这样做有几项优点: 这过程是声明描述的,更加容易读懂. 在单元测试中,不需要加载所有module,这对写单元测试很有帮助. 额外的module可以被加载到情景测试中,可以覆盖一…

AngularJs学习笔记--Scope

原版地址:http://code.angularjs.org/1.0.2/docs/guide/scope 一.什么是Scope? scope(http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope)是一个指向应用model的object.它也是expression(http://www.cnblogs.com/lcllao/archive/2012/09/16/2687162.html)的执行上下文.scope被放置于一个类似应…

AngularJs学习笔记--Dependency Injection（DI，依赖注入）

原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理代码如何得到它所依赖的资源. 关于DI更深层次的讨论,可以参观Dependency Injection(http://en.wikipedia.org/wiki/Dependency_injection),Inversion of Control(http://martinfowler.com/ar…

AngularJs学习笔记--Understanding the Model Component

原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular文档讨论的上下文中,术语“model”可以适用于单一对象代表一个实体(例如,一个叫” phones”的model,它的值是一个电话数组.)或者作为应用的全部数据Model(所有实体). 在angular中,model可以是任意数据,可以通过angular的scope对象的属性来获取model.属性的名称是model的标识,值可以是任意jav…

AngularJs学习笔记--Understanding the Controller Component

原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javascript 函数(type/class),被用作扩展除了root scope在外的angular scope(http://www.cnblogs.com/lcllao/archive/2012/09/23/2698651.html)的实例.当我们或者angular通过scope.$new API(h…

AngularJs学习笔记--E2E Testing

原版地址:http://docs.angularjs.org/guide/dev_guide.e2e-testing 当一个应用的复杂度.大小在增加时,使得依靠人工去测试新特性的可靠性.抓Bug和回归测试是不切实际的. 为了解决这个问题,我们建立了Angular Scenario Runner,模仿用户的操作,帮助我们去验证angular应用的健壮性. 一. 总括我们可以在javascript中写情景测试(scenario test),描述我们的应用发生的行为,在某个状态下给与某些互动.一…

AngularJs学习笔记--Understanding Angular Templates

原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与model.controller的信息一起,渲染成用户在浏览器中所看到的视图.它是静态的DOM,包括HTML.CSS.angular特别的元素和angular指定的元素属性.angular元素和属性指示angular去扩展行为以及将template DOM转换为动态视图的DOM. 下面是我们可以在templ…

AngularJS学习笔记2——AngularJS的初始化

本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> </body> </html…

【AngularJS学习笔记】01 指令、服务和过滤器

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码var app = angular.module('名字', []); ng-init 指令初始化应用程序数据. 这个在之前已经说过了,下面讲一下之前没讲到的. ng-repeat指令与ng-options指令  <div ng…

AngularJS学习笔记二:AngularJS指令

AngularJS 指令: AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用指令: ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把应用程序数据绑定到 HTML 元素. ng-repeat 指令对于集合中(数组中)的每个项会克隆一次 HTML 元素. 1. ng-app 指令 ng-app 指令定义了 AngularJ…

AngularJS学习笔记一:简单入门

阿里云网站的前端是AngularJS实现的. 先下载AngularJS的开发工具包,我下载的angular-1.4.0. 在合适位置引入js文件: <script src="angular-1.4.0/angular.min.js"></script> 1. AngularJS 入门指令: ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序的"所有者". ng-model 指令把输入域的…

AngularJS学习笔记5

11.AngularJS HTML DOM ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. <button ng-disabled="mySwitch">点我!</button> ng-show 指令隐藏或显示一个 HTML 元素. <div ng-app=""> <p ng-show="true">我是可见的.</p> <p ng-s…

AngularJS学习笔记4

9.AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. <div ng-app="myApp" ng-controller="customersCtrl"> <ul> <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li> </ul>…

Angularjs学习---官方phonecat实例学习angularjs step0 step1

接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载angular-phonecat 使用git clone phonecat: git clone --depth= https://github.com/angular/angular-phonecat.git 可以把--depth=14去掉,这里是拉最新的14个commit. The --dept…

【AngularJs学习笔记-慕课网AngularJS实战】的更多相关文章