anjularjs创建对象

发表于2022年6月24日作者admin上面是两个不同的控制器，尽管ListCtrl控制器里面没有department，但它依然可以访问到department上的变量值。

神奇的$scope

1.$scope是一个对象；

2.$scope是表达式的执行环境（或者叫做作用域）（它是视图和控制器之间的胶水）；

3.$scope提供了一些工具方法$watch（）/$apply（）；（这个是实时检测对象属性变化的，在修改数据时会立刻更新$scope，当$scope发生变化时会立刻重新渲染视图）；（这两个方法虽然提供了监视数据模型变化的能力，将数据模型的变化在整个应用范围内进行通知，但一般我们不太会手动去调用$scope.$apply（））

4.$scope是一个树形结构，与DOM标签平行；

5.子$scope会继承父$scope上的属性和方法；

6.每个angularJs应用只有一个$rootScope，一般位于ng-app上，$rootScope是所有$scope的最上层，（$rootScope也是angularJs中最接近全局作用域的对象，在$rootScope上附加太多业务逻辑并不是好主意，这与污染javaScript的全局作用域是一样的）

7.$scope也是实现双向数据绑定的基础；

8.可以用angular.element（$

0）.scope（）来进行调试；

9.$scope可以在控制器之间传播事件，可以向上$scope.$emit（）；也可以向下$scooe.$broadcast（）；最后附一张$scope的生命周期图：创建（创建一个作用域）链接（$scope对象会链接到视图中）更新（脏值检查）销毁（销毁作用域）

三、广播3.1相关概念通常作用域之间是不共享变量的，但作用域是有层次的，所以我们可以在作用域上通过广播来传递事件。

Angularjs中不同作用域之间可以通过组合使用$emit，$broadcast，，$on的事件广播机制来进行通信$emit的作用是将事件从子级作用域传播至父级作用域，包括自己，直至根作用域。格式如下：$emit（eventName，args）$broadcast的作用是将事件从父级作用域传播至子级作用域，包括自己。格式如下：$broadcast（eventName，args）$on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据。

（图/文/摄：太平洋汽车网问答叫兽）

『肆』 如何在angular渲染完dom以后执行js代码

在angular渲染完dom以后执行js代码的方法是使用init方法完成dom初始化，同时控制器中写入需要执行的js代码即可。
1、html代码：
<div
data-ng-controller="myCtrl"
data-ng-init="init()"></div>
2、定义的angularjs方法如下：
$scope.init
=
function
()
{
if
($routeParams.Id)
{
//创建一个新对象的js代码
createElement();
}
else
{
//创建一个新对象的js代码
createElement();
}
$scope.isSaving
=
false;
}
...
$scope.init();

『伍』 怎么在angularjs的config中使用service

Angular中有几种不同类型的services。每一种都有自己的独特用法。

需要记住的非常重要的一点是service总是一个单体，无论是哪种类型的service。
注释：单体是一种设计模式，它限制了每一个类仅能够实例化为一个对象。无论我们在什么地方注入我们的service，将永远使用同一个实例。
例子：
app.constant('fooConfig',{
config1: true,
config2: "Default config2" });

Constant是一个非常有用的service，它经常被用来在指令中提供默认配置。因此如果你正在创建一个指令，并且你想要在给指令传递可选参数的同时进行一个默认配置，一个Constant就是一个好办法。
作为一个constant，我们放入其中的值将不会改变。Contant service 基本上回事一个基本类型的值或者是一个对象。
例子：
app.value('fooConfig',{
config1: true,
config2: "Default config2 but it can change" });

一个value service有点像是一个constant但是它是可以被改变的。它也经常被用在一个指令上面，来进行配置。一个value service有点像是一个factory service的缩小版，它经常用来保存值但是我们不能在其中对值进行计算。
我们可以使用angular对象的extend方法来改变一个value service：
app = angular.mole("app", []);

app.controller('MainCtrl', function($scope, fooConfig) { $scope.fooConfig = fooConfig;
angular.extend(fooConfig, {config3: "I have been extended"});
});

