1、Angular是一款优秀的前端js框架，用它可以轻松构建SPA(Single Page Application，单页面应用程序) ，它的特征是：具有mvc的架构模式，便于模块化开发，自动化双向数据绑定和特有的指令系统。它最大限度的解放了Dom操作，让js代码更专注于业务逻辑的实现，通过简单的指令，结合页面结构和逻辑数据，通过自定义指令，实现组件化编程，代码结构更合理，维护成本更低。

2、Angular的应用完全没有自己写dom操作的地方。通过一些ng指令来完成事件绑定以及赋值，当我们写网页或者其他Angular应用时应注意的就是程序逻辑的地方，而不用去关注dom操作，减少了大量的代码量。这更符合面向对象编程，让框架去处理dom而我们只去处理逻辑。

3、如何使用Angular
在HTML代码中引入Angular.js包
在HTML代码中将刚刚定义的模块通过ng-app="yourModuleName"指令的方式作用到一个特定的元素上
在JS代码中通过angular.module('yourModuleName', []) 注册一个模块
根据当前页面的情况（业务块）划分控制器
在HTML代码中将刚刚定义的控制器通过ng-controller="ControllerName"作用到特定的元素上
建模（根据界面原型抽象一个数据模型）得到一个视图模型（ViewModel）
在JS代码中通过$scope暴露需要提供到页面的数据成员
在HTML代码中将刚刚暴露出来的数据通过类似ng-model/{{}}/ng-click之类的指令绑定到特定的元素上
在JS中完成业务逻辑

4、ng中是怎么样处理指令的
当浏览器渲染一个页面时,本质上是读html标识,然后建立dom节点,当dom树创建完毕之后广播一个事件给我们.
当你在页面中使用script标签加载ng应用程序代码时,ng监听上面的dom完成事件,查找带有ng-app属性的元素.
当找到这样的元素之后,ng开始处理dom以这个元素的起点,所以假如ng-app被添加到html元素上,则ng就会从html元素开始处理dom.
从这个起点开始,ng开始递归查找所有子元素里面,符合应用程序里定义好的指令规则.

5、angular程序的控制器必须在ng-app的范围之内，否则失效。 
ng-model是用于表单的模型，用于代替表单的值，用作和程序之间交流的模型，可以进行双向的数据绑定 。

 {{}}表达式只能够单向的绑定数据。实现从逻辑层到视图层的单向绑定，呈现数据。

6、service 
在angular中，service都是单例的，几乎每一个学习的教程中都会提到这一点，
并加以强调。单例的意思是说，在整个的应用中，每一个service对象只会被实
例化一次，其他地方对这个对象的操作，会影响到全局。

7、service 、provider、factory  

 

首先，有个东西需要说一下。以往在Js中,我们写了大量的代码来存取变量值，在angular中我们找到了一个比较好的

 

方法。然后，刚开始写angular的时候，我们容易把数据放的乱七八糟，有时候各种$scope, 各种域， 各种controller

 

的问题，这样其实就失去了angular的优势，angular的设计中 controller层是很薄的，一些业务逻辑的处理和数据持

 

久化的问题需要放到service中。出于内存的考虑，controller只有在需要的时候才会被初始化，不需要的的时候就会

 

被抛弃。所以说，当你刷新页面时，controller就会被清空。而service就可以用来保存应用数据，并且可以在不同的

 

域中被使用。

 

(1)用Factory就是创建一个对象，添加了一定的属性之后，把它返回回来。你把service传进controller之后，在

 

controller里这个对象里的属性就可以通过factory使用了。

 

app.controller('myFactoryctrl', function($scope, myfactory){$scope.artist = myFactory.getArtist();
});
app.factory('myfactory', fuction(){var _artist = '';var service = {};service.getArtist = fuction(){return _artist;}return service;
});

 

(2) service 是用‘new’ 关键字实例化的。因此，你应该给‘this’添加属性，然后 service返回‘this’，把service传进cont

roller之后，在controller里的‘this’ 上的属性就可以通过service来使用了。

app.controller('myServicectrl',function($scope, myService){$scope.artist =myService.getArtist();
});
app.service('myService', function(){var _artist = 'Nelly';this.getArtist = function(){return _artist;}
});

 

