angular指令

<h1>创建模块</h1>

  <body ng-app='app'  ng-controller='xmgController'>
  ng-app='app'  'app'名称可以随意设置
  var app = angular.module('app',[]); 和括号里的第一个参数一样就可以
  <!--
  ng-app 是应用程序 只有一个
  ng-controller 控制器 可以有多个
  {{title}} 插值语法 绑定
  -->
  <p>{{xmg}}</p>

<script src="angular.js"></script>
导入angular
  <script>
    // 1.创建模块
    /*
       第一个参数是要创建模块的名称
        第二个参数是否注入依赖,如没有就传入 []
     */
    var app = angular.module('app',[]);
    // 2.创建控制器
    /**
     * 第一个参数 要创建控制器的名称
     * 第二个参数 数组 注入依赖
     *  $scope 是一个对象 是一个模型
     */
    app.controller('xmgController',['$scope',function ($scope) {
        $scope.xmg = 'dafdadadasdf';
    }]);

    // 3.绑定模块

    // 4.绑定控制器

</script>

<>
<h1>关于指令</h1>
以ng开头的就是指令
其实指令就是给html标签添加了一些属性这些属性对html并没有任何意义
但是对angular来说是有特殊含义的,我们称为指令

<body ng-app='app'  ng-controller='xmgController'>
<!--
ng-show true显示 false 不显示
ng-hide true不显示 false 显示
ng-if true显示 false 不显示
if和show 的区别是if隐藏了就等于不存在了
ng-if true 在dom中添加元素 false 从dom中移除元素 如果只展示一次需要用这个
ng-click 事件

ng-repeat 遍历 你要重复谁,就在谁身上绑定

-->
<p ng-show='false'>{{name}}</p>

<p ng-hide='false'>{{name}}</p>

<p ng-if='false'>qweq</p>

<button ng-click='xx("da",1)'>点我啊</button>
//( )括号里可以传两个参数

<ul>
//
ng-repeat 遍历 你要重复谁,就在谁身上绑定

    <li ng-repeat='(key,value) in course'>{{key}}------ {{value}}</li>
//ng-repeat='(key,value) in course'  key和value名字可以随意取但是位置不能换,第一个是索引第二个是值 
   例如: $scope.course = ['html5','java','ui','ios'];   key是指的数组里的每一个值的索引,
value指的是数组的值也就是 html5这些值

</ul>

<script src="angular.js"></script>
<script>
    // 1.创建模块
    var app = angular.module('app',[]);

    // 2.创建控制器
    app.controller('xmgController',['$scope',function ($scope) {
        $scope.name = 'hello';

        $scope.xx = function (regs,regs1) {
            alert(regs + regs1);
     //默认吧两个参数拼接在一起
        }

        $scope.course = ['html5','java','ui','ios'];


    }])

    // 3.绑定模块

    // 4.绑定控制器



</script>

ng-src指令

<body ng-app='app' ng-controller='xmgController'>

<button ng-click='click()'>加载图片</button>

<!--![]({{mySrc}})-->
![]({{mySrc}})

<script src="angular.js"></script>
<script>
    // 1.创建模块
    var app = angular.module('app',[]);
    
    // 2.创建控制器
    app.controller('xmgController',['$scope',function ($scope) {
        $scope.msg = 'xmg1';

        $scope.mySrc = '';

        $scope.click = function () {
            $scope.mySrc = 'http://www.kedo.gov.cn/upload/resources/image/2017/02/17/143646.jpg';

        }
    }]);

</script>

ng-class

body ng-app='app' ng-controller='xmgController'>
<button ng-click='click()'>字体放大/缩小</button>
<!--<div class='fs50'>123132132</div>-->
<div ng-class='{fs50:isStyle,red:false}'>123132132</div>

<script src="angular.js"></script>
<script>
    // 1.创建模块
    var app = angular.module('app',[]);
    // 2.创建控制器
    app.controller('xmgController',['$scope',function ($scope) {
        $scope.isStyle = true;
        $scope.click = function () {
            $scope.isStyle = !$scope.isStyle;
        }
    }]);
</script>

ng-include 引入外部模板

