1. 程式人生 > >Angular——配置模塊與運行模塊

Angular——配置模塊與運行模塊

doctype script .config name col tro ali 除了 實現

配置模塊

通過config方法實現對模塊的配置,AngularJS中的服務大部分都對應一個“provider”,用來執行與對應服務相同的功能或對其進行配置。比如$log、$http、$location都是內置服務,相對應的“provider”分別是$logProvider、$httpProvider、$locationPorvider。

基本使用

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>Title</
title> </head> <body ng-controller="DemoController"> <h1>{{now}}</h1> <script src="../libs/angular.min.js"></script> <script> var App = angular.module(App, []); App.config([$logProvider, $filterProvider, function ($logProvider, $filterProvider) { $logProvider.debugEnabled(
false);//禁用debug功能 //新增一個過濾器 $filterProvider.register(capitalize, function () { return function (input) { return input[0].toUpperCase() + input.slice(1); } }); }]); App.controller(DemoController, [$scope, showTime, function ($scope, showTime) { $scope.now
= showTime.now; }]); </script> </body> </html>

運行模塊

服務也是模塊形式存在的對且對外提供特定功能,前面學習中都是將服務做為依賴註入進去的,然後再進行調用,除了這種方式外我們也可以直接運行相應的服務模塊,AngularJS提供了run方法來實現。

不但如此,run方法還是最先執行的,利用這個特點我們可以將一些需要優先執行的功能通過run方法來運行,比如驗證用戶是否登錄,未登錄則不允許進行任何其它操作。

基本使用

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>{{name}}</h1>
<script src="../libs/angular.min.js"></script>
<script>
    var App = angular.module(App, []);
    App.run([$rootScope, function ($rootScope) {
        $rootScope.name = wqx;
    }]);
</script>
</body>
</html>

Angular——配置模塊與運行模塊