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的返回情况

  }

});

 

posted @ 2019-11-10 13:03  朝阳人生  阅读(127)  评论(0编辑  收藏  举报