20、AngularJs知识点总结 part-2
1、作用域
当你在angularJs中创建控制器时,可以将$scope对象作为一个参数进行传递;
scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
AngularJS 应用组成如下:
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。
- Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
scope 是模型。
举例:通过angularJs在js中的一些方法对变量进行赋值:
<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>
当我们使用 ng-repeat 指令时,每个重复项都访问了当前的重复对象:
举例:
每个 <li> 元素可以访问当前的重复对象,这里对应的是一个字符串, 并使用变量 x 表示。
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat='x in list'>{{x}}</li>
</ul> </div> <script>
var app = angular.module("myApp", []);
app.controller('myCtrl', function ($scope) {
$scope.list = ['kunyashaw', 'berryshine', 'niu', 'abei'];
})
</script>
所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat='x in list'>{{lastName}}{{x}}</li>
</ul> </div> <script>
var app = angular.module("myApp", []);
app.controller('myCtrl', function ($scope,$rootScope) {
$scope.list = ['kunyashaw', 'berryshine', 'niu', 'abei'];
$rootScope.lastName='zhang';
})
</script>
2、AngularJs控制器
AngularJS 应用程序被控制器控制,ng-controller 指令定义了应用程序控制器;
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建
<div ng-app="myApp" ng-controller="ctl">
<input ng-model="FirstName">
<input ng-model="LastName"> <p>姓名为:{{FirstName +'--' +LastName}}</p> </div> <script>
var app = angular.module('myApp', []);
app.controller('ctl', function ($scope) {
$scope.FirstName = 'zhang';
$scope.LastName = 'zhonglei';
})
</script>
AngularJS 应用程序由ng-app定义,应用程序在<div>内运行;ng-controlle='ctl'属性是一个angularJS指令,用于定义一个控制器;ctl函数是一个javaScript函数;
AngularJs使用$scope对象(是一个应用对象,属于应用 变量和函数)来调用控制器;控制器的$scope用来保存AngularJS的对象,控制器在作用域 中创建了两个属性(FirstName、LastName),ng-model指令绑定输入域到控制器的属性.
下面的例子是调用函数:
<div ng-app="myApp" ng-controller="ctl">
<input ng-model="FirstName">
<input ng-model="LastName"> 姓名为:{{fullName()}} </div>
<script>
var app = angular.module('myApp', []);
app.controller('ctl', function ($scope) {
$scope.FirstName = 'zhang';
$scope.LastName = 'zhonglei';
$scope.fullName= function (){
return $scope.FirstName +" "+ $scope.LastName;
}
})
</script>
3、AngularJS过滤器
<div ng-app="myApp" ng-controller="ctl">
<input ng-model="FirstName">
<input ng-model="LastName"> <br/>
<br/>
大写姓名为:{{FirstName+LastName | uppercase }} <br/>
小写姓名为:{{FirstName+LastName | lowercase }} <br/>
<!-- currency 过滤器将数字格式化为货币格式:-->
总价格为:{{price*num | currency}} <br/>
<!-- 对列表List中的元素进行排序-->
<ul>
<li ng-repeat="x in list | orderBy">{{x}}</li>
</ul> <br/>
<!-- 找出列表中包含i的元素-->
<p ng-repeat="x in list| filter:'i'">{{x}}</p> </div>
<script>
var app = angular.module('myApp', []);
app.controller('ctl', function ($scope) {
$scope.FirstName = 'zhang';
$scope.LastName = 'zhonglei'; $scope.price = 20;
$scope.num = 10; $scope.list = [
'adidas', 'nike', 'lv', 'doubleStar']; })
</script>
4、service
<div ng-app="myApp" ng-controller="myCtrl"> <p> url is {{Url}} </p> <h1> htips:{{tips}}</h1>
<b> double 5 is {{textInService}}</b> <div class="well">
<pre>
{{html}}
</pre>
</div> </div> <script>
var app = angular.module('myApp', []); app.service('funcDefine', function () {
this.myFunc = function (x) {
return x * 2;
}
}); app.controller('myCtrl', function ($scope, funcDefine, $location, $http, $timeout, $interval) {
// 得到当前网页的url地址
$scope.Url = $location.absUrl(); // 自定义服务,注意自定义时,函数的名字前是没有美元符号的
$scope.textInService = funcDefine.myFunc(5); // http服务
$http.get("index.html").then(function (response) {
console.log(response.data);
$scope.html = response.data;
}) // 定时服务-1(timeout)
$scope.tips = 'hello';
$timeout(function () {
$scope.tips = 'world';
}, 2000); // 定时服务-2(inteval)
var count = 1;
$interval(function () {
count++;
$scope.tips = count;
}, 1000) })
</script>
20、AngularJs知识点总结 part-2的更多相关文章
- Ionic/Angularjs 知识点解析
Ionic/Angularjs 知识点解析 angular-ui-router(状态跳转) state的定义:(在app.js的config下配置) $stateProvider .state('ap ...
- Java高级工程师需要弄明白的20个知识点
一般的程序员或许只需知道一些JAVA的语法结构,能对数据库数据进行CRUD就可以应付了.但要成为JAVA(高级) 工程师,就要对JAVA做比较深入的研究,需要不断学习进步,以下对高级工程师需要突破的知 ...
- python全栈开发 * 20 继承知识点汇总 * 180530
20 面向对象的三大特征之一(继承,多态,封装) -----继承 1.继承的定义: 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类;父类又可称为基类或超类,新建的类称为派生 ...
- 21、AngularJs知识点总结 part-3
1.选择框select 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,也可以使用ng-repeat 指令来创建下拉列表: 区别:ng ...
- 19、AngularJs知识点总结 part-1
1.AngularJs AngularJs是一款JavaScript开源库,由Google维护,用来协助单一页面应用程序: AngularJs的目标是通过MVC模式增强基于浏览器的应用,使开发和测试变 ...
- angularjs知识点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Top 20 JavaScript Projects of 2017
https://www.youtube.com/watch?v=SUMn8y3pi28 20. AngularJS 1 19. Passport 18. Pug 17. Socket.IO 16. J ...
- js面试题知识点全解(一作用域和闭包)
问题: 1.说一下对变量提升的理解 2.说明this几种不同的使用场景 3.如何理解作用域 4.实际开发中闭包的应用 知识点: js没有块级作用域只有函数和全局作用域,如下代码: if(true){ ...
- js面试题知识点全解(一作用域)
问题: 1.说一下对变量提升的理解 2.说明this几种不同的使用场景 3.如何理解作用域 4.实际开发中闭包的应用 知识点: js没有块级作用域只有函数和全局作用域,如下代码: if(true){ ...
随机推荐
- 如何在windows下运行Linux命令?(转载)
在windows上可以运行或使用linux下面的命令吗?可以,小编今天就来分享怎么样让Windows支持Linux命令,做这些安装和设置后,就可以非常方便的在windows系统中使用linux下面的命 ...
- Apache服务器开启gzip压缩的支持
为什么要在服务器上开启压缩?其实,服务器上开启压缩,对整个网站的就是在服务器上把网页的内容压缩后传给客户端,客户端解压后再显示网页的内容.实际就是增加了服务器端和客户端的工作量,减少了网络传输的数据量 ...
- Delphi7 企业版安装记录
Borland Delphi Enterprise Version 7.0[Build 4.453] 云盘下载: 链接:http://pan.baidu.com/s/1gff6Fuz 密码:z ...
- mayan 游戏真是毒瘤
如题 真坑呀!!! 可算过了 我率先达到了氧气富有化 先是改变时没有fall.40分 然后是fall函数写慢了 tle 50分 . 上代码 #include<cstdio> #includ ...
- 第24章 SPI—读写串行FLASH—零死角玩转STM32-F429系列
第24章 SPI—读写串行FLASH 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/ ...
- 使用Newtonsoft.json 解决 Asp.Net MVC DateTime类型数据Json格式化问题
解决思路 众所周知,MVC中调用的微软的组件JavaScriptSerialer...,格式DateTime类型数据需要在客户端专门解. 还知道,NewtonSoft.json可以“正确”的格式化Da ...
- 前端JavaScript之ECMA
1.JavaScript基础 2.语法规则 3 常用内置对象 4 函数 5 伪数组 6.异常处理 1.1 web前端分为三层 HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化 ...
- iconv for linux(c)
// code_convert("gb2312","utf-8",inbuf,outbuf,outlen);static int code_convert(co ...
- ABAP调用WebService时日期类型问题
在使用ABAP调用WebService时, 提示CX_SY_CONVERSION_NO_DATE_TIME,意思是日期格式不能转化. 究其原因是ABAP里没有相应的数据类型与WebService描述里 ...
- Linux下 tar 命令详解
tar 是 unix/linux下的打包器 [解压] 输入命令: # tar -zxvf filename.tar.gz 参数解释: z :表示 tar 包是被 gzip 压缩过的 (后缀是.ta ...