这个AngularJS工厂的例子究竟如何?有些疑惑

时间:2015-12-12 17:44:35

标签: javascript angularjs json javascript-framework angularjs-factory

我是AngularJS的绝对新手,我正在研究它。我怀疑在Angular中使用工厂

我知道工厂是用于根据请求创建对象的模式。

因此在示例中有以下代码:

// Creates values or objects on demand
angular.module("myApp")     // Get the "myApp" module created into the root.js file (into this module is injected the "serviceModule" service
.value("testValue", "AngularJS Udemy")

// Define a factory named "courseFactory" in which is injected the testValue
.factory("courseFactory", function(testValue) {
    // The factory create a "courseFactory" JSON object;
    var courseFactory = {
            'courseName': testValue,    // Injected value
            'author': 'Tuna Tore',
             getCourse: function(){     // A function is a valid field of a JSON object
             alert('Course: ' + this.courseName);   // Also the call of another function
            }
          };    
    return courseFactory;       // Return the created JSON object
})

// Controller named "factoryController" in which is injected the $scope service and the "courseFactory" factory:
.controller("factoryController", function($scope, courseFactory) {
    alert(courseFactory.courseName);        // When the view is shown first show a popupr retrieving the courseName form the factory
    $scope.courseName = courseFactory.courseName;
    console.log(courseFactory.courseName);
    courseFactory.getCourse();  // Cause the second alert message
});

这是与HTML页面内的 factoryController 控制器关联的代码:

<div  ng-controller="factoryController"> 
    {{ courseName }} 
</div> 

所以我很清楚:

  • factoryController 使用 courseFactory 工厂,因为已注入

  • 打开页面时发生的第一件事是显示警报消息,因为它被称为:

    alert(courseFactory.courseName);
    
  • 然后将 $ scope.courseName 属性(在 $ scope对象内)放入 courseFactory的** courseName 字段的值 JSON对象)。

这是我的第一个怀疑。我认为工厂的定义是:

.factory("courseFactory", function(testValue)

我认为这意味着(如果我做错了断言,请纠正我)我的工厂被命名为 courseFactory ,并且基本上是一个重新启动 courseFactory JSON对象的函数。

所以这给我带来了一些困惑(我来自Java),因为在Java中我调用了一个工厂类,并获得了工厂创建的对象的实例。但在这种情况下,我觉得这样做:

$scope.courseName = courseFactory.courseName;

在我看来, courseName 直接由 courseFactory JSON对象检索,我没有使用 courseFactory

它究竟如何运作?为什么我不在工厂打电话? (或类似的东西)

4 个答案:

答案 0 :(得分:2)

简化事项创建在所有状态中可用的函数(和方法)有两种已知方法(将其视为在全局范围内创建函数),这些是工厂和服务。

您可能需要先阅读 Factory vs Service

  

在我看来,courseName是由。直接检索的   courseFactory JSON对象,我没有使用courseFactory。

实际上这是部分正确的,因为Angular使用DI概念(依赖注入),你必须注入你的工厂(默认返回一个对象,相应的函数作为属性),你不要这样做;您将无法使用工厂对象方法。

Angular并不神奇,只是大多数人都没有意识到JavaScript最基本的概念,特别是来自不同编程环境的开发人员,如C#,C ++或Java

答案 1 :(得分:1)

易。

当您在factory语句中返回courseFactory对象时,控制器中注入的courseFactory将成为THAT对象。因此,当您在控制器中执行$scope.courseName = courseFactory.courseName;时,实际上是在引用作为courseFactory注入控制器的返回对象。所以你不需要一个getter,因为你的控制器中的courseFactory已经是对象了。您可以在控制器中执行console.log(courseFactory);以查看courseFactory的内容。希望这会有所帮助。

答案 2 :(得分:1)

  

当Angular应用程序以给定的应用程序模块启动时,   Angular创建一个新的进样器实例,然后创建一个   食谱注册表作为核心定义的所有食谱的联合&#34; ng&#34;   模块,应用程序模块及其依赖项。那么注射器   在需要为其创建对象时咨询食谱注册表   你的申请。

参考。 https://docs.angularjs.org/guide/providers

答案 3 :(得分:1)

Factory是Singleton服务。当您在控制器或任何其他工厂中注入工厂时,您将获得您已定义的确切json对象。每次调用它时都不会创建任何新实例。工厂仅初始化一次