angular框架

什么是angular:

是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。

AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

Angular 基本介绍

Angular主要分为八大构造块：模块、组件、模板、元数据、数据绑定、指令、依赖注入。
【模板】
模板是在页面中要显示的内容，也就是html文件，以Html的形式告诉Angular如何渲染组件。
【组件】
一个组件控制着屏幕上的一块我们称为视图的区域，也是自定义的一段html代码，我们给他起个名字，就可以当做html的标签使用了。

【服务】
封装业务逻辑。
【模块】
将一系列的组件、指令和服务整合到一起，提供一个完整的功能。
【指令】
指令是包含指令元素的一个类，允许你向html元素中添加自定义行为，根据指令动态渲染页面。

【元数据】
元数据告诉我们如何处理一个类

【依赖注入（DI）】
Angular使用依赖注入来提供新组件以及组件所需的服务。

AngularJS 表达式

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

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

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

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app>
<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>

</body>
</html>

效果显示：

Angular指令（有很多可以参考手册）

1.ng-app指令

1.让你浏览器正常的去解析文档，不会去管以ng-开头的东西
2.当碰到ng-app这个属性的时候，后面所有的文档都将由angular来完成
angular中的指令都是由ng-开头,一个页面只能有一个ng-app

2. ng-init 指令

1.ng-init 指令为 AngularJS 应用程序定义了 初始值。

2. 通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

3.创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

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

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

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
</head>
<body>
    <div ng-app="App">
    <run></run>   <!-- 元素名 -->
    <div run></div>   <!--  属性 --> 
    <div class="run"></div>   <!-- 类名 -->
    <!-- run -->
    </div>
     
    <script src="bower_components/angular/angular.min.js"></script>
    <script>
        var app = angular.module("App",[]);
        // app.controller('con1',['$scope'function(){    
        // }]) 
        app.directive("run",function(){
            return{
                // restrict:"C",      //类名来调用指令
                restrict:"M",         //注释
                replace:true,         //注释
                template:"<h1>自定义指令</h1>"
            };
        });
           // restrict 值可以是以下几种:
           // E 作为元素名使用
           // A 作为属性使用
           // C 作为类名使用
           // M 作为注释使用
    </script>
</body>
</html>

Angular控制器和模块

创建模块：你可以通过 AngularJS 的 angular.module 函数来创建模块

模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块。

添加控制器：你可以使用 ng-controller 指令来添加应用的控制器:

AngularJS 控制器控制 AngularJS 应用程序的数据。

AngularJS 控制器是常规的 JavaScript 对象。

指令与模块控制器总实例：

<!DOCTYPE html>
<html ng-app="App">        <!--ng-app指令-->
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- ng-init指令可以初始化模块model的数据 -->
    <div ng-controller="controllerTest">
        
    </div>

    <script src="public/libs/angular/angular.min.js"></script>
    <script>
         //创建模块
        var App = angular.module("App",[]); 
        // 定义控制器       
        App.controller("controllerTest",['$scope',function($scope){ 
            // 都是往$scope这个对象上面去添加属性和方法
        }])
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-app="App">
        <div ng-controller="con1">
            <h1>{{name}}今年{{age}}岁了</h1>
         <ul>
             <li ng-repeat="(key,value) in arr">第{{key+1}}天，学习{{value}}</li>
         </ul>
         <table>
             <tr>
                 <th>姓名</th>
                 <th>年龄</th>
                 <th>性别</th>
                 <th>电话</th>
             </tr>
             <tr ng-repeat="key2 in arr2">
                 <td>{{key2.name}}</td>
                 <td>{{key2.age}}</td>
                 <td>{{key2.sex}}</td>
                 <td>{{key2.phone}}</td>
             </tr>
         </table>
        </div>
    </div>
    <script src="bower_components/angular/angular.min.js"></script>
    <script>
        var App = angular.module('App',[]);
        App.controller('con1',['$scope',function($scope){
            $scope.name = "jack";
            $scope.age = "30";

            $scope.arr = ["MVC","哈哈"]
            $scope.arr2=[
               {name:"wang",age:30,sex:"男",phone:"135123456789"},
               {name:"wang1",age:301,sex:"男",phone:"1351234567899"},
               {name:"wang2",age:302,sex:"男",phone:"135123456789"},
               {name:"wang3",age:303,sex:"男",phone:"135123456788"}
            ]
        }])
    </script>
