AngularJs 实战 -慕课网
2016-04-04 14:34
716 查看
https://www.codecademy.com/en/courses/learn-angularjs/lessons/your-first-app/exercises/your-first-app-hello-angularjs-i?action=resume
- MCV 只是手段,终极目标是模块化和复用
错误
正确
不要在Controller中操作DOM,这不是控制器的职责
不要在Controller里面做数据格式化,ng有很好用的表单控件
不要在Controller里面做数据过滤操作,ng有$filter服务
一般来说,Controller是不会互相调用的,控制器之间的交互会通过事件进行
作用域向下查找:$broadcast()
每一个Angular应用只有一个$rootscope 对象(一般位于ng-app上)
$scope是一个树形结构,与DOM标签平行
子\(scope对象会继承父\)scope上的属性和方法
$scope可以传播事件,类似DOM事件,可以向上也可以向下。
$scope不仅是MVC的基础,也是后面实现双向数据绑定的基础
可以用angular.element($0).scope()进行调试
依赖注入和页面引入的js顺序关联不大
ng-bind 在首页中使用,可以隐藏{{ng变量}},不会显示模版变量
使用双绑定的情景是表单最常用,重置一些值,修改class
好处不用直接操作DOM,直接修改模型就可以了
ng-class : 增强表达 式
ng-show:通过判断是否显示内容
ng-animate:: 动画效果
Ajax请求不会留下history记录
用户无法直接通过URL进入应用中指定的页面保存书签,链接分享给朋友?)
Ajax对于seo差
>ui-router比angular自带的路由好用
前端路由的基本原理
哈希#,可以兼容旧版浏览器
H5中新的history API
路由的核心是给应用定义『状态』
使用路由机制会影响到应用的整体编码方式(需要预先定义好状态)
考虑兼容性,优雅降级(旧用哈希,新用history)
- MCV 只是手段,终极目标是模块化和复用
MVC Controller的实现方式
不要使用继承,通用控制器,要使用Server错误
正确
Controller使用过程中的注意点
不要试图去复用Controller,一个控制器一般只负责一小块视图不要在Controller中操作DOM,这不是控制器的职责
不要在Controller里面做数据格式化,ng有很好用的表单控件
不要在Controller里面做数据过滤操作,ng有$filter服务
一般来说,Controller是不会互相调用的,控制器之间的交互会通过事件进行
AngularJS 的MVC 都是借助作用域( $scope )来实现的
作用域向上查找:$emit()作用域向下查找:$broadcast()
每一个Angular应用只有一个$rootscope 对象(一般位于ng-app上)
$scope是一个树形结构,与DOM标签平行
子\(scope对象会继承父\)scope上的属性和方法
$scope可以传播事件,类似DOM事件,可以向上也可以向下。
$scope不仅是MVC的基础,也是后面实现双向数据绑定的基础
可以用angular.element($0).scope()进行调试
AngularJS 一切都是从模块(module)开始
app.js 入口程序,模块,路由功能 和 依赖注入依赖注入和页面引入的js顺序关联不大
AngularJS 双绑定
双绑定:修改视图也可以修改模型上面的值ng-bind 在首页中使用,可以隐藏{{ng变量}},不会显示模版变量
使用双绑定的情景是表单最常用,重置一些值,修改class
好处不用直接操作DOM,直接修改模型就可以了
ng-class : 增强表达 式
ng-show:通过判断是否显示内容
ng-animate:: 动画效果
AngularJS 路由
路由解决ajax的三个问题Ajax请求不会留下history记录
用户无法直接通过URL进入应用中指定的页面保存书签,链接分享给朋友?)
Ajax对于seo差
>ui-router比angular自带的路由好用
前端路由的基本原理
哈希#,可以兼容旧版浏览器
H5中新的history API
路由的核心是给应用定义『状态』
使用路由机制会影响到应用的整体编码方式(需要预先定义好状态)
考虑兼容性,优雅降级(旧用哈希,新用history)
相关文章推荐
- 构建自己的AngularJS - 作用域和Digest(三)
- AngularJS路由实例(uiRoute、ngRoute)
- angular.forEach在调接口中的应用
- AngularJs Scrope
- AngularJs Controllers
- AngularJS ng-model directive
- angularJs小应用----计算购物金额-动态改变邮费
- 初识angularJs
- Angular 根据 service 的状态更新 directive
- AngularJs 60分钟入门基础教程
- AngularJs 基础(60分钟入门) (转)
- 初识angularJs
- Angularjs学习笔记1_基本技巧
- AngularJs 60分钟入门基础教程
- Angular 根据 service 的状态更新 directive
- angularJs directives
- angularjs介绍
- AngularJS专题——路由
- Angularjs动态绑定HTML文本
- 详说Angular之指令(directive)