美文网首页
AngularJS初步

AngularJS初步

作者: e02f7fdbb400 | 来源:发表于2018-02-06 17:51 被阅读29次

    AngularJS是一个javascript框架,可通过script标签添加到网页中:

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    
    AngularJS表达式

    AngularJS表达式可以是文字、运算符和变量
    写在大括号内:{{expression}}
    AngularJS将在表达式书写的位置"输出"数据

    AngularJS指令

    AngularJS指令是扩展的HTML属性,带有前缀ng-
    ng-app指令初始化一个AngularJS一个用程序
    ng-init指令初始化应用程序数据。
    ng-model指令把元素值绑定到应用程序。
    可将输入域的值与AngularJS创建的变量绑定

    <div ng-app="myApp" ng-controller="myCtrl">
          名字:<input ng-model="name">
    </div>
    
    <script>
    var app=angular.module('myApp',[]);
    app.controller('myCtrl',function($scope){
            $scope.name="John Doe";
    });
    </script>
    

    ng-repeat指令会重复一个HTML元素
    .directive函数来添加自定义的指令,使用驼峰法来命令一个指令,runoobDirective,但在使用它时需要以-分割,runoob-directive

    <body ng-app="myApp">
    
    <runoob-directive></runoob-directive>
    
    <script>
    var app = angular.module("myApp", []);
    app.directive("runoobDirective", function() {
        return {
            template : "<h1>自定义指令!</h1>"
        };
    });
    </script>
    
    </body>
    

    可通过元素名、属性、类名、注释来调用。
    限制使用,通过添加restrict属性。

    Scope作用域

    所有的应用都有一个$rootScope,它可以作用在ng-app指令包含的所有html元素中。
    rootscope定义的值,可在各个controller中使用

    AngularJS控制器

    ng-controller指令定义了应用程序控制器。控制器是javascript对象,由标准的javascript对象的构造函数创建。
    使用$scope对象来调用控制器,

    AngularJS过滤器

    可用于转换数据
    表达式中的过滤器

    <div ng-app="myApp" ng-controller="personCtrl">
    <p>姓名为{{ lastName | uppercase }}</p>
    </div>
    

    reverse自定义过滤器
    AngularJS服务
    在AngularJS中,服务是一个函数或对象,可在AngularJS应用中使用。
    $location服务,返回当前页面的 URL 地址
    http服务向服务器发送请求,相应服务器发送过来的数据
    $timeout服务对应了 JS window.setTimeout函数
    $interval服务对应了 JS window.setlnterval函数。
    创建自定义服务

    app.service('hexafy',function(){
          this.myFunc = function(x){
                  return x.toString(16);
            }
    });
    
    AnuglarJS select

    使用ng-option来创建下拉列表
    ng-repeat指令是通过数组来循环HTML代码来创建下拉列表,但ng-options指令更适合创建下拉列表
    ng-option的选项是一个对象,ng-repeat是一个字符串。

    AngularJS HTML DOM

    *ng-disabled指令直接绑定应用程序数据到HTML的disabled属性。
    ng-show8指令隐藏或显示一个。g-include
    指令来包含 HTML 内容

    相关文章

      网友评论

          本文标题:AngularJS初步

          本文链接:https://www.haomeiwen.com/subject/egcizxtx.html