正文

angularjs综合笔记案例

yaomengli  2022-02-10  306

关键词：

一、AngularJS 表达式（1.{{}} 2.ng-bind(单项绑定)）

AngularJS 表达式写在双大括号内：{{ expression }}

AngularJS 使用表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

表达式{{}} 案例

ng-init 初始化数据一般会用ng-controller代替

<body>

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: {{ quantity * cost }}</p>
</div>

</body>

表达式ng-bind 案例

二、AngularJS 指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-model双向绑定案例（改变input里面的数据下面{{}}里面的数据也会改变）

<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>

</div>

ng-repeat 指令用在一个对象数组上：循环数组

<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li data-ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>

<div data-ng-app="" ng-init="names=[{id:1,name:'狗'},{id:1,name:'猫'}]">

<p>使用 ng-repeat 来循环数组</p>

<ul>

<li data-ng-repeat="x in names">

{{ x.id }}

</li>

</ul>

</div>

创建自定义的指令

使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

自定义指令：用 directive

angular.module("myApp",[]).directive("proList",fn)

通过添加 restrict 属性,值可以为 "ACEM", 来设置指令只能通过怎样的方式来调用: 默认值为AE

A：作为属性使用；（<span pro-list></span>）

　　　　　　　　　　　　　　E:作为元素名使用； <pro-list></pro-list>

　　　　　　　　　　　　　　C：作为class类名使用；<span class="pro-list"><span>

M：作为注释使用（已渐渐褪去很少使用）

template:指令的模块

replace：如果值为true只显示指令里面的内容为false html里面写的标签也存在

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular-1.5.5/angular.min.js"></script>

</head>
<body ng-app="myApp">
  <my-div></my-div> <span>E</span>
  <p class="my-div"></p> <span>C</span>
  <p my-div=""></p> A
  
</body>
<script>
      var app=angular.module("myApp",[]);
      app.directive("myDiv",function(){
          return {
              restrict:'C',   //此处规定只能以class类名的方式来调用自定义指令
              template:"<div>我是自定义指令</div>"
          }
      })
</script>

scope属性的3种取值:

1、false（默认值）或者不写scope：直接使用父scope。比较“危险”。因为是同一个scope，

所以无论是改变my-directive里面还是外面的输入框中的文字，都会改变这个scope中的“input”的值。

2、true：继承父scope

一开始是绑定在父scope中，但当修改位于自定义指令中的输入框时，子scope就被创建并继承父scope了。之后，修改父scope并不能影响input的值，而修改子 scope就可以改变input的值了

3、{ }：创建一个新的“隔离”scope，但仍可与父scope通信 (见下面两个案例)

@：单向绑定，外部scope能够影响内部scope(自定义指令scope)，但反过来不成立，只能绑定字符串不能识别变量
=：双向绑定，外部scope和内部scope(自定义指令scope)的model能够相互改变（双向的子集绑定父级的数据，在指令使用的时候后面不需要加{{}}，可以识别后面的变量）
&：把内部scope的函数的返回值和外部scope的任何属性绑定起来（绑定父级中的方法）
如果scope值为空{} 那么页面上的将不显示相关内容

在页面上写的input都是外部：在模板上写的input是内部

app.directive('myDirective', function() {

return {

restrict: 'E',

replace: true,

templateUrl: '../templates/my_template_01.html',

scope: false,

controller: null

}

});

自定义指令获取同一控制器里的属性和方法：（案例）

<body ng-app="myApp">
<div ng-controller="ctrl">
  <pro-list src="{{src}}" pro-name="{{proName}}"></pro-list>
  <pro-list src="{{src1}}" pro-name="{{proName1}}"></pro-list>  //因为下面拓展属性时proName用的是驼峰命名法所以这里也要用-连接
</div>
</body>
<script>
     var app=angular.module("myApp",[]);
     app.controller("ctrl",function($scope){
         $scope.src="img/1.jpg";
         $scope.src1="img/2.jpg";
         $scope.proName="产品一";
         $scope.proName1="产品二"
     });
         app.directive("proList",function(){
             return {
                 restrict:'ACE',
                 templateUrl:'tpl.html', //其中tpl里为设置的一个样式模板比如（bootstroop里的缩略图）

                  scope:{
                      src:"@",    自定义指令scope 采用@单向绑定外部scope能够影响内部scope(自定义指令scope)，但反过来不成立
                      proName:"@"        
                  },
                 replace:true
             }
         })

</script>

自定义指令获取不同控制器里的属性和方法：（案例）

<body ng-app="myApp">
  <div ng-controller="ctrl">
      <pro-list ></pro-list>
  </div>
  <div ng-controller="ctrl1">
      <pro-list ></pro-list>  //只要把自定义指令变现在页面上就会直接继承控制器里拓展的属性和方法（src proName）
  </div>
</body>
<script>
    var app=angular.module("myApp",[]);
      app.controller("ctrl",function($scope){
          $scope.src="img/1.jpg";
          $scope.proName="产品一"
      });
    app.controller("ctrl1",function($scope){
        $scope.src="img/2.jpg";
        $scope.proName="产品二"
    });
    app.directive("proList",function(){
       return {
           restrict:"ACEM",
           templateUrl:"tpl.html",

           replace:true
       }
    })
