angular js的一些操做

时间  2019-11-19
标签 angular 一些 栏目 AngularJS 繁體版
原文   原文链接

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

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

首先在页面引入java

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

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

绑定做用域是“ng-app”angularjs

绑定好做用域就能够对做用域内的绑定表达式进行数据绑定web

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

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

例子：数组

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

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

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

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

}])
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程