angular

最新推荐文章于 2025-07-07 10:57:47 发布

Learner_4399

最新推荐文章于 2025-07-07 10:57:47 发布

阅读量306

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yao491314/article/details/50021553

本文介绍AngularJS的基础知识，包括如何加载脚本、定义模块和控制器、实现数据绑定、使用内置指令如ng-click，以及如何利用表达式和过滤器增强HTML功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Angularjs：
完全使用 JavaScript编写的客户端技术，主要用于构建单页面Web应用，通过原生的Model-View-Controller（ MVC，模型?视图?控制器）功能增强了 HTML。

--
>##1.使用
    通过<script type="text/javascript" src="js/angular1.2.3.js"></script>  //载入脚本
    <body ng-app="myApp">
    <span ng-controller="myController">{{name}}</span>
    <script type="text/javascript" src="public/js/angular.js"></script>
    <script type="text/javascript">
    var app=angular.module("myApp",[]);
    app.controller("myController",['$scope',function($scope){
        $scope.name="zhangsan";
    }])
</script>
>##2.定义区块及控制器
>
    ng-app="myApp"定义其包含区域属于angular.js应用区域;定义控制器而不采用默认控制器，避免混乱 -- ng-controller="myController"并且可以可以规定作用域。
>##3.定义木块，数据绑定
>
    <input ng-model="name" type="text" placeholder="请输入姓名">将数据绑定到$scope上等同于$scope.name=input.val();
>##4.作用域
>4.1所有的作用域都通过原型继承而来，也就是说它们都可以访问父级作用域；AngularJS在当前作用域中无法找到某个属性时，便会在父级作用域中进行查找。$rootScope是所有$scope对象的最上层$rootScope是AngularJS最接近于全局对象的函数，$scope对象就是一个普通的JavaScript对象。
>4.2每个控制器内的$scope数据作用域只局限在本控制器范围内，且在嵌套时子元素可以使用父元素的属性，而父元素则不能使用跨过子元素的作用域的数据。
>##5.内置指令ng-click
>可以将按钮、链接等其他任何DOM元素同点击事件进行绑定
>
    <div ng-app="myApp" ng-controller="FirstController">
        <h4>点击button按钮添加值，点击a标签减少值</h4>
        <button ng-click="add(1)" class="button">Add</button>
        <h4>Current count: {{ counter }}</h4>
    </div>
    <script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('FirstController', function($scope) {
        $scope.counter = 0;
        $scope.add = function(amount) {
        $scope.counter += amount;
    };
    });
    </script>
>##6.表达式
>###6.1 $watch监测
>
    案例：
    <div ng-app="watch" >
        <input ng-model='name' type='text'/>
        <div>change count: {{count}}</div>
    </div>
    <script type="text/javascript">
    angular.module('watch',[])
            .run(['$rootScope',function($scope){
                $scope.count = 0;
                $scope.name = 'Alfred';
                $scope.$watch('name',function(){
                    $scope.count++;
                })
            }]);
    </script>    //通过使用run和$watch监测改变
###6.2 $parse将一个表达式转换为一个函数
>
    案例：
    <div ng-app="myApp" ng-controller="myController">
        <p>{{val}}</p>
    </div>
    <script type="text/javascript">
    var app=angular.module("myApp",[])
    app.controller("myController",function($scope,$parse){
      $scope.name="zhangsan";
        var expr="name =='wangwu'"
        var fun=$parse(expr);
        $scope.val=fun();
    })
    </script>
###6.3 过滤器----在HTML中的模板绑定符号{{ }} 内通过| 符号来调用过滤器

>####6.3.1  自带过滤器，将名字转为大写
>
    案例：
    <div ng-app="myApp" ng-controller="myController">
            {{name | uppercase}}
    </div>
    <script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
      $scope.name="zhangsan"
    });
    </script>
    在控制器中调用过滤器呢？
    <div ng-app="myApp" ng-controller="myController">
            {{name}}
    </div>
    <script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myController',['$scope','$filter',function($scope,$filter){   //特别注意这里
        $scope.name=$filter('uppercase')("lisi")    //尝试一下$filter('lowercase')('LISI');
    }]);
    </script>
####6.3.2 时间过滤器
>
    案例：
    <div ng-app="myApp" ng-controller="myController">
        {{ today | date:'short' }}
        日期格式化
    {{ today | date:'short' }} 
    {{ today | date:'fullDate' }} 
    {{ today | date:'longDate' }} 
    {{ today | date:'mediumDate' }} 
    {{ today | date:'shortDate' }} 
    {{ today | date:'mediumTime' }} 
    {{ today | date:'shortTime' }} 
>
    年份格式化
    四位年份： {{ today | date:'yyyy' }} 
    两位年份： {{ today | date:'yy' }} 
    一位年份： {{ today | date:'y' }} 
>
    月份格式化
    英文月份： {{ today | date:'MMMM' }} 
    英文月份简写： {{ today | date:'MMM' }} 
    数字月份： {{ today |date:'MM' }} 
    一年中的第几个月份： {{ today |date:'M' }} 
>
    日期格式化
    数字日期： {{ today|date:'dd' }}  
    一个月中的第几天： {{ today | date:'d' }} 
    英文星期： {{ today | date:'EEEE' }} 
    英文星期简写： {{ today | date:'EEE' }} 
