Angular基础学习-04

作者: Victor细节 | 来源:发表于2017-02-04 10:40 被阅读0次

    本节包括AngularJS 依赖注入及路由

    AngularJS 依赖注入

    什么是依赖注入

    wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。

    该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统找到依赖

    AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入:

    • value

    Value 是一个简单的 javascript 对象,用于向控制器传递值(配置阶段):

    • factory

    factory 是一个函数用于返回值。在 service 和 controller 需要时创建。

    通常我们使用 factory 函数来计算或返回值。

    • service
    • provider

    AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。

    Provider 中提供了一个 factory 方法 get(),它用于返回 value/service/factory。

    • constant

    constant(常量)用来在配置阶段传递数值,注意这个常量在配置阶段是不可用的。

    <html>
       
       <head>
          <meta charset="utf-8">
          <title>AngularJS  依赖注入</title>
       </head>
       
       <body>
          <h2>AngularJS 简单应用</h2>
          
          <div ng-app = "mainApp" ng-controller = "CalcController">
             <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
             <button ng-click = "square()">X<sup>2</sup></button>
             <p>结果: {{result}}</p>
          </div>
          
          <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
          
          <script>
             var mainApp = angular.module("mainApp", []);
             
             mainApp.config(function($provide) {
                $provide.provider('MathService', function() {
                   this.$get = function() {
                      var factory = {};
                      
                      factory.multiply = function(a, b) {
                         return a * b;
                      }
                      return factory;
                   };
                });
             });
                
             mainApp.value("defaultInput", 5);
             
             mainApp.factory('MathService', function() {
                var factory = {};
                  
                factory.multiply = function(a, b) {
                   return a * b;
                }
                return factory;
             });
             
             mainApp.service('CalcService', function(MathService){
                this.square = function(a) {
                   return MathService.multiply(a,a);
                }
             });
             
             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);
                }
             });
                
          </script>
          
       </body>
    </html>
    

    AngularJS 路由

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

    通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。

    通常我们的URL形式为 <code>http://runoob.com/first/page</code>,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如:

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

    接下来我们来看一个简单的实例:

    <html>
        <head>
            <meta charset="utf-8">
            <title>AngularJS 路由实例 - 菜鸟教程</title>
        </head>
        <body ng-app='routingDemoApp'>
         
            <h2>AngularJS 路由应用</h2>
            <ul>
                <li><a href="#/">首页</a></li>
                <li><a href="#/computers">电脑</a></li>
                <li><a href="#/printers">打印机</a></li>
                <li><a href="#/blabla">其他</a></li>
            </ul>
            
            <div ng-view></div>
            <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
            <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
            <script>
                angular.module('routingDemoApp',['ngRoute'])
                .config(['$routeProvider', function($routeProvider){
                    $routeProvider
                    .when('/',{template:'这是首页页面'})
                    .when('/computers',{template:'这是电脑分类页面'})
                    .when('/printers',{template:'这是打印机页面'})
                    .otherwise({redirectTo:'/'});
                }]);
            </script>
            
        </body>
    </html>
    

    让我们看一下代码是怎么实现的

    1、载入了实现路由的 js 文件:angular-route.js。

    2、包含了 ngRoute 模块作为主应用模块的依赖模块。

    angular.module('routingDemoApp',['ngRoute'])
    

    3、使用 ngView 指令。

    <div ng-view></div>
    

    该 div 内的 HTML 内容会根据路由的变化而变化。

    4、配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。

    module.config(['$routeProvider', function($routeProvider){
        $routeProvider
            .when('/',{template:'这是首页页面'})
            .when('/computers',{template:'这是电脑分类页面'})
            .when('/printers',{template:'这是打印机页面'})
            .otherwise({redirectTo:'/'});
    }]);
    

    AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

    $routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:

    • 第一个参数是 URL 或者 URL 正则规则。

    • 第二个参数是路由配置对象。

    路由设置对象

    AngularJS 路由也可以通过不同的模板来实现。

    $routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。

    路由配置对象语法规则如下:

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

    参数说明:

    template:

    如果我们只需要在 ng-view 中插入简单的 HTML 内容,则使用该参数:

    .when('/computers',{template:'这是电脑分类页面'})
    

    templateUrl

    如果我们只需要在 ng-view 中插入 HTML 模板文件,则使用该参数:

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

    以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。

    controller

    function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。

    controllerAs

    string类型,为controller指定别名。

    redirectTo

    重定向的地址。

    resolve

    指定当前controller所依赖的其他模块。

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.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>
    </html>
    

    额外自学扩展

    AngularJS的实例

    AngularJS的参考手册

    相关文章

      网友评论

        本文标题:Angular基础学习-04

        本文链接:https://www.haomeiwen.com/subject/qfujittx.html