angular js 综合笔记案例

Posted yaomengli

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angular js 综合笔记案例相关的知识，希望对你有一定的参考价值。

一 、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 案例

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

二、AngularJS 指令

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

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

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

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

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

<div ng-app="" ng-init="firstName=\'John\'">

<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：作为注释使用（已渐渐褪去很少使用）<!-- directive: pro-list -->

                 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
  <!-- directive: my-div -->
</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}}。


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


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


</body>




根作用域


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


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


案例：


<body ng-app="myApp">


<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 指令定义了应用程序控制器。


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




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




</div>




<script>
var app = angular.module(\'myApp\', []);
app.controller(\'personCtrl\', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});


 


五、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>


<script>


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把整个项目细分工














 


 


  






 




 


以上是关于angular js 综合笔记案例的主要内容，如果未能解决你的问题，请参考以下文章
 

 JQuery-04-笔记


 Vue-03-笔记


 接口多态的综合案例——笔记本电脑


 接口多态的综合案例——笔记本电脑


 angularJS使用ocLazyLoad实现js延迟加载


 java基础---25. 接口多态综合案例