>
    小时格式化
    24小时制数字小时： {{today|date:'HH'}} 
    一天中的第几个小时： {{today|date:'H'}} 
    12小时制数字小时： {{today|date:'hh'}} 
    上午或下午的第几个小时： {{today|date:'h'}} 
>
    分钟格式化
    数字分钟数： {{ today | date:'mm' }} 
    一个小时中的第几分钟： {{ today | date:'m' }} 
>
    秒数格式化
    数字秒数： {{ today | date:'ss' }}  
    一分钟内的第几秒： {{ today | date:'s' }} 
    毫秒数： {{ today | date:'.sss' }} 
    只要满足规则我们也可以自己去定义日期格式化出来
    {{ today | date:'hh:mm:ss.sss' }} 
    </div>
>
    <script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myController',['$scope',function($scope){
        $scope.today=new Date();
    }]);
    </script>
####6.3.3货币过滤器
>
    实例：
    <div ng-app="myApp" ng-controller="myController">
        {{ money | currency }}
    </div>
    <script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myController',function($scope){
        $scope.money=1200; // 中文
    });
    </script>
####6.3.4 常见过滤器3:filter
>
    案例1：返回包含数组中所有包含e的单词
        <div ng-app="myApp" ng-controller="myController">
            {{ data | filter:'e' }}
        </div>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myController',function($scope){
            $scope.data=['Ari','Lerner','Likes','To','Eat','Pizza']
        });
    </script>
>
    案例2：对对象做过滤
        <div ng-app="myApp" ng-controller="myController">
            {{ data | filter:{'name':'zhangsan'} }}
        </div>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myController',function($scope){
            $scope.data= [{
                'name': 'zhangsan',
                'City': 'chengdu',
                'favorite food': '火锅'
            },{
                'name': 'lisi',
                'City': 'beijing',
                'favorite food': '烤鸭北京'
            }]
        });
    </script>
>
    案例3：将首字母转化为大写
        <div ng-app="myApp" ng-controller="myController">
            {{ name | filter:checkText }}
        </div>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myController',function($scope){
            $scope.name=['zhangsan','lisi','Wangwu','Hehe']
            $scope.checkText = function(str) {
                return str[0] == str[0].toUpperCase();
            };
        });
    </script>
>####6.3.5 json过滤器
    案例：json过滤器可以将一个JSON或JavaScript对象转换成字符串
        <div ng-app="myApp" ng-controller="myController">
            {{ name | json }}
        </div>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myController',function($scope){
            $scope.name={name: 'Ari', City: 'SanFrancisco'}
        });
    </script>
>####6.3.6 limitTo过滤器
    案例：  截取字符串
    limitTo过滤器会根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过传入参数的正负值来控制从前面还是从后面开始截取。
    案例1:
        <div ng-app="myApp" ng-controller="myController">
            {{ data | limitTo:3 }} //    {{ data | limitTo:-3 }}
        </div>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myController',function($scope){
            $scope.data="helloworld"
        });
    </script>
>####6.3.7 number过滤器
    案例：number过滤器
    number过滤器将数字格式化成文本。它的第二个参数是可选的，用来控制小数点后截取的位数。
    案例
        <div ng-app="myApp" ng-controller="myController">
            {{ data | number }}  //{{ data | number:2 }}
        </div>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myController',function($scope){
            $scope.data="12345"   // $scope.data="1.2345"
        });
    </script>
>####6.3.8 orderBy过滤器
    案例7：orderBy过滤器
    orderBy过滤器可以用表达式对指定的数组进行排序。 orderBy可以接受两个参数，第一个是必需的，第二个是可选的。第二个参数用来控制排序的方向（是否逆向）。
      //对象数组中的name进行排序
        <div ng-app="myApp" ng-controller="myController">
            {{ data | orderBy:'name' }}  // {{ data | orderBy:'name':true }}--这样对排序的顺序反转
        </div>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myController',function($scope){
            $scope.data= [{
                'name': 'zhangsan',
                'City': 'chengdu',
                'favorite food': '火锅'
            },{
                'name': 'lisi',
                'City': 'beijing',
                'favorite food': '烤鸭北京'
            }]
        });
    </script>
>####6.3.8 自定义过滤器
    案例1：这个过滤器是将你类容中的第一个字母大写
    注意：过滤器本质上是一个会把我们输入的内容当作参数传入进去的函数
    <div ng-app="myApp.filters">
        {{ 'helloworld' | lowercase | myFilter }}
    </div>
    <script type="text/javascript">
        angular.module('myApp.filters', [])
                .filter("myFilter",function(){
                    return function(input){
                        if(input){  //多保护
                            return input[0].toUpperCase()+input.slice(1)
                        }
                    }
                })
    </script>
>
    案例2：编写一个过滤器，过滤出比10大的数字
    <div ng-app="myApp">
        {{ 9 | myFilter }}
    </div>
    <script type="text/javascript">
        var app = angular.module('myApp',[]);
        app.filter('myFilter',function () {
            return function(element){
                if(element>10){
                    return element;
                }
            }
        });
    </script>