最近在学习angular做个整理，因为没有大的项目经验做支撑，所以可能有很多问题没有遇到，理解的没有那么深刻，所以如果有什么问题欢迎大家提出~~~闲话少说，让我们一起来学习angular吧
1、angular简介：
angular是一个框架，不是类库，框架能提供一整套的类似MVC架构来设计实现web应用，angular（ng）用来设计web app应用的结构框架。官网对angular的描述是:HTML enhanced for web apps。HTML enhanced指的是借助标签或者指令完成一部分页面逻辑。方法是通过自定义指令或者标签、自定义属性等（如常见的 <div ng-model='mytest'>）ng-model就是指令，而这个是以前的HTML标签没有的。angular适合场景是动态web应用，传统的web系统是用户在界面做了操作后会发生url跳转做处理（AJAX等除外），而动态web应用能为用户提供丰富的操作，用户在前台做更新视图不会发生url跳转，angular声明它更适用于开发CURD（创建（Create）、更新（Update）、读取（Retrieve）和删除（Delete））应用，即数据操作比较多，而不是游戏或者图像处理类应用。
前面提到angular是框架，但是官网上说的是angular采用的是MVC的思想，但不完全是MVC。官网给的解释是MVM
2、开始演练
a.js
function testC($scope){
$scope.name='zhangsan';
}<!DOCTYPE html>
<html ng-app='MyApp'>
<meta charset="utf-8">
<head>
<script type="text/javascript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script>
<script type="text/javascript" src='a.js'></script>
<script type="text/javascript">
var app=angular.module('MyApp',[]);
app.controller('testC',testC);
</script>
<body>
<div ng-controller='testC'>
hello,{{name}}!
<input type='text' ng-model='name'>
</div>
</body>
</html>
anguar的使用很简单，使用angular.module('MyApp',[])来生成模块，注意这指的是angular作用域只是在Myapp中，后面的[]指的是所依赖的模块，我们在使用时候，只需在所用之地引入我们的这个模块即可，
<html ng-app='MyApp'>
举个例子：
view:
<div ng-app="app" ng-controller="parentCtr">
<div ng-controller="childCtr1">name :
<input ng-model="name" type="text" ng-change="change(name);" />
</div>
<div ng-controller="childCtr2">Ctr1 name:
<input ng-model="ctr1Name" />
</div>
</div> angular.module("app", []).controller("parentCtr",
function ($scope) {
$scope.$on("Ctr1NameChange",
function (event, msg) {
console.log("parent", msg);
$scope.$broadcast("Ctr1NameChangeFromParrent", msg);
});
}).controller("childCtr1", function ($scope) {
$scope.change = function (name) {
console.log("childCtr1", name);
$scope.$emit("Ctr1NameChange", name);
};
}).controller("childCtr2", function ($scope) {
$scope.$on("Ctr1NameChangeFromParrent",
function (event, msg) {
console.log("childCtr2", msg);
$scope.ctr1Name = msg;
});
});
对这段代码做个简单解释，看不懂的童鞋们不用着急，可以忽略掉这个解释，我的目的是想说明下很多情况不止一个controller。
angularjs为在scope中为我们提供了冒泡机制，$broadcast会把时间广播给所有的子controller，而$emit则会将事件冒泡传递给父controller，$on则是angualarjs的事件注册函数，这个就为不同的controller之间的通信提供了可能，而上文这个例子就是为了说明这种通信机制的，这里的childCtrl1的name改变会以冒泡传递给父controller，而父controller会对事件包装在广播给所有的子controller，而childCtr2则注册了change事件，并改变自己，注意父controller在广播时候一定要改变事件name
言归正传，我们发现了另一个非常高频的词，就是$scope，这个就是我们所说的作用域，上下文，每个controller都会有自己的作用域，
ng-model就是所谓的模型，而HTML指的是模板，在我们的HTML中，我们可以加入任何指令来增强它的功能，这些指令可以让你把模板和数据联系起来。在ng之前，我们页面数据的操作往往是先操作DOM元素后然后获取其value值，但是在ng中我们只需用ng的指令即可绑定模板和数据 如上文的示例中，我们并没有获取input这个DOM元素，只是将input这个DOM绑定了name这个model值，然后当input值发生变化时model获取后将在其他地方用到了model模型的地方显示出来。
结果如下：
当我们在输入框中输入任何值都会立刻先显示出来
是不是觉得很神奇？
不需要再用ajax来写，只需简单的借用angular就可以实现即时变化，其实它的神奇不止如此，我们接着看些例子
<!DOCTYPE html>
<html ng-app='MyApp'>
<meta charset="utf-8">
<head>
<script type="text/javascript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script>
<script type="text/javascript" src='E:/jstest/a.js'></script>
<script type="text/javascript">
function testC($scope){
$scope.userlist=[];
$scope.addUser=function(){
var o={
name:'',
tel:''
};
$scope.userlist.push(o);
};
$scope.del=function(index){
$scope.userlist.splice(index,1);
};
}
var app=angular.module('MyApp',[]);
app.controller('testC',testC);
</script>
<body>
<div ng-controller='testC'>
<h1>adduser</h1>
<button ng-click='addUser();'>addbutton</button>
<div>
<ul>
<li ng-repeat='o in userlist'>
<span>
name:{{o.name}}<br/>
tel:{{o.tel}}<br/>
<a href='javascript:void(0);'ng-click='del($index)'>delbutton</a></span>
</li>
</ul>
</div>
please input your message:
<ul>
<li ng-repeat='o in userlist'>
<span>
name:<input type='text' ng-model='o.name'>
tel:<input type='text' ng-model='o.tel'>
</span>
</li>
</ul>
</div>
</body>
</html>
每次点击addbutton时候，页面的上半部分用来展示预览部分，下面是新建部分，中有个ng-repeat的作用是循环，其中的add按钮可以用来添加选项，每次用户输入的信息将存储在O中，然后o会被push到userlist中，上面的预览部分将从userlist展示出来。用到了ng-model与内容做了双向绑定。注意$index是公共变量。
这样进行了绑定后，模板中的列表将与数据模型的userlist保持同步，所以我们无需自己再监听keyup然后自己去操纵DOM元素从而获取信息然后再在展示区域获取DOM显示数据。
.我们现在针对上述几个例子学习下angular中最重要的几个概念
.我们现在针对上述几个例子学习下angular中最重要的几个概念
3.controller
前面已经提到了这个名词，这里的controller其实与我们之前mvc的controller的功能非常类似，但是它同时还会实现一些与服务端不同功能，在angular中，controller自身并不会处理request，除非它是用来处理路由route的（很多人把这种方式叫做创建route controller--路由控制器）。
controller应该是用来把service、依赖关系以及其它对象串联在一起，然后通过scope把它们关联到view上
4、service(服务)
这个名词对于大家如果做过后端的人来说应该也不陌生，service就是单例对象在angularjs中的一个别名，这些单例对象会被经常传来传去，保证你每次访问的都是同一个实例，这一点和工厂模式不同，基于这点，单例对象可以让我们实现一些相当酷的功能，它可以让很多controller和directive访问内部的数据。
看到上面这段文字中一个非常关键的名词叫做单例，这也就告诉我们什么时候用servicen呢，那就是当我们需要在不同的域中共享数据的时候。举个例子：
var module=angular.module('firstapp',[]);
好了现在我们来创建一个新的service,假如我们这个module是用来管理personlist的，我们现在要创建一个service
module.service('Person',['$rootScope',function($rootScope){
var serivice={
personlist;[
{name:'zhangsan',age:12}.
{name:'lisi',age:19}
],
addPerson:function(person){
service.personlist.push(person);
$rootScope.$broadcast('personlist.update');
}
}
return service
}]);
好了，我们这里在管理一个personlist数组，同时还带有一个增加人物的方法，在需要的时候增加人物，addPerson还会在application上广播一个事件，告诉所有正在使用我们service的人，数组已经更新从而让它们自己也做一些刷新，现在我们要做的就是将这个service传递给各种controller、directive、filter或者其他任何需要它的东西，然后它们就可以访问service中的这些方法和属性了。
var ctrl=['$scope','Person',function(scope,Person){
scope.$on('personlist.update',function(event){
scope.personlist=Person.personlist;
scope.$apply();//这个还不是太明白等后面再研究下
});
scope.personlist=Person.personlist;
}];
module.controller('personlist',ctrl);
我们上面做的非常简单，就是为我们的module创建了一个新的controller，在创建的时候吧$scope provider和我们自己的Person service传递给了它，简单点说就是把前面创建的Person service中的personlist数组赋给了controller内部的scope对象。
这样的好处是什么呢？我们这样做可以为我们节约时间，如果其他地方也要处理这些人类列表信息的话，通常做法是通过scope来维护数据是非常不友好的一种方式，由于其他controller、directive、model的影响，scope很荣誉就会奔溃或者变脏。通过一种集中的额途径即service我们可以管理所有的人，然后通过某种方式来请求修改它，这样不仅仅更加清晰，同时当应用的体积不断增大的时候也容易管理，最后还可以让你的代码保持模块化，一旦你在其他项目中需要用到这个service，你没必要再scope、controller、filter等东西里面到处去查找相关代码，因为所有东西都在service里面。
扫一扫
285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