app.value('fooConfig', {
config1: true,
config2: "Default config2 but it can changes" });
例子：
app.factory('foo', function() { var thisIsPrivate = "Private"; function getPrivate() { return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
});
// or..
app.factory('bar', function(a) { return a * 2;
});

Factory service是最普遍使用的service。它同样也非常容易理解。

一个Factory是一个能够返回任何数据类型的service。对于你如何创建它并没有什么可选项，你仅仅需要在其中返回一些东西即可。

正如前面所说的，所有的service类型都是单体，因此如果我们在一个地方修改了foo.variable，其他的地方也会相应的发生改变。
例子：
app.service('foo', function() { var thisIsPrivate = "Private"; this.variable = "This is public"; this.getPrivate = function() { return thisIsPrivate;
};
});

Service service 和factory差不多。它们之间的区别在于service会接收一个构造器，因此当你第一次使用它的时候，它将会自动运行newFoo()来实例化一个对象。一定要记住如果你在其他的地方也使用了这个service，它将返回同一个对象。
事实上，上面的代码和下面的代码等价：
app.factory('foo2', function() { return new Foobar();
}); function Foobar() { var thisIsPrivate = "Private"; this.variable = "This is public"; this.getPrivate = function() { return thisIsPrivate;
};
}

Foobar是一个类，我们在首次使用它的时候在我们的factory中将它实例化然后将它返回。和service一样，Foobar将只会实例化一次然后下次当我们再次使用factory时它将返回同一个实例。
如果我们已经有了一个类，并且我们想将它用在service中，我们只需要编写如下的代码：
app.service('foo3',Foobar);

Provider是factory的加强版。事实上，上一个例子中的factory代码等价于下面的provider代码：
app.provider('foo', function() { return { $get: function() { var thisIsPrivate = "Private"; function getPrivate() { return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
}

};

});

一个provider中应当由一个$get函数，其中的内容就是我们想要注入我们应用中的部分，因此当我们将foo注入一个控制器时，我们实际上注入的是$get函数。
既然factory如此简单，那我们为什么还要使用provider呢？因为我们可以在config阶段配置一个provider。因此我们可以编写下面的代码：
app.provider('foo', function() { var thisIsPrivate = "Private"; return {

setPrivate: function(newVal) { thisIsPrivate = newVal;
}, $get: function() { function getPrivate() { return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
}

};

});

app.config(function(fooProvider) { fooProvider.setPrivate('New value from config');
});

在这里我们将thisIsPrivate移到了我们的$get函数的外面，然后我们创建了一个setPrivate来在一个config函数中修改thisIsPrivate。为什么我们需要这样做？这难道不比在factory中添加setter要容易吗？除此之外，还有另外一个原因。

我们想要注入一个特定的对象但是我们想要提供一种方式来根据我们的需求进行一些配置。例如：一个service包含了一个使用jsonp的资源，我们想要配置具体使用的URL，或者我们想要使用一个第三方的service比如restangular来允许我们根据我们的需求来进行配置。

要注意到我们在config函数中放入的是nameProvider而不是name。在这里，我们实际上还是对name进行配置。

看到这里我们其实已经意识到了我们已经在应用中进行过一些配置了，像是$routeProvider以及$locationProvider，两者分别用来配置我们的路由了html5模式。

那么现在已经决定要使用前面的 foo service，但是其中还是缺少一个你想要的greet函数。你可以修改factory吗？答案是不行！但是你可以装饰它：
app.config(function($provide){ $provide.decorator('foo',function($delegate){ $delegate.greet = function(){ return "Hello, I am a new function of 'foo'";
}
});
});

$provide是Angular用来在内部创建我们的service的东西。如果我们想要使用它的话可以手动来使用它或者仅仅使用在我们的模块中提供的函数（我们需要使用$provide来进行装饰）。$provide有一个函数，decorator，它让我们可以装饰我们的service。它接收我们想要装饰的service的名字并且在回调函数中接收一个$delegate来代表我们实际上的service实例。

在这里我们可以做一切我们想要的事情来装饰我们的service。在上面的例子中，我们为我们原来的service添加了一个greet函数。接着我们返回了修改后的service。

经过修改以后，现在我们的factory中已经有了一个叫做greet的函数。

装饰一个service的能力是非常实用的，尤其是当我们想要使用第三方的service时，此时我们不需要将代码复制到我们的项目中，而只需要进行一些修改即可。

注意：constant service不能被装饰。

我们的services都是单体但是我们可以创建一个单体factory来创建新的实例。在你深入之前，记住Angular中的服务都是单体并且我们不想改变这一点。但是，在极少数的情况下你需要生成一个新的实例，你可以像下面这样做：
function Person(json){ angular.extend(this,json);
}

Person.prototype = {
update: function(){ this.name = "Dave"; this.country = "Canada";
}
};

Person.getById = function(id){ return new Person({
name: "Jesus",
country: "Spain" });
};
app.factory('personService',function(){ return {
getById: Person.getById
};
});

在这里我们创建了一个Person对象，它接收一些json数据来初始化对象。然后我们在我们的原型（原型中的函数可以被Person的实例所用）中创建了一个函数，并且在Person上直接创建了一个函数（就像是类函数一样）。

因此现在我们拥有了一个类函数，它将基于我们提供的id来创建一个新的Person对象，并且每一个对象都可以自我更新。现在我们仅仅需要创建一个能够使用它的service。

当每次我们调用personService.getById时，我们都在创建一个新的Person对象，因此你可以在不同的控制器中使用这个service，即便当factory是一个单体，它也能生成新的对象。

Service是Angular中最酷的特性之一。我们可以使用很多方法来创造它们，我们仅仅需要找到符合我们需求的方法然后实现它。

『陆』 angularjs里面的config有什么作用

在angularjs的config中使用service的方法：
它是一个可注入的构造器，在AngularJS中它是单例的，用它回在Controller中通信或者共享数据都答很合适
var app = angular.mole('app' ,[]);

app.config(function ($provide) {
$provide.service('movie', function () {
this.title = 'The Matrix';
});
});

app.controller('ctrl', function (movie) {
expect(movie.title).toEqual('The Matrix');
});

语法糖：
app.service('movie', function () {
this.title = 'The Matrix';
});

在service里面可以不用返回东西，因为AngularJS会调用new关键字来创建对象。但是返回一个自定义对象好像也不会出错。

『柒』 angularJS与如何与原生对象交互

首先来进行一个最基本的定义，由于我们需要数据绑定功能，我们将从一开始就require ngModel:
.directive('timePicker',function(){ var today = new Date(new Date().toString()); return { require: '?ngModel', link: function($scope,$element,$attrs,ngModel){ } }});
注意到我们需要涉及元素的实际实例，因此我们所有的代码基本上都位于linking函数中，我们在此完全不需要担心编译过程。我们同事也实例化了一个today变量来保存一个Date对象，以此在午夜十分更新。创建这个变量作为factory函数的一部分允许我们在多个实例之间分享一个today变量。注意，尽管这允许我们将内存的使用最小化，它也意味着如果我们的应用在半夜还依然再运行，我们的指令会开始提供不准确的结果。如果你打算将这个指令用于一个实时应用中，你最好创建另一个函数在第二天来临时更新这个值。现在，我们急需要看我们的controller函数：
link: function($scope.$element,$attrs,ngModel){ ngModel = ngModel || { "$setViewValue" : angular.noop }}
你以前可能也注意过这种模式。

『捌』 搭建angular的时候cannot get 是什么意思

我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。

1、链式调用
$http服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成HTTP请求的
配置内容。这个函数返回一个promise对象，具有success和error两个方法。

$http({

url:'data.json',

method:'GET'

}).success(function(data,header,config,status){

//响应成功

}).error(function(data,header,config,status){

//处理响应失败

});
2、返回一个promise对象

var promise=$http({

method:'GET',

url:"data.json"

});
由于$http方法返回一个promise对象，我们可以在响应返回时用then方法来处理回调。如果
使用then方法，会得到一个特殊的参数，它代表了相应对象的成功或失败信息，还可以接受两个
可选的函数作为参数。或者可以使用success和error回调代替。

promise.then(function(resp){

//resp是一个响应对象

},function(resp){

//带有错误信息的resp

});
或者这样：

promise.success(function(data,status,config,headers){

//处理成功的响应

});

promise.error(function(data,status,hedaers,config){

//处理失败后的响应

});
then()方法与其他两种方法的主要区别是，它会接收到完整的响应对象，而success()和error()则会对响应对
象进行析构。

3、快捷的get请求

①$http.get('/api/users.json');

get()方法返回HttpPromise对象。

还可以发送比如：delete/head/jsonp/post/put 函数内可接受参数具体参照148页

②以再发送jsonp请求举例说明： 为了发送JSONP请求，其中url必须包含JSON_CALLBACK字样。

jsonp(url,config) 其中config是可选的

var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");

4、也可以将$http当做函数来使用，这时需要传入一个设置对象，用来说明如何构造XHR对象。

$http({

method:'GET',

url:'/api/users.json',

params:{

'username':'tan'

});

其中设置对象可以包含以下主要的键：
①method
可以是：GET/DELETE/HEAD/JSONP/POST/PUT

②url:绝对的或者相对的请求目标
③params(字符串map或者对象)
这个键的值是一个字符串map或对象，会被转换成查询字符串追加在URL后面。如果值不是字符串，会被JSON序列化。
比如这个：

//参数会转为看name=ari的形式
$http({
params:{'name':'ari'}
});

④data(字符串或者对象)
这个对象中包含了将会被当作消息体发送给服务器的数据。通常在发送POST请求时使用。

从AngularJS 1.3开始，它还可以在POST请求里发送二进制数据。要发送一个blob对象，你可以简单地通过使用data参数来传递它。
例如：

var blob=new Blob(['Hello world'],{type:'text/plain'});

$http({

method:'POST',

url:'/',

data:blob

});
4、响应对象

AngularJS传递给then（）方法的响应对象包含了四个属性。
◇data
这个数据代表转换过后的响应体（如果定义了转换的话）
◇status
响应的HTTP状态码
◇headers
这个函数是头信息的getter函数，可以接受一个参数，用来获取对应名字值

例如，用如下代码获取X-Auth-ID的值：

$http({

method: 'GET',

url: '/api/users.json'

}).then (resp) {

// 读取X-Auth-ID

resp.headers('X-Auth-ID');

});
◇config
这个对象是用来生成原始请求的完整设置对象。

◇statusText（字符串）
这个字符串是响应的HTTP状态文本。

5、缓存HTTP请求
默认情况下，$http服务不会对请求进行本地缓存。在发送单独的请求时，我们可以通过向$http请求传入一个布尔值或者一个缓存实例来启用缓存。
$http.get('/api/users.json',{ cache: true })
.success(function(data) {})
.error(function(data) {});

第一次发送请求时，$http服务会向/api/users.json发送一个GET请求。第二次发送同一个GET请求时，$http服务会从缓存中取回请求的结果，而不会真的发送一个HTTP GET请求。
在这个例子里，由于设置了启用缓存，AngularJS默认会使用$cacheFactory,这个服务是AngularJS在启动时自动创建的。

如果想要对AngularJS使用的缓存进行更多的自定义控制，可以向请求传入一个自定义的缓存实例代替true。

『玖』 Service和Factory等的区别

service 服务的意思，主要提供一些没有实物的东西，如软件，物流等。
factory 工厂的意思，主要是生产制造加工一些实物性的东西。
单词意思不同，Service 指公共事业服务机构，Factory 指专事制造的工厂。
service 英[ˈsɜ:vɪs] 美[ˈsɜ:rvɪs]
n. 服役; 服务，服侍; 服务业; 维修服务;
vt. 检修，维修; 向…提供服务; 保养; 满足需要;
adj. 服务性的; 耐用的; 服现役的;
[例句]Britain still boasts the cheapest postal service
英国仍拥有最便宜的邮政服务系统。
[其他] 第三人称单数：services 复数：services 现在分词：servicing过去式：serviced 过去分词：serviced
factory 英[ˈfæktri] 美[ˈfæktəri]
n. 工厂，制造厂; <古>代理店;
[例句]He owned furniture factories in New York State.
他在纽约州有几家家具厂。
[其他] 复数：factories
Service
它是一个可注入的构造器，在AngularJS中它是单例的，用它在Controller中通信或者共享数据都很合适
var app = angular.mole('app' ,[]);

app.config(function ($provide) {
$provide.service('movie', function () {
this.title = 'The Matrix';
});
});

app.controller('ctrl', function (movie) {
expect(movie.title).toEqual('The Matrix');
});

语法糖：
app.service('movie', function () {
this.title = 'The Matrix';
});

在service里面可以不用返回东西，因为AngularJS会调用new关键字来创建对象。但是返回一个自定义对象好像也不会出错。
Factory
它是一个可注入的function，它和service的区别就是：factory是普通function，而service是一个构造器(constructor)，这样Angular在调用service时会用new关键字，而调用factory时只是调用普通的function，所以factory可以返回任何东西，而service可以不返回(可查阅new关键字的作用)
var app = angular.mole('app', []);

app.config(function ($provide) {
$provide.factory('movie', function () {
return {
title: 'The Matrix';
}
});
});

app.controller('ctrl', function (movie) {
expect(movie.title).toEqual('The Matrix');

『拾』 angularjs 判断对象是否为空

在AngularJs中判断对象是否为空，可以使用angular.equals，如下：