(3)provider 是唯一一种可以传进config()函数的service。当你想要在service对象启用之前，先进行模块范围的配

置，那就应该使用provider.

app.controller('myProviderCtrl', function($scope, myProvider){$scope.artist = myProvider.getArtist();$scope.data.thingFromConfig = myProvider.thingOnConfig;
});
app.provider('myProvider', function(){this._artist = '';this.thingFromConfig = '' ;this,$get = function(){var that = this;return {getArtist:function(){return that._artist;}thingOnConfig: that.thingFromConfig}}
});app.config(function(myProviderProvider){myProviderProvider.thingFromConfig = 'this was set in config()';
});

 

最后，强调一点，当我们需要在不同的域中共享数据的时候，我们最好用 service来实现. 

8、关于directive里的link和controller区别？

(1)、执行顺序：先controller后link
(2)、何时使用controller：一般场景下都不想要使用controller，只需要把逻辑写在link中就可以了；用controller的场景就是该指令（假设为a）会被其他指令（假设为b）require的时候，这样就会在b指令的link函数中传入这个controller（如果require多个的话，传入的是一个数组，数组中存放的是每一个require的指令对应的controller），目的很显然是为了指令间进行交流的。

9、关于非directive的scope能否用link？
在指令中才存在调用link的时候，也就是说link是该指令在compile之后和scope进行绑定的时候调用的。
那只有在指令定义的那个地方用到link了，其他地方也可以用，例如做弹出框的时候就需要，拿到模板tpl，然后调用var linkFn = $compile(angular.element(tpl));此时返回的就是一个link的函数，然后linkFn(scope)，这里的scope是你需要指定的scope，可以是新创建的，也可以是已经存在的。

 

10、为什么编译的过程要分成compile和link?

 

简单的说就是为了解决性能问题，特别是那种model变化会影响dom结构变化的，而变化的结构还会有新的scope绑定及事件绑定，比如ng-repeat

compile和link的形式

compile

• function compile(element, attrs, transclude) { ... }
• 在compile阶段要执行的函数，返回的function就是link时要执行的function
• 常用参数为element和attrs，分别是dom元素和元素上的属性们，其它的以后细说
• 较少使用，因为大部分directive是处理dom元素的行为绑定，而不是改变它们

link

• function link(scope, element, attrs, controller) { ... }
• 在link阶段要执行的函数，这个属性只有当compile属性没有设置时才生效
• 常用参数为scope，element和attrs，分别是当前元素所在的scope，dom元素和元素上的属性们，其它的以后细说
• directive基本上都会有此函数，可以注册事件，并与scope相绑

compile和link的使用时机

compile

• 想在dom渲染前对它进行变形，并且不需要scope参数
• 想在所有相同directive里共享某些方法，这时应该定义在compile里，性能会比较好
• 返回值就是link的function，这时就是共同使用的时候

link

• 对特定的元素注册事件
• 需要用到scope参数来实现dom元素的一些行为

 

11、作用域和控制器 

控制器是通过增强作用域来提供业务逻辑的代码。这是我们在作用域这个角度为它下的一个定义。注册的控制器在

ng-controller指令连接到AngularJS模板时被实例化的。每个控制器都会有一个自己的单独的子作用域，至于在自定

义指令中的$scope，是与控制器作用域同级的，和控制器作用域并没有任何的隶属关系。

 

12、作用域和模板 

模板是用来为Angular提供视图的。在模板中定义AngularJS指令时，可以使用作用域属性和函数。在模板的表达式中

也可以引用作用域中的属性。

 

13、作用域生命周期 

创建->监视器注册->模型变化->变化观察->作用域销毁

创建阶段发生在作用域初始化时。启动应用时将创建一个根作用域，当遇到ng-controller或者ng-repeat指令时，控制

器或者指令链接到模板时，将会创建子作用域。在创建阶段，将会创建一个digest循环，用于与浏览器时间循环交

互。该digest循环负责使用模型的变化更新DOM元素，并执行所有已经注册的监视器函数。如果需要手动的执行dig

est循环，可以通过执行$digest()方法实现. 例如，下面的代码将执行所有的异步改动，然后执行作用域中的监视函

数。

 

 

$scope.$digest()

 

