[武汉|结业弟子]JS-赵灵杰|2017年05月01日的日报-技能树.IT修真院

发表于： 2017-05-01 23:46:20

1 1043

今天完成的事

学习一波angular 的核心思想

angular 的核心即mvc module,controller,view 模型通过控制器控制视图;以直接操作数据模型来代替传统的改变数据对象在改页面的DOM模式.

学习 $scope $rootscope $swatch $state在angular中分别代表什么意义？

1.$scope

$scope在angularjs中，你可以把它理解成作用域，每个不同的controller，都具有它不同的作用域，所以controller不同，他们的scope是不同的，那么，如果我们想象js那样，做一个全局变量该怎么办呢？这就要说到rootScope了。

2.$rootScope

$rootScope就相当于一个全局变量，所以我们保存在其中的东西是全局性的，在任一controller之中都能够使用。

scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用。

3.$watch

相信使用过angularjs的同学都知道，ng中有个比较重要的特点，叫做双向绑定，那么这个双向绑定是如何实现的呢？

当我们在创建出scope下的一个新属性的时候，ng就会主动为我们新属性加上 $watch这个方法，这个方法会监听我们的数据变化，当数据变化之后，就立即把view和scope上数据同步。

4.$state

在ajax技术发展普及之后，因为其不会留下历史记录方便浏览器访问和对于seo不友好的特点，一个新技术应运而生：路由，$state就是路由中的一项服务。

学习controller 的作用

一、什么是controller

在angularJS中，controlle是一个javascript函数/类，用于操作作用域中，各个对象的初始状态以及相应的行为

app.controller('helloCtrl', function ($scope) {
$scope.name = "菲尔";
});

如何将helloCtrl控制器绑定到相应的页面中了，我们在body使用了 ng-controller指令，因此整个body都成为了helloCtrl的作用范围，因此我们可以将 {{name}}写于body的任何地方，假如我们将helloCtrl放置于div中，如：

tml] view plaincopy
 
<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body ng-app="Hello">  
  
  
<p> {{name}}</p>  
  
  
<div ng-controller="helloCtrl">  
    {{name}}  
</div>  
  
  
</body>  
  
  
<script src="bower_components/angular/angular.min.js"></script>  
<script src="src/app.js"></script>  
<script src="src/controller.js"></script>  
</html>  

我们在来看看结果，发现只出现了一个菲尔

还有一个{{name}}去哪里了呢，为了更清晰的表示，我们给第一个{{name}}加入style如：

[html] view plaincopy
 
<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body ng-app="Hello">  
  
<p style="background: yellow;height: 20px"> {{name}}</p>  
  
<div ng-controller="helloCtrl">  
    {{name}}  
</div>  
  
</body>  
  
<script src="bower_components/angular/angular.min.js"></script>  
<script src="src/app.js"></script>  
<script src="src/controller.js"></script>  
</html>  

看看结果，明白了第一个{{name}}的值为空，也就是说，helloCtrl并没有给第一个{{name}}赋值

三、多controller的实现

根据上面我们知道，angularJS中view层解析是通过controller的作用域来将$scope对象解析成相应的内容，因此我们可以在同一个界面上划分不同的模块，通过不同的控制器控制不同的模块来进行开发，这样通过划分模块的开发方式，对今后维护代码带来了便利。

还是以前的例子，我们在controller.js中再写一个控制器：如

[javascript] view plaincopy
 
app.controller('helloCtrl', function ($scope) {  
    $scope.name = "菲尔";  
});  
  
app.controller('worldCtrl', function ($scope) {  
    $scope.name="hello world";  
});  

并且在html中绑定 worldCtrl

[html] view plaincopy
 
<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body ng-app="Hello">  
  
<p style="background: yellow;height: 20px" ng-controller="worldCtrl"> {{name}}</p>  
  
<div ng-controller="helloCtrl">  
    {{name}}  
</div>  
  
</body>  
  
<script src="bower_components/angular/angular.min.js"></script>  
<script src="src/app.js"></script>  
<script src="src/controller.js"></script>  
</html>  

这个时候第一个{{name}}也就解析成功了

我们会发现，不同的controller他们scope对象是不一样的,即使都是用了name这个变量，可以看出controller之间是封闭的，可是有时候我们面对两个模块之间进行数据交互，必然在两个controller之间进行通信，这就涉及到angular中的service操作，我会在下一篇文章进行记录。

明天计划的事：

开始任务9

遇到的问题：

懒惰症犯了

收获：

对angular有了进一步的了解