您的位置：首页 > Web前端 > JavaScript

angular js的一些操作

2015-09-05 19:36 567 查看

angular使开发应用变得简单，降低构建复杂应用难度！但是它依赖注入！
anjular不操作dom节点而是一个作用域

要操作作用域就要先绑定，如何绑定一个作用域呢？

首先在页面引入

<script src="anjular.js">文件！

<html ng-app></html>意思就是把整个html页面当做作用域！

绑定作用域是“ng-app”

绑定好作用域就可以对作用域内的绑定表达式进行数据绑定

<body>
hello{{“word”}}
</body>

word 就是一个表达式！{{}}内的！

例子：

<input ng-model="name" type="text" placeholder="请输入文字">{{name}}

会发现文本框后面会出现和文本框内容一样的数据！这就是数据绑定！！ng-model=“绑定的名字”

双向数据绑定：（bi-directional）意味着如果试图改变了某个值，数据模型会通过检测来相互改变！创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。这个功能可以说是AngularJS中最重要的功能之一

angular应用的解析MVC模式！
m--是指模型，模型是从angular js作用域对象的属性！
v--是指模板，也就是我们的试图、可见部分！
c--是指控制器，应用程序逻辑和行为！

模块的定义：angular js怎样定义模块呢?angular.module()方法来申明模块，这个方法可以接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是被注入到模块中的列表对象。写法-----anjular.module("app的名字",[]) 如果调用这个方法只传入了一个参数，那么就不是声明模块而是引用模块

anjular js的标准写法！

<script type="text/javascript">
var app=angular.module("app的名字"[]);
app.controller("ng-controller的名字"，["$scope",function($scope){
$scope.name="输出表达式的内容"}])
</script>

作用域：

scope是整个angularjs的核心组成部分！

$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。

anjularjs启动并生成视图时，会将跟ng-app元素同$rootscope进行绑定。$rootscope是所有$scope对象的上层。$rootScope是AngularJS最接近于全局对象的函数，所以要是在它身上绑定了很多业务逻辑并不是很好的事情--回想一下js中全局作用域的缺点

$scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性。

$scope对象在AngularJS中充当数据模型，但与传统的数据模型不一样， $scope并不负责处理和操作数据，它只是视图和HTML之间的桥梁，它是视图和控制器之间的传送器。

<script>
var app=angular.module("ng-app name"[]);
app.controller("选择器controller的名字"["$scope","$rootscope"function($scope,$rootscope){
$scope.name="zhangsan";
$rootScope.name2="hehe";
}])
//控制器不同     $scope  局部
app.controller("youController",['$scope','$rootScope',function($scope,$rootScope){
$rootScope.name2="nihao";

}])
</script>

输出的结果为 nihao nihao

作用域的作用：

提供观察者以监视数据模型的变化；
可以将数据模型的变化通知给整个应用，甚至是系统外的组件；
可以进行嵌套，隔离业务功能和数据；
给表达式提供运算时所需的执行环境。

$scope的声明周期：
1 创建：在创建控制器或指令时， AngularJS会用$injector创建一个新的作用域，并在这个新建的控制器或指令运行时将作用域传递进去。 2链接：当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。 3 更新：当事件循环运行时，它通常执行在顶层$scope对象上（被称作$rootScope），每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化， $scope对象就会触发指定的回调函数。 4 销毁：当一个$scope在视图中不再需要时，这个作用域将会清理和销毁自己

控制器的含义 angularjs中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自定义行为。

模块化创建

注意点1：使用ng-controller指令可以将一个控制器对象附加到DOM元素上，注意点2，当我们创建了模块之后我们的ng-app不需要放到全局上面去，而是放在了需要的地方

