2019独角兽企业重金招聘Python工程师标准>>>

AngularJS简介

AngularJs是Google下一代前端框架，基于mvc架构，它提供的功能如下：

1、解耦应用逻辑，数据模型和视图

2、Ajax

3、依赖注入

AngularJs初探

新建html页面，并导入angular.js文件（html中需要加上ng-app这个内置指令才能让angularjs起作用）

<!DOCTYPE html>
<!-- demo1 数据绑定-->
<html ng-app>
<head><title>angularJS</title><meta charset="utf-8"/><script type="text/javascript" src="angular.js"></script>
</head>
<body>
<input ng-model="name" type="text" placeholder="请输入用户名" />
<h1>hello：{{name}}</h1>
</body>
</html>

该示例演示了一个基本但是非常棒的功能：数据绑定

实际上，在该程序中默认有一个控制器（controller）存在，在用户输入时会去请求该控制器并反向给{{}}表达式里面的变量赋值，具体控制器我们将在后面讲解。

控制器初探

可以自定义多个控制器，并为每个区域设置一个单独的控制器。

当某些元素在该控制器下时，就可以通过{{}}表达式得到该控制器作用域中的值。

<!DOCTYPE html>
<!-- demo2 简单数据绑定-->
<html ng-app>
<head><title>angularJS--简单数据绑定</title><meta charset="utf-8"/><script type="text/javascript" src="angular.js"></script><script type="text/javascript">/**$scope是数据模型对象，它的属性可以被视图访问，也可以同控制器进行交互$timeout是angular自带的定时器*/function mycontroller($scope,$timeout){$scope.uname="akx";$timeout(function(){$scope.uname="angel";},2000);}</script>
</head>
<body><!-- ng-controller声明所有被包含的元素属于某个控制器,该控制器必须被定义 --><div ng-controller="mycontroller"><input ng-model="uname" type="text"/><h1>{{uname}}</h1></div>
</body>
</html>

假如$scope作用域中的值放在该控制器外面，则不会访问到！

模块用法

有时候把函数定义为全局的容易造成命名冲突或不好维护，所以很多时候我们需要把函数聚集在模块里

定义模块的语法是：angular.module('myapp',[]);

其中第一个参数是模块名，第二个参数列表是所需要依赖的模块名

示例代码如下：

<!DOCTYPE html>
<!--  在使用模块时，html标签后面不能使用ng-app -->
<html>
<head><title>angularJS--模块</title><meta charset="utf-8"/><script type="text/javascript" src="angular.js"></script>
</head>
<body><div ng-app="myapp"><div  ng-controller="MyController"><h1>{{clock}}</h1></div></div>
</body>
</html><script type="text/javascript">//第一个参数为模块名称//第二个参数为依赖的模块名称angular.module("myapp",[]).controller("MyController",function($scope){var nowtime=function(){$scope.clock=new Date();}setInterval(function(){//触发修改model$scope.$apply(nowtime);nowtime();},1000);})</script>

事件控制器

