angular之雜類

兩種啓動方式

1. 使用 ng-app 指令
2.使用angular.bootstrap() 方法來啓動。

對於父子controller的訪問關係

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
    </div>    
</div>

對於ChildController 的$scope 是能夠訪問ParentController的$scope的。

對於module提供的method

// 服務
provider(name,providerType)
factory(name,providerFunction)
service(name,constructor)

// 定義變量
value(name,object)
// 常量
constant(name,object)
// 動畫
animation(name,animationFactory)
// 過濾器
filter(name,filterFactory)
// 控制器
controller(name,constructor)
// 指令
directive(name,directiveFactory)
// 配置信息
config(configFn)
// 運行的時候調用的初始化方法。
run(initialization)

對於$scope 和 $rootScope 和 $injector 的區別

$injector 是一個IOC容器，包含不少服務 相似spring 的bean

$scope 是javascript 中的做用域，搜索的時候，會優先查找本身的scope，若是沒有查找到，會沿着做用域向上搜索，直到根做用域$rootScope

$rootScope是angular加載模塊的時候自動建立的，每個模塊只有一個rootscope，rootscope建立好了以後以服務的形式加入到$injector中，rootscope是由angular核心模塊ng建立的。

ng-controller 指令會給所在的DOM元素建立一個新的$scope 併爲rootscope的子做用域

每一個模塊只有一個rootscope，可是能夠有多個scope

使用angular.element().scope() 返回做用域上，距離該元素最近的scope

value和constant的區別

若是服務的$get方法是返回一個常量，那麼就沒有必要去定義一個包含複雜功能的完整服務

能夠經過value函數去註冊服務

而constant是能夠被注入的。

一般狀況下，使用value來註冊服務或者函數，使用constant來配置數據。

父親和兒子controller之間傳遞數據

能夠在子controller中經過 $emit 來傳遞數據 

父親controller經過$on 來監聽數據

對於父親controller能夠經過$broadcast廣播事件

子controller中經過$on來監聽數據

對於參數中的event

event.targetScope
event.currentScope
event.name
event.stopPropagation() 
event.preventDefault
event.defaultPrevented

service和provider和factory的區別

在angualr中 對於服務service 有
factory
service
provider

另外  angualr 也提供 不少其餘內置服務service

$animate

$compile

$document

$timeout

$http

等

另外咱們還能夠建立本身的service

看下angualr源碼中的實現

provider -> factory -> service


function provider(name,provider){
}

function factory(name,factoryFn){
    return provider(name:{$get:factoryFfn})
}

function service(name,constructor){
    return factory(name,['$injector',function($injector){
        return $injector.instantiate(constructor);
    }])
}

service 和factory 能夠在controller中共享數據。

對於這三者的區別

1. factory建立的是對象，爲他添加屬性，而後把這個對象返回出來。

2. service是使用new 關鍵字實例化的，所以你應該爲this添加屬性，

3. provider是惟一一個能夠傳遞到config函數的service，傳遞的是，使用xxxProvider 纔對。

對於service，是能夠被依賴注入到controller中去的。

重點： service做爲單例對象對象，在須要建立的時候被建立，只有在應用生命週期結束的時候，纔會被清除掉

而controller會在不須要使用的時候被銷燬掉。

能夠見 hello world 版本的service

對於controller

在切換視圖的時候，controller會被從新生成初始化的，全部當心被初始化掉。

關於module

若是在html中使用了空的ng-app 則不須要調用module的run方法

不然 若是  ng-app="test"

angular.module('test').run(function($rootscope){

// 能夠注入 rootscope 參數進來。

});

關於angualr方法編寫的一些理解

// 依賴注入的東西。
function xxxFilter($local){
    // 私有屬性
    var  xxx = 'private';
    
    // 私有方法。
    function test (){
    }
    // 這邊纔是真正的參數。
    // 暴露給上層的方法。
    return function(param){
    }
}

對於constant和value的使用區別

相同點：都是定義一個變量。

不一樣點：

constant一旦初始化了以後，是沒法修改的，且能夠注入到config方法中去。

value 是不能被注入到config方法中去的，一樣也是能夠修改的。

對於$compile 服務

function appController($scope,$compile,$document){
    $scope.attrs = ['test','baby','sub'];
    var htmlTpl = '<h1 ng-repeat="attr in attrs">{{attr}}</h1>';
    
    var $html = $compile(htmlTpl)($scope);
    
    var body = $document.find('body').eq(0);
    
    body.append($html);
}

 實現動態編譯angular 代碼，並在瀏覽器中渲染出來。

關於controller的依賴注入

var myModel = angular.modul('app',[]);

// 第一種依賴注入
var testController = function(renameScope){
    renameScope.title = '我是 title';
}
myModel.controller('testCtrl',testController );

testController.$inject = ['$scope'];

// 第二種依賴注入
myModel.controller('test2Ctrl',['$scope',function($scope){
    
}]);

對於angular的內置module 

'ng' 是angular的內置模塊。

對於服務的理解

在ng中，服務的做用是處理模型的持久化。