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的更多相关文章

  1. Ionic/Angularjs 知识点解析

    Ionic/Angularjs 知识点解析 angular-ui-router(状态跳转) state的定义:(在app.js的config下配置) $stateProvider .state('ap ...

  2. Java高级工程师需要弄明白的20个知识点

    一般的程序员或许只需知道一些JAVA的语法结构,能对数据库数据进行CRUD就可以应付了.但要成为JAVA(高级) 工程师,就要对JAVA做比较深入的研究,需要不断学习进步,以下对高级工程师需要突破的知 ...

  3. python全栈开发 * 20 继承知识点汇总 * 180530

    20 面向对象的三大特征之一(继承,多态,封装) -----继承 1.继承的定义: 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类;父类又可称为基类或超类,新建的类称为派生 ...

  4. 21、AngularJs知识点总结 part-3

    1.选择框select 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,也可以使用ng-repeat 指令来创建下拉列表: 区别:ng ...

  5. 19、AngularJs知识点总结 part-1

    1.AngularJs AngularJs是一款JavaScript开源库,由Google维护,用来协助单一页面应用程序: AngularJs的目标是通过MVC模式增强基于浏览器的应用,使开发和测试变 ...

  6. angularjs知识点

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 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 ...

  8. js面试题知识点全解(一作用域和闭包)

    问题: 1.说一下对变量提升的理解 2.说明this几种不同的使用场景 3.如何理解作用域 4.实际开发中闭包的应用 知识点: js没有块级作用域只有函数和全局作用域,如下代码: if(true){ ...

  9. js面试题知识点全解(一作用域)

    问题: 1.说一下对变量提升的理解 2.说明this几种不同的使用场景 3.如何理解作用域 4.实际开发中闭包的应用 知识点: js没有块级作用域只有函数和全局作用域,如下代码: if(true){ ...

随机推荐

  1. Selenium入门17 selenium IDE安装及使用

    selenium IDE是firefox浏览器的一个插件,支持脚本的录制回放,关键字驱动的.界面跟robotframework很像. 实际测试中不用录制回放,不过初学者拿来看看元素是如何定位的还是有用 ...

  2. python 3+djanjo 2.0.7简单学习(四)--Django视图

    1.概念 Django 中的视图的概念是「一类具有相同功能和模板的网页的集合」.比如,在一个博客应用中,你可能会创建如下几个视图: 博客首页——展示最近的几项内容. 内容“详情”页——详细展示某项内容 ...

  3. Maven中maven-source-plugin,maven-javadoc-plugin插件的使用:

    摘要:今天领导说要把项目通过maven生产源码包和文档包并发布到自己的私服上,经过查看mavne官网发现有两个maven插件可以做到这些工作,一个是maven-source-plugin,另一个是ma ...

  4. 遍历ResultSet,行列要从1开始

    为什么遍历ResultSet,行列要从1开始. 因为Resultset的第一行的第一列都是空的,要用rs.next()到第一行才能进行读取. Statement stmt=null;  ResultS ...

  5. js中关于假值和空数组的总结

    先上x==y运算符的算法细节: 如果x不是正常值(比如抛出一个错误),中断执行. 如果y不是正常值,中断执行. 如果Type(x)与Type(y)相同,执行严格相等运算x === y. 如果x是nul ...

  6. Qlikview 数据加载方法罗列

    以下是通常会用到的数据加载的方法,供大家参考: 1. 从文件加载: Data: Load *,RowNo() as InputKey; SQL SELECT ID,TEST,DATECREATED F ...

  7. Mysql常见的引擎

    常用的引擎是:Innodb和Myiasm这两种引擎: innodb: 提供了对事务的ACID操作,还提供了行级锁和外键约束,,他的优势就是处理大量数据,在msql启动的时候,首先会建立一个缓存池,主要 ...

  8. hihoCoder 网络流四·最小路径覆盖

    题面带解释 hihoCoder感觉很好. 网络流的精华就是建图 #include<cstdio> #include<iostream> #include<algorith ...

  9. Mathematica 讲座

    Mathematica 讲座笔记本 [下载] 第一章 Mathematica 简介 [观看] [下载] 第二章 Mathematica 界面和编程语言 [观看] [下载] 第三章 符号运算 [观看] ...

  10. caffe在 14.04安装

    同事安装遇到的问题,记录一下 需要把cuda里面带的opengl不安装才行,否则冲突.在安装时,首先和之前一样,切换到无图形界面,关掉lightdm,安装cuda时选择--no-opengl-lib, ...