javascript

AngularJS（7）两种搜索实现和配置实现

两种方法实现搜索功能，普通实现和指令实现。
全局配置的实现（公共配置）。

搜索功能实现

  1. 普通实现（Controller）

    • Html部分实现绑定

      1
      2
      3
      4
      5
      <div id="navbar" class="navbar-collapse collapse">
      	<form class="navbar-form navbar-right" ng-controller="SearchController" ng-submit="search()">
      		<input type="text" class="form-control" ng-model="input" placeholder="Search...">
      	</form>
      </div>

    • js暴露数据和方法
      暴露input参数，前台输入框中的value通过ng-model进行绑定;
      暴露search方法，前台form回车触发通过ng-submit进行绑定。

      1
      2
      3
      4
      5
      6
      7
      8
      .controller('SearchController',['$scope','$route',function($scope,$route){
      	$scope.input = "";
      	$scope.search = function(){
      		console.log($scope.input);
      		$route.updateParams({category:'search',q:$scope.input});
      	};
      }]);

  2. 指令实现

    • 创建指令
      创建一个js文件：search.js；
      通过directive创建指令；
      return返回指令内容；

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      (function(angular) {
          angular.module('moviecat.directives.search', [])
              .directive('search', ['$location', '$route', function($location, $route) {
                  return {
                      scope: {},
                      restrict: 'AE',
                      template: '<div id="navbar" class="navbar-collapse collapse"><form class="navbar-form navbar-right" ng-submit="search()"><input type="text" class="form-control" ng-model="text" placeholder="Search..."></form></div>',
                      replact: true,
                      link: function($scope, iElm, iAttrs, controller) {
                          $scope.text = "";
                          $scope.search = function() {
                              $route.updateParams({ category: 'search', q: $scope.text });
                          };
                      }
                  };
              }]);
      })(angular);

    • 引用指令
      在入口函数或使用此指令的地方，把search指令的模块，加入依赖模块。

      1
      2
      3
      4
      5
      angular.module('moviecat', [
          ...
          'search指令模块名称'
          ...
      ]);

    • 使用指令
      在使用的地方直接写入标签，加入search属性即可

      1
      2
      3
      <div search></div>
      或者
      <search></search>

全局配置

angular提供了constant命令进行配置常量，通过键值对写入常量。
通常把请求链接，页码等全局的常量写入其中，方便维护修改。

  • 创建

    1
    2
    3
    4
    5
    6
    angular.module('moviecat', [])
    /*为模块定义一些常量*/
    .constant('AppConfig', {
    	pageSize:10,
    	doubanMovieApi:'http://api.douban.com/v2/movie/'
    })

  • 使用
    在使用的地方，进行注入即可。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    module.controller('MovieListController', [
        '$scope',
        ...
        'AppConfig',
        function($scope, AppConfig) {
            var count = AppConfig.pageSize;
            ...
        }
    ]);