|
这篇博客主要是用来记录一些自己在看其他文章时觉得有必要留存一下的fortune！
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,myFactoryctrl){
$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传进controll
er之后，在controller里的‘this’ 上的属性就可以通过service来使用了。
app.controller('myServicectrl',myService){
$scope.artist =myService.getArtist();
});
app.service('myService','Microsoft YaHei'">function(){
'Nelly';
this.getArtist = function(){
return _artist;
}
});
(3)provider 是唯一一种可以传进config()函数的service。当你想要在service对象启用之前，先进行模块范围的配置，
那就应该使用provider.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
app.controller('myProviderCtrl','Microsoft YaHei'">function($scope,myProvider){
$scope.artist = myProvider.getArtist();
$scope.data.thingFromConfig = myProvider.thingOnConfig;
});
app.provider('myProvider','Microsoft YaHei'">this._artist = this.thingFromConfig = '' ;
this,$get = 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，可以是新创建的，也可以是已经存在的。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
