https://docs.angularjs.org/tutorial 需要翻墙,伟大的Great Wall~
基础的知识,不再赘述拉
1.怎么样在不同的controller之间共享数据呢
第一种办法,不要小看dot,如果你定义model为data.message,则三个messagebox绑定到了一起
<div>
<input type="text" ng-model="data.message">
<p>{{data.message}}</p>
</div>
<div ng-controller="firstctrl">
<input type="text" ng-model="data.message">
<p>{{data.message}}</p>
</div>
<div ng-controller="secondctrl">
<input type="text" ng-model="data.message">
<p>{{data.message}}</p>
</div>
第二种方法是在cotroller中定一个共用的service提供数据源,然后将service注入到每个controller中,即可~
其实这个方法涉及到的背后的知识很多
比如 service在这里的设计模式是一个~以达到不同controller共享同一份数据源!
那么我们什么时候应该使用service呢?答案是:无论何时,当我们需要在不同的域中共享数据的时候。另外,多亏了Angular的依赖注入系统,实现这一点是很容易并且很清晰的。
2.使用自定义的filter代替一部分函数
var myapp = angular.module("myapp",[]);
myapp.factory('Data',function(){return {message:"I'm data from service"}})
myapp.filter('Reverse',function(){
return function(text)
{
return text.split("").reverse().join("");
}
})
function firstctrl($scope,Data){
$scope.data=Data
}
function secondctrl($scope,Data){
$scope.data=Data
}
当然,angular js自带的filter也很强大
数据结构为 film {name:cast}
<input type="text" ng-model="search.name">
<table>
<tr>ng-repeat=" item in film | filter: search"}
<td>{{item.name}}</td>
<td>{{item.case}}</td>
</tr>
</table>
你也可以将search.name换成search.cast,分别根据name或者cast作为filter,当然也可以使用search.$
3.另一种方式组织代码
有很多种方式组织你的代码
<!doctype html>
<html ng-app="myapp">
<head>
<title>Bookshop - Your Online Bookshop</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div ng-controller="firstCtrl"> {{test}} </div>
<div ng-controller="secondCtrl"> {{test}} </div>
<div ng-controller="thirdCtrl"> {{test}} </div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module("myapp",[]);
//first way to organise
function firstCtrl($scope){
$scope.test="first";
console.log("first way to organise your code");
}
//second way to organise
myapp.controller("secondCtrl",function($scope){
$scope.test="second";
console.log("second way to organise your code");
});
//third way to organise
var controllers ={}
controllers.thirdCtrl = function($scope){
$scope.test="third";
console.log("third way to organise your code");
}
myapp.controller(controllers);
</script>
</body>
</html>
4.scope区域问题1) 对于这个问题,一直比较让我困惑,下面谈谈我的拙见啦啦
首先介绍一个概念,$rootScope,每一个Angular应用都会有一个 $rootScope。这个 $rootScope 是最顶级的scope,它对应着含有 ng-app 指令属性的那个DOM元素。
如果页面上没有明确设定 $scope ,Angular 就会把数据和函数都绑定到这里, 上面例子的firstCtrl就是如此运行成功的。
其余,则是各自负责各自区域了~
另外,所有scope都遵循原型继承(prototypal inheritance),这意味着它们都能访问父scope们。对任何属性和方法,如果AngularJS在当前scope上找不到,就会到父scope上去找,如果在父scope上也没找到,就会继续向上回溯,一直到$rootScope 上
2) 第二,我们继续探究一下 controller中的$scope 和 directive中的 function(scope,element,attrs)中的scope有什么区别呢
这样不得不说一下依赖注入, 其中controller中的$scope就是注入的一个$provider依赖,所以这里$scope是不能够更改名称的,当然也有另一种注入方式允许用户更改名称
app.controller('myctrl',[$scope, function(a){
//here we rename $scope to a
console.log(a); //equals console.log($scope);
});
而在directive中的scope是可以重命名的
app.directive('mydir',function($scope//当然也可以在这里注入$scope){
return {
link: function (scopeaaa,element,attrs){
console.log(scopeaaa); //这里随便命名,主要是位置~scope范围也只有这个element
}}});
5.directive
这部分知识太多了,请参照我的另一篇博文吧
6.route
这部分知识太多了,请参照我的另一篇博文吧
7.provider
这部分知识太多了,请参照我的另一篇博文吧