我们可以用$watch()方法在作用域上注册自己的监视函数。该方法接受两个参数，一个是作用域属性的名字，一个

是回调函数。

$scope.$watch('name', function(newValue, oldValue) {});

3.作用域层次问题 

这里有一个来自《Angular Js开发秘籍》的Demo,简单明了。

scopeDemo.js

angular.module('myApp',[])
.controller('LevelA', function($scope){$scope.title = "LevelA";$scope.valueA = 1;$scope.inc = function(){$scope.valueA++;};
})
.controller('LevelB', function($scope){$scope.title = "LevelB";$scope.valueB = 1;$scope.inc = function(){$scope.valueB++;};
})
.controller('LevelC', function($scope){$scope.title = "LevelC";$scope.valueC = 1;$scope.inc = function(){$scope.valueC++;};
});

HTML：

 

<!doctype html>
<html ng-app="myApp">
<head><title>AngularJS Scope</title>
</head>
<body><div ng-controller="LevelA"><h3>{{h3}}</h3>ValueA = {{valueA}}<input type="button" ng-click="inc()" value="+" /><div ng-controller="LevelB"><hr><h3>{{title}}</h3>ValueA = {{valueA}}<br>ValueB = {{valueB}}<br><input type="button" ng-click="inc()" value="+" /><div ng-controller="LevelC"><hr><h3>{{title}}</h3>ValueA = {{valueA}}<br>ValueB = {{valueB}}<br>ValueC = {{valueC}}<input type="button" ng-click="inc()" value="+" /></div></div></div><script src="js/angular.min.js"></script><script src="scopeDemo.js"></script>
</body>
</html>

 

 

14、在debugger中查看scope：

(1). 在浏览器中，对着感兴趣的元素点击右键，选择“查看元素”。我们可以看到浏览器debugger高亮了我们选中的元素。

(2). debugger允许我们在console中通过$0变量去访问当前选择的元素。

(3). 想查看关联的scope，我们可以在console中输入：angular.element($0).scope()

 

15、$on、$emit和$broadcast的使用

• $emit只能向parent controller传递event与data
• $broadcast只能向child controller传递event与data
• $on用于接收event与data

在一个controller里面通过事件触发一个方法，在方法里面通过$broadcast或$emit来定义一个变量，在父，子controller里面通过$on来获取。

 

 

parent用$broadcast赋的值，只能子级得到值；$emit赋的值，只能父级得到；而平级的什么都不能得到。

例子：

 

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app = "myApp">
<head><meta charset="UTF-8"><title>scope-event-propagation</title><style type="text/css">.ng-cloak {display: none;}.ng-scope {border: 1px dashed red;}</style>
</head>
<body class="ng-cloak"><div ng-controller="MyController">root scope count:{{count}}<ul><li ng-repeat="i in [1]" ng-controller="MyController"><button ng-click="$emit('MyEvent')">$emit("MyEvent")</button><button ng-click="$broadcast('MyEvent')">$broadcast("MyEvent")</button><br/>middle scope count:{{count}} //平级<ul><li ng-repeat="item in [1,2]" ng-controller="MyController">Leaf scope count:{{count}}</li></ul></li></ul></div>
</body>
<script src = "js/angular.min.js"></script>
<script src="demo.js">
</script>
</html>

 

demo.js

angular.module('myApp', [])
.controller("MyController", function ($scope) {$scope.count = 0;$scope.$on("MyEvent", function() {$scope.count++;});
})

 

 

16、我们通过使用angular.element(aDomElement).scope()查看任意DOM元素的scope。

 

17、模块定义

 

angular.module("app", []);angular.module("app").controller("testCtrl", ["$scope", function ($scope) {$scope.currentMenu = "menu1";$scope.selectMenu = function (menu) {$scope.currentMenu = menu;}}]);

 

• 我给ng-app指定了一个名称叫”app“，同时js代码使用angular.module("app", []);定义了一个名称为”app“的module，同时用这个app module 的controller方法定义了一个testCtrl；定义module函数是angular对象上的静态方法，第一个参数传名称，第二个参数是一个数组，这个数组表示这个module所引用的其他module，在这个例子中我们没有使用任何其他的module，所以传入一个空的数组，如果第二个参数不传，表示获取名称为”app“的module；