随手记的一些知识点,,没有长篇大论的原理,,不喜勿喷 ^*_*^
Angularjs可以构建一个单一页面应用(SPAs),整个页面不跳转,通过AJAX进行局部刷新
Angularjs:双向数据绑定,可以避免书写大量的初始代码
Html内容会被再次渲染,本来是静态的html标签,变为了动态的页面模块
依赖注入
在angularjs中尽量不要使用全局变量
Angularjs--执行流程
1、启动(startup)-展示“hello world”
2、执行期(runtime)-angularjs执行概览
3、作用域(scope)-视图和控制器的集合区
4、控制器(controller)-应用的行为
5、模型(model)-应用的数据
6、指令(dirctives)-扩展html语法
7、过滤器(filters)-数据本地化
8、注入器(injector)-聚合你的应用
9、模块(module)-配置注入器
10、$-angularjs的命名空间
MVC解耦 各司其职
1、双向数据绑定(ng模块):{{el}} 作用域:简单的数据对象
Angularjs模块:代表一个完整的业务功能的单元
模块初始化函数:angular.module(“模块名称”,[]); 返回新创建的模块,或者已经存在的模
块
第一个参数:模块名称
第二个参数:当前函数依赖列表组合,有利于代码重用
一个模块包含:view(html代码)controller(js代码,作为数据的搬运工)
为了防止函数再次变为全局变量,违反了angularjs最初的意愿,所以,一般使用方式是不接收,直接调用:
angular.module("myApp",[])
.controller("init",function($scope){
$scope.msg = "xiaohong";
});
一个controller对应的是一个html片段的初始化过程
手动启动ng-app,启动模块:angular.bootstrap(documnt,[‘myapp’])
如果在body中使用ng-app 每个页面只能有一个自动启动的ng-app
也可以同时对多个片段进行处理:
<body ng-app = "myapp">
<div ng-controller="haha">
<span>hello {{usname}}</span>
</div>
<div ng-controller="init">
<span>nihao {{msg}}</span>
</div>
</body>
<script src = "angular.min.js"></script>
<script>
angular.module("myapp",[])
.controller("haha",function ($scope){
$scope.usname = "world";
}).controller("init",function ($scope){
$scope.msg = "164896465146";
});
</script>
2、作用域:两种
$rootScope 根作用域,对应的是一个模块,每个模块有一个rootScope
$scope:子作用域,对应一个html片段,一个ng-controller标记一个scope,不同的
controller之间要进行数据交互,只能用rootScope进行依赖注入
(先从小范围找,在从大范围找)
强制向上找变量:使用$parent $parent.uname;
Ng-repeat :遍历数据对象 比如说user对象:
Ng-repeat = “user in users” users是$scope作用域中的一个对象
3、过滤器
作用是接受一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用在
数据的格式化上
Angularjs内置了一些过滤器,他们是
Currency(货币){{money | currency:’¥’}}默认是美元符号
Date(日期){{birthday | date:’yyyy年MM月dd日’}}
Filter(子串匹配) 用来处理数组的,参数|filter:’过滤条件’
可以直接在{{}}中使用filter,跟在表达式后面用 | 分割
也可以多个filter连用,上一个filter的输出将作为下一个
filter的输入
Json(格式化json对象)
limitTo(限制个数)
Lowercase(小写)
Uppercase(大写)
Number(数字)
orderBy(排序)