Javascript AngularJS应用程序组件(模块、工厂、控制器)定义是如何工作的?
我是AngularJS中的Absolutely新手,JavaScript中的新手,我对教程中显示的这个示例有以下疑问:Javascript AngularJS应用程序组件(模块、工厂、控制器)定义是如何工作的?,javascript,angularjs,javascript-objects,angularjs-controller,angularjs-factory,Javascript,Angularjs,Javascript Objects,Angularjs Controller,Angularjs Factory,我是AngularJS中的Absolutely新手,JavaScript中的新手,我对教程中显示的这个示例有以下疑问: // 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("t
// 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
});
我很清楚它的作用:它创建了一个表示我的应用程序的角度模块,名为myApp。然后定义一个值、一个工厂(返回courseFactoryJSON对象)以及最后一个控制器,其中注入了前一个工厂
我认为我不清楚的是这些“组件”声明的语法
所以,在我看来,“语法”是这样的:
angular.module("myApp").value(VALUE DECLARATION).factory("courseFactory", function(testValue) { RETURN THE JSON OBJECT IMPLEMENTING THE FACTORY }).controller("factoryController", function($scope, courseFactory) { IMPLEMENT THE CONTROLLER });
var myModule;
myModule = angular.module('myApp'); // Returns the module
myModule = myModule.value(...); // Registers a value and returns the module
myModule = myModule.factory(...); // Registers a factory and returns the module
因此,我的疑问是:为什么所有的“组件”(值声明、工厂实现和控制器实现)都定义在“凝聚链”中,其中“.”符号将这些组件添加到链中
这到底是什么意思
我认为它会给一个对象或类似的东西添加一个字段,但对我来说似乎很奇怪
因此,首先是angular对象(它是一个对象还是什么?),在其上添加了模块(“myApp”)“组件”(这似乎符合逻辑,因为我正在向angular添加一个模块)
然后添加一个值作为该模块的属性。而且它似乎也有意义,因为我正在向特定的模块添加值
但是为什么要添加一个工厂作为该值的字段,然后添加控制器作为该工厂的字段
我想我错过了什么
我错过了什么?AngularJS“组件”定义如何实际工作?以下内容:
angular.module("myApp")
angular.module("myApp").value("testValue", "AngularJS Udemy");
将返回表示模块的对象
您可以通过执行以下操作来检查:
console.log(angular.module("myApp"));
您将看到此对象有一系列方法,例如value
、controller
和factory
这解释了为什么您可以执行以下操作:
angular.module("myApp")
angular.module("myApp").value("testValue", "AngularJS Udemy");
诀窍在于value方法还返回模块对象,以便您可以继续链:
angular.module("myApp").value("testValue", "AngularJS Udemy").factory(...)
模块对象上的其他方法也是如此
让方法像这样返回主对象是允许这种链接的常见技术
你可以这样读:
angular.module("myApp").value(VALUE DECLARATION).factory("courseFactory", function(testValue) { RETURN THE JSON OBJECT IMPLEMENTING THE FACTORY }).controller("factoryController", function($scope, courseFactory) { IMPLEMENT THE CONTROLLER });
var myModule;
myModule = angular.module('myApp'); // Returns the module
myModule = myModule.value(...); // Registers a value and returns the module
myModule = myModule.factory(...); // Registers a factory and returns the module