</body>
</html>

AngularJS 事件

AngularJS 有自己的 HTML 事件指令：

AngularJS 支持以下事件:

- ng-click
- ng-dbl-click
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-keydown
- ng-keyup
- ng-keypress
- ng-change

案例：

<!DOCTYPE html>
<html ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
      <div ng-controller="box">
         <!--单击 -->
        <button ng-click="count=count+1">单击</button>
          <p>{{count}}</p>
          <!-- 双击 -->
        <button ng-dblclick="count1=count1+1">双击</button>
          <p>{{count1}}</p>
        
        <!-- 移入/移出 -->
        <span ng-mouseenter="count2=count2+1" ng-mouseleave="count3 = count3 + 1"   ng-init="count=0" id="p1">鼠标移入/移开</span>
        <h1>{{count2}}</h1>
       <h1>{{count3}}</h1>


        <button ng-click="toggle()">显示/隐藏</button><br>
          <p ng-hide="myVar">
        姓名：<input type="text" name="" ng-model="name"><br>
        年龄：<input type="text" name="" ng-model="age"><br>
        全：{{name+""+age}}
        </p>
      </div>

    <script src="bower_components/angular/angular.min.js"></script>
    <script>
        //单击--双击
        var App = angular.module("App",[]);
        App.controller("box",['$scope',function($scope){
                // $scope.sount=0;
                // $scope.sount1=0;
                // $scope.mouseover=0;
               
        }]);
    </script>

   <!--  点击隐藏和显示 -->
    <script>
        var App = angular.module("App",[]);
        App.controller("box",['$scope',function($scope){
            $scope.name="john";
            $scope.age=18;
            $scope.myVar=false;
            $scope.toggle=function(){
                $scope.myVar=!$scope.myVar;
            }
        }])
    </script>
</body>
</html>

AngularJS 过滤器

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

1. currency (货币处理)默认是美元符号，你可以自己传入所需的符号，例如人民币：￥
2. date (日期格式化)
3.filter (匹配子串)
{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的
{{ childrenArray | filter : 4 }} //匹配属性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象，匹配name属性中含有i的
{{childrenArray | filter : func }} //参数是函数，指定返回age>4的

4. json(格式化json对象)
5. limitTo(限制数组长度或字符串长度)
6. lowercase(小写)
7.uppercase(大写)
8. number(格式化数字)
9. orderBy(排序)
{{ childrenArray | orderBy : 'age' }} 按age属性值进行排序，若是-age，则倒序
{{ childrenArray | orderBy : orderFunc }} 按照函数的返回值进行排序
{{ childrenArray | orderBy : ['age','name'] }} 如果age相同，按照name进行排序

案例：

<!DOCTYPE html>
<html ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
</head>
<body>
    <div ng-controller="box">
       <p>{{num|currency:'￥'}}</p> <!-- (货币处理) -->
       <p>{{nowdate | date : 'yyyy/MM/dd hh:mm:ss EEEE'}}</p><!-- (日期格式化) -->
          {{arr | filter  : {age : '8'} }}  <br><!-- (匹配子串) -->
          {{arr | json}}<br>   <!-- json(格式化json对象) -->    
          <p>{{ sum | limitTo : 5 }}</p><!-- (限制数组长度或字符串长度) -->
             {{ sum1 | lowercase  }}<br><!-- lowercase(小写) -->
             {{ sum1 | uppercase }}<br>
             {{ sum2 | number : 2 }}

    </div>
    <script src="bower_components/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 
        // 定义控制器
        App.controller("box",['$scope',function($scope){ 
        // 都是往$scope这个对象上面去添加属性和方法
            $scope.num="99.9";
            $scope.nowdate= new Date();
            $scope.arr=[
                {name:"kimi",age:18},
                {namekey: "value",age:16},
                {name:"wan",age:18}
            ]
            $scope.sum="abcsssffffff";
            $scope.sum1="AAAAA";
            $scope.sum2="123456";
        }])
    </script>
    <!--过滤器详情参考网址：https://blog.csdn.net/u011613356/article/details/49924053 -->
</body>
</html>

视图：

posted @ 2019-03-12 19:23 文艺小青年啊阅读(493) 评论(0) 编辑收藏举报

刷新页面返回顶部

文艺小青年啊