码迷,mamicode.com
首页 > Web开发 > 详细

angular js的一些操作

时间:2015-09-05 20:43:02      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:

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‘}}
]

}])

angular js的一些操作

标签:

原文地址:http://www.cnblogs.com/12315-/p/4783742.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!