</script>

三 AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

<h1>{{carname}}</h1>

</div>

<p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>

</body>

根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

案例：

<div ng-controller="myCtrl">

<h1>姓氏为 {{lastname}} 家族成员:</h1>

<ul>

<li ng-repeat="x in names">{{x}} {{lastname}}</li>

</ul>

</div>

<div ng-controller="ctrl">
{{lastname}}
</div>
<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
app.controller("ctrl",function($scope){

})
</script>

<p>注意 $rootScope 无论在循环对象内外或者ctrl控制器中都可以访问。</p>

</body>

四、AngularJS 控制器（ng-controller）

ng-controller 指令定义了应用程序控制器。

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

五、AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

表达式中添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.

(下面的两个实例，我们将使用前面章节中提到的 person 控制器)

uppercase 过滤器将字符串格式化为大写：

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

orderBy 过滤器根据表达式排列数组：

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

自定义过滤器

以下实例自定义一个过滤器 reverse，将字符串反转：

<div ng-app="myApp" ng-controller="myCtrl">


    姓名: {{ msg | reverse }}

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.msg = "Runoob";
    });
    app.filter('reverse', function() { //可以注入依赖
        return function(text) {
            console.log(text);
            return text.split("").reverse().join("");
        }
    });
</script>

六、AngularJS 服务(Service)与（$http）

service服务应用于请求ajax数据(案例)

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

