【angular】学习AngularJS 笔记(慕课网)【01】
来源:互联网 发布:centos 系统时间不对 编辑:程序博客网 时间:2024/05/17 04:20
学习AngularJS 笔记
angularJS 四大核心特性:
- MVC
- 模块化
- 指令系统
- 双向数据绑定
问: 为什么23种设计模式中没有MVC
开发、调试、测试工具
需要自动化、工业化的开发环境:
代码编辑工具:sublime (支持Zencoding) / webstorm;
断点调试工具:chrome插件batarang 针对angularJS;
版本管理工具:git git小乌龟;
代码合并和混淆工具:nodeJS; npm nodejs下的自动化管理工具;GRUNT ;
依赖管理工具:bower 自动安装依赖组件;
轻量级Server:httpServer
单元测试工具:runner– karma / jasmine (分组、用例、期望、匹配);
集成测试工具:Protractor 专为AngularJS定制
2、AngularJs 基本概念
2.1、MVC
为什么需要MVC
- 代码越来越多,切分职责;
- 为了复用;
- 为了后期维护方便;
目的:模块化和复用
前端MVC困难
- 操作DOM的代码必须等待整个页面全部加载完成;
- 多个JS文件如果出现相互依赖,程序员必须自己解决;
- JS的原型继承也给前端编程带来了很多困难;
AngularJS实现MVC如下
AngluarJs中的Controller
ng-controller=”控制器名”
Controller使用过程中的注意点:
1.不要试图去复用Controller,一个控制器一般只负责一小块视图,通用的东西用service 来调用,不推荐使用通用控制器,是个错误;
2.不要在Controller中操作DOM,这不是控制器的职责,封装在指令里面。
3.不要在Controller里面做数据格式化,ng有很好用的表单控件。
4.不要在Controller里面做数据过滤操作,ng有$filter服务。
5.一般来说,Controller是不会互相调用的,降低耦合度,控制器之间的交互会通过事件进行。
视图->控制器 -> 模型 <-控制器<-视图
Model 如何复用
{{取值绑定ng-model}}<input ng-model="greeting.text"/><p>{{greeting.text}},Angular</p>//加载页面后先启动ng,找到ng-app找其下面的ng-model,绑定标签
View如何复用
利用Directive实现
AngularJS全部借助于$scope作用于来实现的MVC;作用于存在一个层级结构,如果找不到属性,会一直查找直到根作用于;$scope有事件机制;是整个AngularJS的基础,首先会创建rootScope;$scope是一个POJO(Plain Old JavaScript Object)$scope提供了一些工具方法$watch()/$apply()$scope是表达式的执行环境(或者叫作用域)$scope是一个树型结构,域DOM标签平行子$scope对象会继承$scope上的属性和方法$scope可以传播事件,类似DOM事件,可以向上也可以向下$scope不仅是MVC的基础,也是后面实现双向数据绑定的基础可以用angular.element($0).scope()进行调试(或 火狐的插件 Inspect Angular Scope)$scope的生命周期:Creation->Watcher registration->Model mutation->Mutation observation->Scope destruction
- 【angular】学习AngularJS 笔记(慕课网)【01】
- AngularJs学习笔记--Understanding Angular Templates
- AngularJS学习笔记--使用angular.extend()实现工厂模式
- AngularJS学习:Angular的模块
- AngularJS学习之三:学习Angular
- AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析
- AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析
- AngularJS学习之angular.extend用法实例
- AngularJS学习:构建小型angular项目
- Angular学习(二)之AngularJS 表达式
- Angular学习(四)之AngularJS 控制器
- angular学习笔记二
- Angular 学习笔记 1
- Angular 学习笔记 2
- Angular 学习笔记 3
- Angular 学习笔记 4
- Angular 学习笔记 5
- Angular 学习笔记 6
- cocos2dx bindings-generator readme 文档翻译
- [2015-08-06] python017
- Cisco Webex share screen 显示黑屏解决方法
- muduo::TimerId、Timer、TimerQueue分析
- 拜占庭问题
- 【angular】学习AngularJS 笔记(慕课网)【01】
- Linux Technical Notes
- Ubuntu中update-alternatives命令(版本切换)
- Content Provider Basics
- poj 2391 Ombrophobic Bovines 【floyd + 二分 + 拆点网络流】
- java代码--数3退1
- 按钮点击效果的简单实现方法
- TortoiseGit pull分支代码失败
- ibooks的epub书使用input