div ng-app="myApp"><h1 ng-controller="myController">{{say}}</h1></div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller("myController",["$scope",function($scope){
$scope.say="doubi"

}]）
</script>

只需要创建控制器作用域中的函数，就可以创建在视图中使用的自定义操作。

内置指令ng-click可以将按钮

、连接等dom元素点击事件绑定！

例子：
<body ng-app="myapp"> <div ng-controller="firstcontroller">

点击button按钮添加，点击a减少

<button ng-click="add(1)" class="button">Add <a ng-click="subtract(1)" class="button alert">Subtract

<body>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('FirstController',["$scope",function($scope){

$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };

}]
</script>

AngularJS允许在$scope上设置包括对象在内的任何类型的数据，并且在视图中还可以展示对象的属性。

<div ng-app="myApp">
<div ng-controller="myController">
<p>{{people.name}}</p>
</div>
</div>
<script type="text/javascript">
angular.module('myApp', []).controller("myController",function($scope){  //注意这是简写形式
$scope.people={
name:"zhangsan"
};
});
</script>

控制器嵌套（作用域包含作用域）

所有的作用域都通过原型继承而来，也就是说它们都可以访问父级作用域，AngularJS在当前作用域中无法找到某个属性时，便会在父级作用域中进行查找。

<div ng-app="myApp">
<div ng-controller="parController">
<div ng-controller="chiController">
<h1  ng-click="say()">say hello</h1>
{{people}}
</div>
</div>
</div>
<script type="text/javascript">
var app=angular.module("myApp",[])
app.controller("parController",["$scope",function($scope){
$scope.people={gender:"male"}
]])     app.controller("chiController",function($scope){
$scope.say=function(){
$scope.people.name="zhangsan"
}
})
</script>

表达式

表达式在AngularJS应用中被广泛使用，因此深入理解AngularJS如何使用并运算表达式是非常重要的。想想我们之前有没有用过表达式呢？{{}}——这就是一个基础的表达式它的用法是使用{{}}将一个变量绑定到了$scope对象上边，然后在视图中取出来使用当用$watch进行监听时， AngularJS会对表达式或函数进行运算。这里涉及到一个新的是知识点：$watch——我们根据名字就知道他是做什么用的:监视——在这里它的作用是对模型中的数据进行监视，并且当数据发生改变的时候做相应的响应，AngularJS为我们提供了一个非常方便的$watch方法，它可以帮助我们在每个scope中监视其中的变量

<div ng-app="watch">
<input ng-model="name type="text”>
<div>change count :{{count}}</div>
</div>

<script>
angular.module("watch",[]).run（["$rootscope",function($scope){
$scope.count = 0;
$scope.name = 'Alfred';
$scope.$watch('name',function(){
$scope.count++;

}]）
</script>

过滤器

过滤器用来格式化需要展示给用户的数据。 AngularJS有很多实用的内置过滤器，同时也提供了方便的途径可以自己创建过滤器。

在HTML中的模板绑定符号{{ }} 内通过| 符号来调用过滤器 {{ expression | filter }}

自带过滤器案例

<div ng-app="myApp">
<div ng-controller="myController">
{{name | uppercase}}
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.name="zhangsan"
});
</script>

在控制器中调用过滤器：

<div ng-app="myApp">
<div ng-controller="myController">
{{name}}
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController',['$scope','$filter',function($scope,$filter){
$scope.name=$filter('uppercase')("lisi")
}]);
</script>

表达式{{名字 | 过滤名字}}

1:字符串返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素，在参数前加!符号。 2:对象 AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较，如果属性值是字符串就会判断是否包含该字符串。如果我们希望对全部属性都进行对比，可以将$当作键名。 3:函数对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回

返回包含数组中所有包含e的单词！

<div ng-app="myApp">
<div ng-controller="myController">
{{ data | filter:'e' }}
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController',function($scope){
$scope.data=['Ari','Lerner','Likes','To','Eat','Pizza']
});
</script>

对对象做过滤

<div ng-app="myApp">
<div ng-controller="myController">
{{ data | filter:{'name':'zhangsan'} }}
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController',function($scope){
$scope.data= [{
'name': 'zhangsan',
'City': 'chengdu',
'favorite food': '火锅'
},{
'name': 'lisi',
'City': 'beijing',
'favorite food': '烤鸭北京'
}]
});
</script>

limitTo过滤器 limitTo过滤器会根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过传入的正负值来控制从前面还是从后面开始截取。

例如：

<div ng-app="myApp">
<div ng-controllter="mycontroller">
{{ data | limitTo:3}}
</div>
</div>
<script>
var app=angular.module("myApp",[])
app.controller("mycontroller"，function（$scope）{
$scope.data="helloword"
})
</script>

输出的结果为==hel

orderBY过滤器 orderBy过滤器可以用表达式对制定的数组进行排序。orderBy可以接受两个参数，第一个是必须的，第二个是可选的。

第一个参数：数组在排序表达式中使用数组元素作为谓词。对于与表达式结果并不严格相等的每个元素，则使用第一个谓词。

第二个参数：
参数用来控制排序方向是否是逆向！

例子：

<div ng-app="myapp">
<div ng-controller="mycontroller">
{{ data | orderBy:'name' }}
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController',function($scope){
$scope.data= [{
'name': 'zhangsan',
'City': 'chengdu',
'favorite food': '火锅'
},{
'name': 'lisi',
'City': 'beijing',
'favorite food': '烤鸭北京'
}]
});

自定义过滤器 这个过滤器是将你类容中的第一个字母大写注意：过滤器本质上是一个会把我们输入的内容当作参数传入进去的函数

<div ng-app="myapp">
<div ng-controller="mycontroller">
{{"hello word" | lowercase | myfilter}}
</div>
</div>
<script>
angular.module("myapp",[])
.filter("myfilter",function(){
return function(input){
if(input){
return input[0].toUpperCase()+input.slice(1)
}
}
})
</script>

指令

ng-disabled

使用ng-disabled可以把disabled属性绑定到一下表单输入框上：

<input>(text/checked/radio/number/url/email/submit)

<tes=xtarea>

<select>

<button>

ng-select用来将数据同HTML的 select 元素进行绑定。这个指令可以和ng-model 以及ng-options指令一同使用，构建精细且表现优良的动态表单.

no-options的值可以是一个内涵表达式注意上边的option位置是怎么写得？接受一个数组或对象，并对它们进行循环，将内部的内容提供给select标签内部的选项

angular.module("myapp",[])
.controller("mycontroller"[$scope,function($scope){
$scope.cities=[
{name:'seattle'}
{name:'San Francisco'},
{name: 'Chicago'},
{name: 'New York'},
{name: 'Boston'}}
]

}])

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航