angularJS学习笔记

最近公司项目需求中包含前端的部分，而我又是一个JAVA开发者，因此只能学一学所谓的angularJS。（学习框架关键在于学习思想）

将本身的学习总结写在这里，但愿对广大的开发者有做用。

一、angularJS其实严格来说，属于angular 1.x版本。属于angular的老版本前端框架。而2.x以上一般被称为angular，两者没有必然的父子集关系。

2.x版本采用TypeScript编写。而1.x版本采用javascript编写。

 

二、前端框架和函数库（好比：jquery有）有什么区别呢？

前端框架：定义了一种全局性的，结构型的解决方案。（使用起来结构紧凑，标准化）

函数库：只是提供了一些工具，方便程序员使用而已。（结构松散，灵活）

 

三、angularJS的使用场景：Simple Page Application。单页面应用。（好比，XXX后台管理系统等）

 

四、如何使用：

（1）页面中要引入angular.js。

（2）在html中使用ng-app指令标记angular控制的最大范围。

（3）使用ng-bind指令或者{{}}表达式将模型中数据绑定到页面中。

（4）使用ng-controller指令来划定子范围。

（5）编写本身的js文件。（注册模块，注册service，factory，value，provider，controller）

 

五、我相信看完上面的（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的返回状况

　　}

});