<body ng-app='app' ng-controller='xmgController'>
<!--
ng-include 引入外部模板 后面跟上模板路径 这个路径需要绑定在模型中
一个html不允许随意读取文件
为了安全考虑
angular 怎么做到
因为他默认开启了一个服务器,
Ajax可以读取文件
-->
<div class="head" ng-include='xx'>

</div>
<div class="content" ng-include='content'></div>
<div class="footer" ng-include='footer'></div>
<script src="angular.js"></script>
<script>
    // 1.创建模块
    var app = angular.module('app',[]);
    // 2.创建控制器
    app.controller('xmgController',['$scope',function ($scope) {
        $scope.xx = 'head.html';
        $scope.content = 'content.html';
        $scope.footer = 'footer.html';
      这三个html文件是在同路径下创建的
    }]);
</script>

ng-switch

<body ng-app='app' ng-controller='xmgController'>
<ul ng-switch='type'>
控制器中type的值是ul所以只会显示ul
    <li ng-switch-default='html5'>html5</li>
    <li ng-switch-when='java'>java</li>
    <li ng-switch-when='ui'>ui</li>
</ul>
<script src="angular.js"></script>
<script>
    // 1.创建模块
    var app = angular.module('app',[]);

    // 2.创建控制器
    app.controller('xmgController',['$scope',function ($scope) {
        $scope.type = 'ui';
    }]);
  下面是jquery写法因为用法一样拿出来比较
    /*switch (3){
        case 1:
            代码1
            break;
        case 2:
            代码2
            break;
        default:
            代码n
            break;
如果代码1满足switch就显示代码1,不满足就执行下一个
    }*/
</script>

ng-click 点击事件指令

<body ng-app='app' ng-controller='xmgController'>
<!--
1.ng-click="事件的名称 ()调用函数" ()可以传递参数
$event
-->
<button ng-click='click($event)'>点击</button>
  //传入$event是为了防止默认事件
<!--<button ng-mousedown=''>点击</button>-->
<script src="angular.js"></script>
<script>
    // 1.创建模块
    var app = angular.module('app',[]);
    // 2.创建控制器
    app.controller('xmgController',['$scope',function ($scope) {
        $scope.click = function (e) {
            console.log(e);
  //e是接收防止默认事件的参数
        }
    }]);
</script>

<h1>自定义指令

