AngularJs基础

来源：互联网发布：大众汽车销售数据采集编辑：程序博客网时间：2024/05/23 01:25

AngularJS是JavaScript的一个框架、可以通过script加载到网页中。

AngularJS 指令

AngularJS指令是扩展HTML属性。带有前缀ng。

ng-app 指令初始化一个AngularJS应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到到应用程序。

ng-disabled 禁用给定的控制

ng-show 显示了一个给定的控制
ng-hide 隐藏了一个给定的控制
ng-click 表示一个AngularJS click事件

ng-repeat 指令一个会重复HTML的元素。（也是用于数组对象）

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">{{ x }}</li>
</ul>
</div>

使用.directive函数来自定义的指令。

<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>

AngularJS Scope（作用域）

scope是作用于HTML(视图)和javascript(控制器)之间的纽带。

scope是一个对象，有可用的属性和方法。

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});

</script>

1. Service服务

一般使用this直接操作数据，定义函数。

Service()方法适用于在功能控制器比较多的Service里面

** 需要用.config()来配置Service的时候不能用service()方法

2.Factory使用

Factory 一般用于创建一个对象然后再对这个对象添加方法与数据，最后将对象返回。

3.provide 使用

$provide服务负责告诉Angular如何创建一个新的可注入的东西。即服务。

用$provide来创建一个供应商。

详见：http://blog.csdn.net/evankaka/article/details/51114953

4.Service 、Factory、Provide三者的区别

（1）使用Factory就是创建一个对象，并对它添加属性。然后把这个对象返回出来。你把 service 传进 controller 之后，在 controller 里这个对象里的属性就可以通过 factory 使用了。

（2） Service 是用"new"关键字实例化的。因此，你应该给"this"添加属性，然后 service 返回"this"。你把 service 传进 controller 之后，在controller里 "this" 上的属性就可以通过 service 来使用了。

（3）Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前，先进行模块范围的配置，那就应该用 provider。

（4）Factory/service是第一个注入时才实例化，而provider不是，它是在config之前就已实例化好

AngualrJS中设置全局变量，即每个Controller中都可以访问的变量，主要有以下几种方法：

1.通过var 直接定义global variable，相当于直接用js。

2.使用Angularjs rootscope来实现定义全局变量。

3.使用Angularjs value 来设置全局变量。

4.使用Angularjs constant 来设置全局变量。

5.定义服务传值。

controller基础用法

AngularJS中的controller中文名就是控制器，它是一个JavaScript函数（类型/类），用来向视图的作用域（$scope）添加额外的功能。而且每个controller都有自己的scope，同时也可以共享他们父controller的scope内的数据。

实现功能：

1.给作用域对象设置初始状态

var mainApp=angular.module('mainApp',[]);

mainApp.controller('myController',function($scope){

$scope.inputValue="骑着蜗牛り闯世界"；

})

2.对作用域对象增加行为
var app = angular.module('myApp', []);

app.controller('myController', function($scope) {

$scope.myClick = function(){

alert("click");
}
});

页面使用

二、controller继承

这里说的继承一般说的是scope数据，这是因为子控制器的作用域将会原型继承父控制器的作用域。

三、controller之间共享数据

1.在父级controller中定义scope，子级公用。

2.将数据全局共享。

angularjs自身有二种，设置全局变量的方法，在加上js的设置全局变量的方法，总共有三种

3.service 依赖注入

angularjs最突出的特殊之一就是DI，也就是注入，利用service把需要共享的数据注入给需要的controller。

四、controller之间通信

基于事件的方式中我们可以里面作用的$on,$emit,$boardcast这几个方式来实现，其中$on表示事件监听，$emit表示向父级以上

的作用域触发事件， $boardcast表示向子级以下的作用域广播事件。

$emit只能向parent controller传递event与data

$brodacast只能向child controller传递event 与data

$on用于接收event和data

$emit和$broadcast可以传多个参数。$on也可以接收多个参数。

$on的方法中event事件参数，其对象的属性和方法如下：

事件属性目的event.targetScope发出或者传播原始事件的作用域event.currentScope目前正在处理的事件的作用域event.name事件名称event.stopPropagation()一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)event.preventDefault()这个方法实际上不会做什么事，但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。event.defaultPrevented如果调用

五、对于controller层的建议

