AngularJS 学习笔记（六）--- 依赖注入和路由

2023-09-23 19:50:21

一、依赖注入

1、概念

依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖。用一句话来总结就是：没事你不要来找我，有事我会去找你。

AngularJS 提供了很好的依赖注入机制，包括五个核心组件：value、factory、service、provider、constant。

2、核心组件

① value

value 是一个普通的 JavaScript 对象，通过 .value 进行创建，用来在配置阶段向控制器传递值，注入控制器的时候，只需要在控制器的第二个参数里，写上对象名即可。

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);

// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

② factory

factory 是一个 JavaScript 函数，通常用来计算或返回值，在 service 和 controller 需要时创建。

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 factory "MathService" 用于两数的乘积 
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});

③ service

service 即服务，是一个函数或者对象，用来实现某些功能，比如获取当前页面URL地址、向后台请求数据等。

// 定义一个模块
var mainApp = angular.module("mainApp", []);
mainApp.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
mainApp.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

④ provider

provider 用来在配置阶段创建 service、factory等，并提供一个 factory 方法 get()，用来返回 value/service/factory。

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

⑤ constant

	constant 指常量，常用来在配置阶段传递数值。与 value 很像，但是它们有两个显著的区别：(1) value不可以在config里注入，但是constant可以。（2）value可以修改，但是constant不可以修改，一般直接用constant配置一些需要经常使用的数据。所以通常情况下，可以通过value()来注册服务对象或函数，用constant()来配置数据。

angular.module('myApp') .constant('apiKey','123123123')
.controller('MyController', function($scope, apiKey) {
// 可以像上面一样用apiKey作为常量
// 用123123123作为字符串的值
$scope.apiKey = apiKey;
});

二、路由

1、概念

AngularJS 路由主要有内置的 ngRoute 和一个基于 ngRoute 开发的第三方路由模块 ui-router，内置的 ngRoute 有时满足开发需求，使用 ui-router 可以解决很多原生 ngRoute 的不足。

AngularJS 的路由实际上是一种纯前端的解决方案，它的本质是：当请求一个url时，根据路由配置这个url，然后再请求模板片段，并插入到ng-view中。AngularJS的路由更倾向于通过改变url进行页面的局部刷新。

AngularJS 路由允许我们通过不同的 URL 访问不同的内容，可以实现多视图的单页 Web 应用。而且与普通的URL形式不同，在单页 Web 应用中 AngularJS 通过 #! + 标记 实现，例如：

http://runoob.com/#!/first
http://runoob.com/#!/second
http://runoob.com/#!/third

当我们点击上面的链接时，会发现向服务器请求的地址都相同，是 http://runoob.com/ 。因为 #! 号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现 #! 号后面内容的功能实现。 AngularJS 路由就通过 #! + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

我个人的理解是，本来之前原始的页面跳转是通过URL去后台请求相应的HTML文档，前台接收到文档之后，先将当前页面销毁，然后再重新加载、渲染这个请求来的页面，这样两个页面之间就没有任何关系，都是全新的页面，但这样会消耗很多资源。而路由的作用就是，页面跳转时，并不是将当前页面销毁，而是根据url去匹配写好的路由规则，根据这个规则去向后台请求对应的html模板片段，然后将这个HTML 模板插入到页面中的指定位置，重新生成DOM结构、渲染页面，此时的页面跟之前的页面其实是同一个页面，只不过是URL地址和页面内容发生了改变。这样就省略了销毁页面、新建页面等步骤，节省了大量的系统资源。而且可以通过路由实现页面的局部刷新。这就是所谓的多视图的单页面Web应用。

2、案例

<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
</head>
<body ng-app='routingDemoApp'>
    <h2>AngularJS 路由应用</h2>
    <ul>
        <li><a href="#!/">首页</a></li>
        <li><a href="#!/computers">页面1</a></li>
        <li><a href="#!/printers">页面2</a></li>
        <li><a href="#!/blabla">其他</a></li>
    </ul>
     
    <div ng-view></div>
    <script>
        angular.module('routingDemoApp',['ngRoute'])
        .config(['$routeProvider', function($routeProvider){
            $routeProvider
            .when('/',{template:'这是首页'})
            .when('/computers',{template:'这是页面1'})
            .when('/printers',{template:'这是页面2'})
            .otherwise({redirectTo:'/'});
        }]);
    </script>
</body>

案例解析：

① 通过 script 标签引入了实现路由的js文件。

② 将 ngRoute 模块作为主应用模块的依赖模块。

③ 使用 ng-view 指令将要显示的HTML内容插入到对应的元素中。

④ 利用 config 函数配置 $routeProvider，AngularJS 通过 r o u t e P r o v i d e r 来定义路由规则。 routeProvider 来定义路由规则。 routeProvider来定义路由规则。routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数: 第一个参数是URL 或 URL的正则规则。第二个参数是路由配置对象。

3、路由配置对象

路由配置对象是$routeProvider.when 函数的第二个参数，是一个对象，拥有template 、templateUrl等多条属性。

具体语法规则：

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

① template

如果我们只是在ng-view 中插入简单的HTML内容，则可以使用该参数，值只能是 string

$routeProvider.when('/computers',{template:'这是页面1'})

② templateUrl

如果我们需要在ng-view 中插入复杂的HTML内容，或者整个html文件，则需要使用该参数，值只能是 string

$routeProvider.when('/computers', {
    templateUrl: 'views/test.html',
});

③ controller

用来指明在上面定义的 html 内容中要执行的 controller 函数，生成新的 scope，值的类型是 function、string或array。

④ controllerAs

为上面指定的控制器定义别名，值只能是 string 。

⑤ redirectTo

定义重定向的地址。

⑥ resolve

指定上面 controller 所依赖的其他模块。配置resolve意味着在进入这个路由之前必须等待resolve中的数据返回，也就是说，在跳转目标路由之前先做一些额外工作去预加载数据，只有当数据准备妥当之后，才会去载入目标路由的模板和执行相应的controller。

实例

<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>
 
  
</head>
 
<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> Home </h1>
  </script>
 
  <script type="text/ng-template" id="embedded.about.html">
      <h1> About </h1>
  </script>
 
  <div> 
    <div id="navigation">  
      <a href="#!/home">Home</a>
      <a href="#!/about">About</a>
    </div>
      
    <div ng-view="">
    </div>
  </div>
</body>

码农公寓

一、依赖注入

1、概念

2、核心组件

① value

② factory

③ service

④ provider

⑤ constant

二、路由

1、概念

2、案例

案例解析：

3、路由配置对象

① template

② templateUrl

③ controller

④ controllerAs

⑤ redirectTo

⑥ resolve

实例

相关文章