<html lang="en" ng-app="app" ng-controller="zjController">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*.xmg{*/
            /*background-color: #C81623;*/
        /*}*/
    </style>
</head>
<body>

<!--<xmg></xmg>--> <!--E元素的形式-->

<!--<div xmg></div>--><!--A属性的形式-->

<!--<div class="xmg"></div>--><!--C类的形式-->
<!--类的形式在css中也可以使用-->
<!--<div class="xmg"></div>-->

<!-- directive:xmg --><!--M注释的形式他必须在template后面加上  replace:true 才会出现-->
<script src="angular.js"></script>
<script>
    var app = angular.module('app',[])
    app.controller('zjController',['scope',function ($scope) {

    }]);
    //自定义指令
    app.directive('xmg',function () {
        //注意点:app.directive('xmg',function ()这个'xmg'代表名称如果xmgDir这样的驼峰名称在标签中需要写成<xmg-dir></xmg-dir>
        //在一个回调函数中
        return{
            restrict:'EAMC',
            //常用EA
            //定义指令的类型,不分先后顺序
            // E(元素)
            // A(属性)
            // C(class类)
            // M(注释)
            template:'<h1>w sh</h1>',
            //template还有另一种写法templateUrl:文件地址或者外部模板. html文件默认开启了一个服务器才能读取到文件
            replace:true
            //替换原标签
        }
    })
</script>

<h1>内置过滤器

<body ng-app="app" ng-controller="zjController">
<!--1.currency 货币格式化 接受2个参数 第一个参数是要自定义的货币符号
第二个参数 保留几位小数 四舍五入-->
<p>{{price | currency}}</p>
<p>{{price | currency:'¥'}}</p>
<p>{{price | currency:'¥@@@@':1}}</p>
<!--uppercase 小写变大写-->
<p>{{str | uppercase}}</p>
<!--lowercase 转化小写-->
<p>{{str2 | lowercase}}</p>
<!--number 保留几位小数 对字符串也可以 四舍五入-->
<p>{{num | number:2}}</p>
<!--date 日期格式化 接受一个参数 格式化日期的 yyyy-MM-dd HH:mm:ss  中间的--可以换成年月日或者斜杠-->
<p>{{myDate | date:'yyyy-MM-dd HH:mm:ss'}}</p>
<!--json 将js对象转换层json字符串 开发中不常用-->
<p>{{per | json}}</p>
<!--截取limitTo 参数 截取几个 如果传负数代表从后面截取-->
<p>{{course | limitTo:1}}</p>
<!--filter 筛选 模糊筛选 传个h就会把有h的删选出来-->
<p>{{course | filter:'html'}}</p>
<!--小案例在输入框中输入字母会删选出对应的值-->
<input type="text" ng-model='search'>
<p>{{course | filter:search}}</p>
<!--1,2,3 升序 false--><!--3,2,1 降序 true-->
<!--第一个参数是要排序的字段, 如果是数组传空字符串 ''第二个参数是升序或降序-->
<p>{{score | orderBy:'':false}}</p>
<p>{{stu | orderBy:'name':false}}</p>
<script src="angular.js"></script>
<script>
    var app = angular.module('app',[]);
    app.controller('zjController',['$scope',function ($scope) {
     //过滤器就是格式化数据
        $scope.price = 10;
//        当数字有小数时就可以用第二个参数了
        $scope.str = 'abcde';
        $scope.str2 ='ABCDE';
        $scope.num = '456.789';
        $scope.myDate = new Date();
        $scope.per = {
            name:'zs', age:'11'
        }
        $scope.course = ['html','css','js']
        $scope.score = [100,50,59.9,80];
        $scope.stu = [
          {name:'zs1',age:18},
          {name:'zs2',age:19},
          {name:'zs3',age:8},
          {name:'zs4',age:38}
           ];
    }]);
</script>

<h1>自定义过滤器 filter

 3.自定义过滤器
     过滤器本质是一个方法
     第一个参数是过滤器的名称
     第二个参数是一个函数 函数里面需要再返回一个函数 函数默认的参数是左边的值
     在函数里面返回什么值就代表显示什么值

<body ng-controller="xmgController" ng-app="app">
<p>{{20 | money}}</p>
<p>{{20 | myCurrency:'@@'}}</p>
<!--''里面不传值等于null -->
<p>{{ msg | firstUppcase}}</p>
<!--msg加''就是自己,没加就是参数形式  $scope.msg = 'xmg';-->
<script src="angular-1.5.8.js"></script>
<script>
    // 1.创建模块
    var app = angular.module('app',[]);
    // 2.创建控制器
    app.controller('xmgController',['$scope',function ($scope) {
        $scope.msg = 'xmg';
    }]);
    // 3.自定义过滤器
    app.filter('money',function () {
        return function (a) {
            return "￥" + a + '元';
        }
    });
    app.filter('myCurrency',function () {
        return function (input,args) {
            if (args == undefined){
                return '$' + input;
            }else {
                return args + input;
                //input是20 ,args是##
            }
        }
    });
    app.filter('firstUppcase',function () {
        return function (input) {
            return input[0].toUpperCase() + input.slice(1);
        }
    })
</script>

<h1> * 控制器的作用域
* 1.子集中没有属性就去父级中查找,如果父级中没有属性就不显示
* 2.父级中没有属性不能去子集中查找

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • angular转发
    AngularJS是什么？AngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。首先，它是...
    200813阅读 5,564评论 0赞 3
  • AngularJS初级入门
    通过AngularJS仿豆瓣一刻的案例：https://github.com/zhongxiaolian/doub...
    中小恋阅读 5,754评论 1赞 21
  • AngularJS基本知识点
    AngularJSAngularJS 是一个 MV* 框架， 最适于开发客户端的单页面应用。它不是个功能库，...
    一直以来都很好阅读 4,390评论 0赞 0
  • angular指令
    1.指令是什么 第一：指令就是DOM元素的标记（如属性、元素名、注释或CSS类名）第二：让编译器（compiler...
    梧桐叶_阅读 4,678评论 1赞 4
  • angular中常见问答题
    1、angularjs的几大特性是什么？ 双向数据绑定、依赖注入、模板、指令、MVC/MVVM 2、列举几种常见的...
    2e9a10d418ab阅读 5,193评论 0赞 10