angular js 基础总结

最新推荐文章于 2023-07-12 11:13:07 发布

luan_tianjiao

最新推荐文章于 2023-07-12 11:13:07 发布

阅读量515

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/luan_tianjiao/article/details/38945581

版权

web 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

视频教程

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

这部分知识太多了，请参照我的另一篇博文吧

angular directive

6.route

这部分知识太多了，请参照我的另一篇博文吧

angular route

7.provider

这部分知识太多了，请参照我的另一篇博文吧

angular provider