精华内容
参与话题
问答
  • AngularJS

    2019-05-24 16:58:02
    AngularJS 通过新的属性和表达式扩展了 HTML。 AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。 AngularJS 学习起来非常简单。
  • AngularJs

    2020-11-02 11:52:04
    AngularJS 指令 正如您所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性。 ng-init 指令初始化 AngularJS 应用程序变量。 <div ng-app="" ng-init="firstName='John'"> <p>姓名为 <span ng-...

    AngularJS 指令
    正如您所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性。
    ng-init 指令初始化 AngularJS 应用程序变量。

    <div ng-app="" ng-init="firstName='John'">
     
    <p>姓名为 <span ng-bind="firstName"></span></p>
     
    </div>
    

    AngularJS 表达式
    AngularJS 表达式写在双大括号内:{{ expression }}。
    AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
    AngularJS 将在表达式书写的位置"输出"数据。
    AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
    实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

    <!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>
    

    AngularJS应用
    AngularJS 模块(Module) 定义了 AngularJS 应用。
    AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
    ng-app指令指明了应用, ng-controller 指明了控制器。

    AngularJS 模块(Module) 定义了 AngularJS 应用。
    AngularJS 控制器(Controller) 用于控制 AngularJS 应用。 
    ng-app指令指明了应用, ng-controller 指明了控制器。
    
    <div ng-app = 'myApp' ng-controller = 'myCtrl'>
    名:<input type = 'text' ng-model = 'firstName'></br>
    姓:<input type = 'text' ng-model = 'lastName'></br>
    </br>
    姓名:{{firstName + '' +'lastName'}}
    </div>
    <script>
    	var app = angular.module('myApp',[]);
    	app.controller('myCtrl',function($scope){
    		$scope.firstName = 'John';
    		$scope.lastName = 'Doe';
    })
    </script>
    

    AngularJS 模块(Module) 定义了 AngularJS 应用。
    AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
    ng-app指令指明了应用, ng-controller 指明了控制器。

    AngularJS数字

    <div ng-app="" ng-init="quantity=1;cost=5">
     
    <p>总价: {{ quantity * cost }}</p>
     
    </div>
    
    <div ng-app="" ng-init="quantity=1;cost=5">
     
    <p>总价: <span ng-bind="quantity * cost"></span></p>
     
    </div>
    

    AngularJS 数组

    <div ng-app="" ng-init="points=[1,15,19,2,40]">
     
    <p>第三个值为 {{ points[2] }}</p>
     
    </div>
    

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

    AngularJS 指令
    AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
    ng-app 指令初始化一个 AngularJS 应用程序。
    ng-init 指令初始化应用程序数据。
    ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

    • ng-bind 绑定
    • ng-model 双向绑定

    重复 HTML 元素

    <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
      <p>使用 ng-repeat 来循环数组</p>
      <ul>
        <li ng-repeat = 'x in names'>
        {{ x }}
        </li>
      </ul>
    </div>
    
    <div ng-app="" ng-init="names=[
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}]">
     
    <p>循环对象:</p>
    <ul>
      <li ng-repeat = 'x  in names'>
        {{ x.name + ', ' + x.country }}
      </li>
    </ul>
     
    </div>
    

    ng-app 指令
    ng-app 指令定义了 AngularJS 应用程序的 根元素。
    ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
    稍后您将学习到 ng-app 如何通过一个值(比如 ng-app=“myModule”)连接到代码模块。

    ng-init 指令
    ng-init 指令为 AngularJS 应用程序定义了 初始值。
    通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。
    稍后您将学习更多有关控制器和模块的知识。

    ng-model 指令
    ng-model 指令 绑定 HTML 元素 到应用程序数据。
    ng-model 指令也可以:
    为应用程序数据提供类型验证(number、email、required)。
    为应用程序数据提供状态(invalid、dirty、touched、error)。
    为 HTML 元素提供 CSS 类。
    绑定 HTML 元素到 HTML 表单。

    ng-repeat 指令
    ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。

    创建自定义的指令
    除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
    你可以使用 .directive 函数来添加自定义的指令。
    要调用自定义指令,HTML 元素上需要添加自定义指令名。
    使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

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

    可以通过以下方式来调用指令

    • 元素名
    <runoob-directive></runoob-directive>
    
    • 属性
    <div runoob-directive></div>
    
    • 类名
     <div class="runoob-directive"></div>
    
    • 注释
    <div class="runoob-directive"></div>
    

    限制使用
    你可以限制你的指令只能通过特定的方式来调用。

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

    restrict 值可以是以下几种:
    E 作为元素名使用
    A 作为属性使用
    C 作为类名使用
    M 作为注释使用
    restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

    AngularJS模型

    双向绑定

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

    验证用户输入

    <!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>
    
    <form ng-app="" name="myForm">
        Email:
        <input type="email" name="myAddress" ng-model="text">
        <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
    </form>
    
    <p>在输入框中输入你的邮箱地址,如果不是一个合法的邮箱地址,会弹出提示信息。</p>
    
    </body>
    </html>
    
    

    应用状态
    ng-model指令可以为应用数据提供状态值 (invalid,dirty,touched,error);

    <form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
     
    Email:
    <input type="email" name="myAddress" ng-model="myText" required>
    <p>编辑邮箱地址,查看状态的改变。</p>
    <h1>状态</h1>
    <p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)</p>
    <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)</p>
    <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)</p>
    

    CSS类

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
    <style>
    input.ng-invalid {
        background-color: lightblue;
    }
    </style>
    </head>
    <body>
    
    <form ng-app="" name="myForm">
        输入你的名字:
        <input name="myName" ng-model="myText" required>
    </form>
    
    <p>编辑文本域,不同状态背景颜色会发生变化。</p>
    <p>文本域添加了 required 属性,该值是必须的,如果为空则是不合法的。</p>
    
    </body>
    </html>
    

    ng-model 指令根据表单域的状态添加/移除以下类:
    ng-empty
    ng-not-empty
    ng-touched
    ng-untouched
    ng-valid
    ng-invalid
    ng-dirty
    ng-pending
    ng-pristine

    AngularJS Scope(作用域)

    Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
    Scope 是一个对象,有可用的方法和属性。
    Scope 可应用在视图和控制器上。

    当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递:
    当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。
    视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}。

    <div ng-app="myApp" ng-controller="myCtrl">
    
    <h1>{{carname}}</h1>
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    
    app.controller('myCtrl', function($scope) {
        $scope.carname = "Volvo";
    });
    </script>
    

    Scope 概述
    AngularJS 应用组成如下:
    View(视图), 即 HTML。
    Model(模型), 当前视图中可用的数据。
    Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
    scope 是模型。
    scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

    如果你修改了视图,模型和控制器也会相应更新:

    <div ng-app="myApp" ng-controller="myCtrl">
        <input ng-model="name">
        <h1>{{greeting}}</h1>
        <button ng-click='sayHello()'>点我</button>    
    </div>
     
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = "Runoob";
        $scope.sayHello = function() {
            $scope.greeting = 'Hello ' + $scope.name + '!';
        };
    });
    </script>
    

    Scope作用范围
    所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
    $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

    <div ng-app="myApp" ng-controller="myCtrl">
    
    <h1>{{lastname}} 家族成员:</h1>
    
    <ul>
        <li ng-repeat="x in names">{{x}} {{lastname}}</li>
    </ul>
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    
    app.controller('myCtrl', function($scope, $rootScope) {
        $scope.names = ["Emil", "Tobias", "Linus"];
        $rootScope.lastname = "Refsnes";
    });
    </script>
    

    AngularJS 过滤器

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

    • currency 格式化数字为货币格式。
    • filter 从数组项中选择一个子集。
    • lowercase 格式化字符串为小写。
    • orderBy 根据某个表达式排列数组。
    • uppercase 格式化字符串为大写。
    <div ng-app="myApp" ng-controller="personCtrl">
    
    <p>姓名为:{{ lastName | uppercase}}</p>
    
    </div>
    

    货币样式

    <div ng-app="myApp" ng-controller="costCtrl">
    
    <input type="number" ng-model="quantity">
    <input type="number" ng-model="price">
    
    <p>总价 = {{ (quantity * price) | curr
    
    </div>
    

    向指令添加过滤器
    orderBy过滤器根据表达式排列数组

    <div ng-app="myApp" ng-controller="namesCtrl">
    
    <ul>
      <li ng-repeat="x in names | orderBy:'country'">
        {{ x.name + ', ' + x.country }}
      </li>
    </ul>
    
    </div>
    

    过滤输入
    输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。
    filter 过滤器从数组中选择一个子集:

    <div ng-app="myApp" ng-controller="namesCtrl">
    
    <p><input type="text" ng-model="test"></p>
    
    <ul>
      <li ng-repeat="x in names | filter:test | orderBy :'country'">
        {{ (x.name | uppercase) + ', ' + x.country }}
      </li>
    </ul>
    
    </div>
    

    自定义过滤器

    <!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    
    <body>
    
    <div ng-app="myApp" ng-controller="myCtrl">
    
    
    姓名: {{ msg | reverse }}
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.msg = "HELLO";
    });
    app.filter('reverse', function() { //可以注入依赖
        return function(text) {
            return text.split("").reverse().join("");
        }
    });
    </script>
    
    </body>
    </html>
    

    AngularJS 服务(Service)

    什么是服务?
    在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
    AngularJS 内建了30 多个服务。

    $location服务
    $location 服务,它可以返回当前页面的 URL 地址。
    注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它,需要在 controller 中定义。

    <p> 当前页面的url:</p>
    <h3>{{myUrl}}</h3>
    
    
    var app = angular.module('myApp',[]);
    app.controller('customersCtrl',function($scope,$location){
    	$scope.myUrl = $location.absUrl();
    })
    

    $http 服务
    $http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。

    var app =  angular.module('myApp',[]);
    app.controller('myCtrl',function($scope,$http){
    	$http.get('welcome.htm').then(function(response){
    		$scope.myWelcome = response.data;
    })
    })
    

    $timeout 服务
    AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $timeout) {
        $scope.myHeader = "Hello World!";
        $timeout(function () {
            $scope.myHeader = "How are you today?";
        }, 2000);
    });
    

    AngularJS事件

    ng-click指令

    <div ng-app='' ng-controller='myCtrl'>
    <button ng-click='count = count + 1 '>点我!</button>
    <p>{{count}}</p>
    </div>
    

    隐藏HTML元素
    ng-hide指令用于设置应用部分是否可见
    ng-hide=“true” 设置 HTML 元素不可见。
    ng-hide=“false” 设置 HTML 元素可见。

    <div ng-app="myApp" ng-controller="personCtrl">
    
    <button ng-click="toggle()">隐藏/显示</button>
    
    <p ng-hide="myVar">: <input type="text" ng-model="firstName"><br>
    姓名: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}
    </p>
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl',function($scope){
    	$scope.firstName = 'John',
    	$scope.lastName = 'Doe'
    	$scope.myVar = false;
    	$scope.toggle = function(){
    		$scope.myVar = !$scope.myVar;
    }
    })
    </script>
    
    展开全文
  • angularjs

    2019-10-04 23:25:28
    教程: http://www.runoob.com/angularjs/angularjs-tutorial.html angularjs中文网 : http://www.apjs.net/ 一个调试器 :http://www.runoob.com/try/try.php?filename=try_ng_intro 下载angularjs :...

    教程:  http://www.runoob.com/angularjs/angularjs-tutorial.html

    angularjs中文网 :  http://www.apjs.net/

    一个调试器 : http://www.runoob.com/try/try.php?filename=try_ng_intro

    下载angularjs :https://angularjs.org/

    转载于:https://www.cnblogs.com/liaocheng/p/5051384.html

    展开全文

空空如也

1 2 3 4 5 ... 20
收藏数 46,329
精华内容 18,531
关键字:

angularjs