angularJS学习笔记
最近公司项目需求中包含前端的部分,而我又是一个JAVA开发者,所以只能学一学所谓的angularJS。(学习框架关键在于学习思想)
将自己的学习总结写在这里,希望对广大的开发者有作用。
1、angularJS其实严格来讲,属于angular 1.x版本。属于angular的老版本前端框架。而2.x以上通常被称为angular,二者没有必然的父子集关系。
2.x版本采用TypeScript编写。而1.x版本采用javascript编写。
2、前端框架和函数库(比如:jquery有)有什么区别呢?
前端框架:定义了一种全局性的,结构型的解决方案。(使用起来结构紧凑,标准化)
函数库:只是提供了一些工具,方便程序员使用而已。(结构松散,灵活)
3、angularJS的使用场景:Simple Page Application。单页面应用。(比如,XXX后台管理系统等)
4、如何使用:
(1)页面中要引入angular.js。
(2)在html中使用ng-app指令标记angular控制的最大范围。
(3)使用ng-bind指令或者{{}}表达式将模型中数据绑定到页面中。
(4)使用ng-controller指令来划定子范围。
(5)编写自己的js文件。(注册模块,注册service,factory,value,provider,controller)
5、我相信看完上面的(1)~(5)的使用过程,对于初学者来说,你已经晕了,我会一项一项的来解读。
(1)引入js,这个不需要解释。
(2)在html中使用ng-app指令标记angular控制的最大范围:
首先要理解,指令是angular对html的扩展,一般会以元素的属性存在,angular会自动去读取html,然后解析出这些指令。
所以ng-app指令是用来表示一个angular应用的最大作用范围,如果你的操作不在这个范围内,angularJS也无法检测到。
(3)使用ng-bind,ng-model指令或者{{}}表达式将模型中数据绑定到页面中:
理解这一点,关键在于理解模型的概念。模型($scope对象),是一个js对象,有angularJS创建,该对象的属性和视图(html)中
使用ng-bind或{{}}表示的地方进行双向数据绑定,其中一方改变,则另一方跟着改变。
(4)使用ng-controller指令来划定子范围:
例如:
// 以下代码其实只是向angular注册了模块和控制器
var app = angular.module("myapp",[]);
app.controller("myCtrl1",["$scope",function($scope){
$scope.name = "zhaoyang";
}]);
// 而这个注册的控制器匿名函数,将会被angular来进行new操作,产生一个控制器对象。
其实$scope就是模型,该对象是angular自己创建传入到函数中的,所以也叫依赖注入。
(5)编写自己的js文件。(注册模块,注册service,factory,value,provider,controller):
value注册就是提供原始值或者原始对象的。
app.value("myValue",1000);
app.controller("myCtrl1",["$scope","myValue",function($scope,myValue){
$scope.name = "zhaoyang";
console.log(myValue); // 打印出1000
}]);
factory注册就是提供函数的返回值。
app.factory("myFactory",function(){
// 该函数将会被angular调用
return {
.....
};
// 这里只是做了个演示,让其返回一个对象。
});
service注册就是提供函数作为构造函数的返回对象。(也就是说其注册的函数会被angular进行new操作产生一个对象)
app.service("myService",function(){
var obj = {}; // 形成返回对象中函数的闭包
.....
this.value = "1000";
....
});
provider注册(比较特殊)
app.provider("myProvider",function(){
this.$get = function(){
return {}; // 类似于 factory的返回情况
}
});