1.controller层不要涉及太多的业务逻辑，可以将公用的抽取到Service里。

2.service层：主要负责数据交互和数据处理、处理一些业务领域里的逻辑。

3.controller层：主要负责初始化$scope的变量用于传递给view层、并处理一页面交互产生的逻辑。

4..当一个功能是设计远程API调用、数据集、业务领悟复杂逻辑、将会大量重复的运算方法时就可以考虑将代码以service

形式注入controller层。

5.controller 里的 $scope 是唯一页面数据来源。不要直接修改 DOM。

6.controller 不要在全局范围

六、 directive的定义及其使用方法

1. directive可以放置于元素名、属性、class、注释中。

2.directive指令解读

1.restrict（字符串）可选参数，指明指令在DOM里以什么形式声明;

取值有：E（元素）、A（属性）、C（类）、M（注释），默认值是Ａ，但是也可以几个值一起使用。比如：EA。

2. priority（数字）可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的执行。

3.terminal （布尔型），可选参数，可以被设置城true或false；若设置为true，则优先级低于此指令则无效，不会被调用（优先级相同的还是会执行的）

4.template（字符串或者函数），可选参数，一般是：

1.一段HTML文本，

2.一个函数，可以接受两个参数， tElement 和tAttrs（其中tElement是指使用此指令的元素，而tAttr则实例属性，它是一个由元素上所有的属性组成的组合（对象））

<hello-world2 title = '我是第二个directive'></hello-world2>

5.templateUrl（字符串或者函数）可选参数，可以是：

1.一个代表HTML文件路径的字符串

2.一个函数，可接受两个参数tElement和tAttrs（大致同上）

在本地开发时候，需要运行一个服务器，不然使用templateUrl会报错 Cross Origin Request Script（CORS）错误。

由于加载html模板是通过异步加载的，若加载大量的模板会拖慢网站的速度，这里有个技巧，就是先缓存模板。

6.replace（布尔值）,默认值为false。

7.scope

（1）默认值为false，表示继承父作用域。

（2）true。表示继承父作用域。并穿件自己的作用域。（子作用域）。

（3）{}。表示创建一个全新的隔离作用域。

7.2directive 在使用隔离 scope 的时候，提供了三种方法同隔离之外的地方交互。这三种分别是

1.@ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。

@方式局部属性用来访问 directive 外部环境定义的字符串值，主要是通过 directive 所在的标签属性绑定外部字符串值。

这种绑定是单向的，即父 scope 的绑定变化，directive 中的 scope 的属性会同步变化，而隔离 scope 中的绑定变化，父 scope 是不知道的。

2.& 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。

3.= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。

8.tansclude

如果不想让指令内部的内容被模板替换，可以设置这个值为true。一般情况下需要和ngTransclude指令一起使用。

如果指令使用了transclude参数，那么控制器无法正常监听数据模型的变化了。建议在链接函数使用$watch服务。

9.controller 可以是一个字符串或者函数。

（1）若为字符串，则将字符串当做是控制器的名字，来查找注册在应用中的控制器的构造函数。

（2）也可以在指令内部的定义为匿名函数。同样我们可以在这里注入任何服务（$log,$timeout等等）.

另外还有一些特殊服务可以注入

1.$scope,与指令元素相关联的作用域。

2.$element，当前指令对应元素

3.$attrs,由当前元素组成的对象。

4.$tansclude,潜入链接函数，实际执行被用来克隆元素和操作DOM函数。

**除非是用来定义一些可复用的行为，一般不推荐在这使用。

指令的控制器和link函数（后面会讲）可以进行互换。区别在于，控制器主要是是用来提供可在指令间进行复用的行为，但link链接函数只能在当前内部指令中定义行为，且无法在指令间复用。

10.controllersAs （可以设置控制器的别名）

11.require（字符串或数组）

另外可以在require的参数上加上以下的某个前缀。会改变查找控制器的行为;

1.没有前缀，指令会在自身提供的控制器的内部进行查找，如果找不到任何控制器，会抛出一个error。

2.？如果在当前指令没有找到所需要的控制器，则会将null传递给link链接函数的第四个参数。

3.^如果在当前的指令没有找到所需要的控制器，则会查找父元素的控制器。

4.？^组合

详见：http://blog.csdn.net/evankaka/article/details/51233555

阅读全文

0 0