<!DOCTYPE html>
<!-- demo3 控制器 -->
<html ng-app="MyApp">
<head><title>angularJS--控制器</title><meta charset="utf-8"/><script type="text/javascript" src="angular.js"></script>
</head>
<body><div ng-controller="MyController"><input type="button" ng-click="add(2)" value="点击"/><div ng-click="add(3)" style="border: 1px solid">点击div</div><span>{{counter}}</span></div><br/>
</body>
</html><script type="text/javascript">var app=angular.module("MyApp",[]).controller("MyController",function($scope){$scope.counter=0;//通过ng-click 执行add$scope.add=function(count){$scope.counter+=count;}})</script>

当点击按钮时，会调用所属模块--控制器的add方法

控制器的作用域是可以嵌套的，默认情况下，AngularJS在当前作用域中无法找到某个属性时，

便会在父级作用域中进行查找。示例代码如下

网页代码：

<div ng-controller="ParentController"><div ng-controller="ChildController"><input type="button" ng-click="insertProp()" value="嵌套作用域测试"/><span>{{person}}</span></div><span>{{person}}</span></div>

控制器代码:

app.controller("ParentController",function($scope){$scope.person={uname:"testangu"}});app.controller("ChildController",function($scope){$scope.insertProp=function(){$scope.person.sex="男";}})

根据运行效果会发现，子作用域是引用到了父作用域的对象（但是对于字符串，数字等基本数据类型仅仅只有值得拷贝）

表达式

angularjs表达式的语法是：{{}}，在默认情况下，该表达式即可以取出$scope或者ng-model等作用域中的值，

在某些时候{{}}比想象中的更加强大，比如做插值处理！

<!DOCTYPE html>
<!-- demo5 表达式 -->
<html ng-app="MyApp">
<head><title>angularJS--表达式</title><meta charset="utf-8"/><script type="text/javascript" src="angular.js"></script>
</head>
<body>
<div ng-controller="myinter"><input ng-model="to" type="text" /><br/><textarea ng-model="emailBody"></textarea><br/><pre>{{previewText}}</pre>
</div>
</body>
</html>

   <script type="text/javascript">var app=angular.module("MyApp",[]);//插值字符串示例监控emailBody，在此文本域里输入{{tso}}时，会被替换成ng-model="to"的内容app.controller("myinter",function($scope,$interpolate){$scope.$watch("emailBody",function(body){if(body){var template=$interpolate(body);$scope.previewText=template({tso:$scope.to});}})})</script>

当我们再emialBody中输入{{tso}}时，会被马上替换成ng-model="to"的内容

过滤器

过滤器可以做一些格式化或者过滤子集的操作

angularJS内置了很多，比如字符串，数字格式，日期
angularJS提供的filter过滤器可以从给定数组中选择一个子集，并将其生成一个新数组返回

大小写：{{uname | lowercase}}

数字小数位：{{num | number:2}}

数组过滤 :{{['java','javascript','c++','ruby'] | filter:'java'}}

也可以用该方式过滤json数组

limitTo:截取字符串或数组 {{"hello java world" | limitTo:5}}

自定义过滤器：

示例1：限制字符串长度大于3的元素

//这里run方法类似于初始化方法（main方法）不能使用$scope

var app=angular.module("MyApp",[]);

app.run(function($rootScope){

$rootScope.lengthF=function(str){

return str.length>3;

}

});

示例2：首字母大写

app.filter('upFirst',function(){

return function(input){

if(input){

return input[0].toUpperCase()+input.slice(1);

}

});

转载于:https://my.oschina.net/CandyDesire/blog/396725

[AngularJS]--基本用法相关推荐

AngularJS指令封装高德地图组件
2019独角兽企业重金招聘Python工程师标准>>> 1 概述公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图 ...
XSS-Lab闯关笔记
xss-lab项目地址:https://github.com/rebo-rn/xss-lab xss学习文章:https://wizardforcel.gitbooks.io/xss-naxienia ...
onSenUI 常用UI组件笔记
1.carousel 轮播图的用法总结界面方法: 1.用于满屏 <ons-carousel fullscreen swipeable overscrollable auto-scroll> ...
转载：自动驾驶之软件定义汽车
写文章自动驾驶之软件定义汽车慕容衣金融从业者关注他 1 人赞同了该文章软件定义汽车时代下,智能汽车软件架构逐步向 SOA 迈进,软件成为智能汽车差异化的核心汽车智能化的大趋势下, ...
AngularJS中Directive指令系列 - 基本用法
参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...
AngularJS select中ngOptions用法详解
一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in array select as label for value in ...
angularjs directive scope变化为啥html,学习AngularJs:Directive指令用法（完整版）
本教程使用AngularJs版本:1.5.3 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR ...
AngularJS中$timeout和$interval的用法详解
1. 先将$interval,$timeout,作为参数注入到controller中,例如rds.controller('controllerCtrl', ['app', '$scope','$htt ...
AngularJS中ng-options简单用法及预选项失败的原因
刚刚接触AngularJs,记录一下ng-options的使用. 1.构造key-value数据 $scope.types = [{id:"1",type:"AA&quo ...

[AngularJS]--基本用法

AngularJS简介

[AngularJS]--基本用法相关推荐

最新文章

热门文章