app.sevrice("getDate",function($http){

return $http.get("procuct.json")

)

app.controller("ctrl",function($scope,getDate){

getDate.then(function(res){

$scope.data=res.data

)

另一种表示方法

app.controller("ctrl",function($scope,$http){

$http.get("product.json").then(res){

$scope.data=res.data

}

)


六、angular js模块（ng-model）

   创建模块： angular.module 函数来创建模块
          （var app = angular.module("myApp", []); ）
     添加控制器：ng-controller

ng-click 点击绑定事件，触发在$script中声明方法

$scope 在每创建一个控制器里面生成的参数代表当前控制器起作用的范围他是angular js连接逻辑层与视图层的桥梁，

在$scope声明的属性和方法可以在对应视图层的控制器中使用

app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });

AngularJS 实例

<div ng-app="myApp" ng-controller="myCtrl"> // 添加到指令里

名: <input type="text" ng-model="firstName"><br>

姓: <input type="text" ng-model="lastName"><br> <br>

姓名: {{firstName + " " + lastName}} </div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope)

{ $scope.firstName= "John"; $scope.lastName= "Doe"; });

</script>

创建方法和属性

angular.module("myApp",[]).controller("myCtrl",function($scope) {
    $scope.name="JONE"; //创建添加属性
    $scope.age="17";

 $scope.foo=function(){ //创建添加方法
     alert(111)
     
 }
});

模块化思想
每一个html面就是对应一个模块，每一个模块里面有很多$scope.controller把整个项目细分工

webapisdom-事件委托+综合案例(代码片段)

...数 / 事件基础 / 高阶函数 / 环境对象 / 综合案例-Tab栏切换 / DOM节点 /DOM时间对象/DOM重绘和回流/ DOM-事件对象/DOM-事件流目标：能够说出事件委托的好处一、事件委托是利用事件流的特征解决一些查看详情

dom-节点对象+时间节点综合案例(代码片段)

...数 / 事件基础 / 高阶函数 / 环境对象 / 综合案例-Tab栏切换 / DOM节点 /DOM时间对象发布微博案例需求11.注册input事件2.将文本的内容的长度赋值给对应的数值3.表单的maxlength属性可以直接限制在200个查看详情

黑马程序员前端-html+css综合案例：土豆网鼠标经过显示遮罩(代码片段)

...容了，因为篇幅问题，请看文末。今天开始学习综合案例目录1、学习目标2、核心原理3、参考代码4、往期汇总我们先来看看综合案例的效果图：1、学习目标练习元素和显示与隐藏练习元素的定位2、核心原理原先半... 查看详情

案例11：高层综合楼防火案例分析

案例11：高层综合楼防火案例分析（一）建筑分类和耐火等级:总平面布局防火分区:消防水泵设置规定锅炉房,变压器查看详情

css3_综合案例

综合案例设置元素的width，还可以利用left和right 为了防止图片太小，background-size:100%100%; 查看详情

acl的综合应用案例

...例说明了标准ACL、扩展ACL、命名ACL的配置案例，下面介绍综合应用ACL的案例。 ACL的原理与基本配置的链接：http://yangshufan.blog.51cto.com/13004230/1958558ACL的综合应用公司内部网络已经建成，网络拓扑图如下所示：650)this.width=65... 查看详情

黑马前端pinkhtml综合案例：圣诞节的那些事小说排行榜案例注册页面(代码片段)

文章目录综合案例1：圣诞节的那些事目标代码综合案例2：小说排行榜案例目标代码综合案例3：注册页面目标代码综合案例1：圣诞节的那些事视频p30-31目标代码<!DOCTYPEhtml><htmllang="en"><head><... 查看详情

学习react-简单小案例--综合案例

<html><head><title></title><metacharset="UTF-8"/><scriptsrc="js/react.min.js"type="text/javascript"charset="utf-8"></script><scriptsrc="js/react-dom.min.js 查看详情

angularjs路由使用案例

AngularJS路由使用案例：1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<title>AngularJS路由使用案例</title>6<scripttype="text/javascript"src="../js/angular.min.js">< 查看详情

set集合综合案例

案例01：生成0-10之间5个不相等的数方法01：使用list集合实现importrandomlist01=[]foriinrange(100): num01=random.randint(0,10) ifnum01notinlist01: list 查看详情

proteus仿真51单片机电子锁综合设计案例

【Proteus仿真】51单片机电子锁综合设计案例查看详情

set集合综合案例

案例01：生成0-10之间5个不相等的数方法1：使用list集合实现importrandomlist01=[]foriinrange(100): num01=random.randint(0,10) ifnum01notinlist01: list0 查看详情

django—综合案例(代码片段)

案例效果如下：打开/booktest/显示书籍列表点击新增，增加一条数据点击删除，删除一条数据点击查看，跳转英雄信息界面1.定义模型类打开booktest/models.py文件，定义模型类如下fromdjango.dbimportmodels#Createyourmodelshere.#定义书籍模型类... 查看详情

javascript：综合案例-表单验证

综合案例：表单验证开发要求：　　要求定义一个雇员信息的增加页面，例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单，此表单定义要求如下:　　　　.雇员编号：必须是4位数字，按照正则进行验证；　　　　.... 查看详情

javaee框架技术之14ssm综合案例(代码片段)

SSM综合案例一、课程目标1.【掌握】SSM整合2.【√】学习Lombok使用3.【理解】Layui页面书写（备注：其他前端技术也可以）4.【理解】理解SSM综合案例表的结构5.【掌握】产品管理二、SSM整合Spring+SpringMVC+Mybatis–>SSMSpring+Struts2+Hiber... 查看详情

javaweb06-html篇笔记

...：将商城的案例中的表结构进行分析：1.1.1需求:在最后的综合案例中,会创建数据库,为数据库中创建很多表.表与表之间是有关系存在,分析表之间关系并且完成表的创建.1.1.2分析：1.1.2.1技术分析【数据库的多表设计】数据库都是... 查看详情

java11-java基础语法类设计综合案例

Java11-java语法基础（十）类设计综合案例一、类综合设计方法1、类设计步骤（1）分析数据成员（2）分析成员方法和构造方法（3）画出类图（4）编码测试2、具体问题1）分析数据成员（1）访问控制修饰符（2）数据成员名称的定... 查看详情

struts2综合案例

1.总结:1ModelDriven来封装前台数据,通过struts2的参数拦截器,封装到action中的成员变量中,在写方法中,千万不要写参数否则会报找不到save,update等方法的错误,我找了近近一个小时才找到!action:publicclassEmployeeActionextendsActionSupportimplementsM... 查看详情

正文

angularjs综合笔记案例

一 、AngularJS 表达式 （1.{{}} 2.ng-bind(单项绑定)）

AngularJS 表达式写在双大括号内：{{ expression }}

二、AngularJS 指令

创建自定义的指令

scope属性的3种取值:

所以无论是改变my-directive里面还是外面的输入框中的文字，都会改变这个scope中的“input”的值。

2、true：继承父scope

一开始是绑定在父scope中，但当修改位于自定义指令中的输入框时，子scope就被创建并继承父scope了。之后，修改父scope并不能影响input的值，而修改子 scope就可以改 变input的值了

3、{ }：创建一个新的“隔离”scope，但仍可与父scope通信 (见下面两个案例)

三 AngularJS Scope(作用域)

根作用域

四、AngularJS 控制器（ng-controller）

五、AngularJS 过滤器

表达式中添加过滤器

<div ng-app="myApp" ng-controller="personCtrl">

向指令添加过滤器

自定义过滤器

六、AngularJS 服务(Service)与（$http）

AngularJS 实例

webapisdom-事件委托+综合案例(代码片段)

dom-节点对象+时间节点综合案例(代码片段)

黑马程序员前端-html+css综合案例：土豆网鼠标经过显示遮罩(代码片段)

案例11：高层综合楼防火案例分析

css3_综合案例

acl的综合应用案例

黑马前端pinkhtml综合案例：圣诞节的那些事小说排行榜案例注册页面(代码片段)

学习react-简单小案例--综合案例

angularjs路由使用案例

set集合综合案例

proteus仿真51单片机电子锁综合设计案例

set集合综合案例

django—综合案例(代码片段)

javascript：综合案例-表单验证

javaee框架技术之14ssm综合案例(代码片段)

javaweb06-html篇笔记

java11-java基础语法类设计综合案例

struts2综合案例

一、AngularJS 表达式（1.{{}} 2.ng-bind(单项绑定)）

一开始是绑定在父scope中，但当修改位于自定义指令中的输入框时，子scope就被创建并继承父scope了。之后，修改父scope并不能影响input的值，而修改子 scope就可以改变input的值了