zoukankan      html  css  js  c++  java
  • AngularJS

    1.AngularJS 表达式与JavaScript对比

    类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
    与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
    与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
    与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

     2.调用指令的方式

    • 元素名
    • 属性
    • 类名
    • 注释

    3.限制使用指令

    var app = angular.module("myApp", []);
    app.directive("testDirective", function(){
        return {
            restrict: "A",
            template: "<h1>测试自定义指令!</h1>"    
        };
    });


    restrict值可以是以下几种:

    • E 作为元素名使用
    • A 作为属性使用
    • C 作为类名使用
    • M 作为注释使用

    restrict 默认值为EA,即可以通过元素名和属性名来调用指令。

    4.ng-show

    <form ng-app="" name="myForm">
        Email:
        <input type="email" name="myAddress" ng-model="text">
        <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
    </form>

    以上实例中,提示信息会在ng-show 属性返回true的情况下显示。

    5.ng-model 指令根据表单域的状态添加/移除以下类:

    • ng-empty
    • ng-not-empty
    • ng-touched
    • ng-untouched
    • ng-valid
    • ng-invalid
    • ng-dirty
    • ng-pending
    • ng-pristine

    6.作用域 $scope

    创建控制器时,将$rootScope作为参数传递,可在应用中使用:

     1 <div ng-app="myApp" ng-controller="myCtrl">
     2     <h1>{{lastname}} 家族成员:</h1>
     3     <ul>
     4         <li ng-repeat="x in names">{{x}} {{lastname}}</li>
     5     </ul>
     6 </div>
     7 
     8 <script>
     9 var app = angular.module('myApp', []);
    10 
    11 app.controller('myCtrl', function($scope, $rootScope) {
    12     $scope.names = ["Emil", "Tobias", "Linus"];
    13     $rootScope.lastname = "Refsnes";
    14 });
    15 </script>
    16 来自:www.runoob.com
    View Code

    7.控制器

    AngularJS 控制器控制AngularJS应用程序的数据,是常规的JavaScript对象。

    控制器可以有控制器属性和方法;可在script标签中定义也可以定义在外部文件中供其他文件通过script标签引用。

    控制器文件*.js:

    angular.module("myApp",[]).controller("testControl", function($scope){
        $scope.humans = [
            {name:'Json', country:'America'},
            {name:'Lili', country:'China'}
        ];
    });

    8.过滤器

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

    通过管道字符使用:表达式中添加过滤器 {{name | lowercase}}。可使用多个,用管道字符隔开。

    9.服务 如果要使用某个服务,需要在controller定义时参数中声明。

    $location 服务,返回当前页面的URL地址。

    $http服务 向服务器发送请求,响应服务器传过来的数据。

    $http.get("hello.com").then(function(response){
        $scope.something = response.data;
    });

    $timeout服务类似于window.setTimeout

    两秒后do something

    $timeout(function(){$scope.myHeader = "some thing";}, 2000);

    $interval服务 类似JS的window.setInterval函数

    使用:$interval(function(){//要执行的操作},millisecond);

    创建自定义服务:

    app.service('myService', function(){this.myFun = function(){}});

    要使用自定义的服务,需要在定义控制器的时候独立添加。

    app.controller('myControl', function($scope, myService){});

  • 相关阅读:
    mysql in 的另一种替换方法
    js 的一些总结
    医院收费系统 一点的简单总结
    物流系统
    mysqldump备份还原和mysqldump导入导出语句大全详解
    android 环境待建遇到的问题
    EXT CheckboxSelectionModel 多选效果
    Ext Grid动态生成Column的实现方式
    Javascript对象继承(原型继承法)
    ExtJS中grid的JsonStore、Ext.PagingToolbar带条件查询问题
  • 原文地址:https://www.cnblogs.com/GoQC/p/6033114.html
Copyright © 2011-2022 走看看