zoukankan      html  css  js  c++  java
  • angularjs学习笔记--1.入门

    AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

    AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:<script src="angular.js"></script>

    AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML。

    AngularJS 扩展了 HTML

    AngularJS 通过 ng-directives 扩展了 HTML。

    ng-app 指令定义一个 AngularJS 应用程序。

    ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

    ng-bind 指令把应用程序数据绑定到 HTML 视图。

    angularjs实例:

    <!DOCTYPE html>
    <html>
    <body>
    
        <div ng-app="">
          <p>在输入框中尝试输入:</p>
          <p>姓名:<input type="text" ng-model="name"></p>
          <p ng-bind="name"></p>
        </div>
    
        <script src="angular.js"></script>
    
    </body>
    </html>

    实例讲解:

    当网页加载完毕,AngularJS 自动开启。

    ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

    ng-model 指令把输入域的值绑定到应用程序变量 name

    ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

    angularjs 1.3完整示例:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Example - example-example10</title>
      
    
      <script src="../../../angular.min.js"></script>
      <script src="script.js"></script>
      
    
      
    </head>
    <body ng-app="docsSimpleDirective">
      <div ng-controller="Controller">
      <div my-customer></div>
    </div>
    </body>
    </html>

    script.js: 

    (function(angular) {
      'use strict';
    angular.module('docsSimpleDirective', [])
      .controller('Controller', ['$scope', function($scope) {
        $scope.customer = {
          name: 'Naomi',
          address: '1600 Amphitheatre'
        };
      }])
      .directive('myCustomer', function() {
        return {
          template: 'Name: {{customer.name}} Address: {{customer.address}}'
        };
      });
    })(window.angular);

    angularjs 参考:

    AngularJS 指令

    指令 描述
    ng-app 定义应用程序的根元素。
    ng-bind 绑定 HTML 元素到应用程序数据。
    ng-click 定义元素被单击时的行为。
    ng-controller 为应用程序定义控制器对象。
    ng-disabled 绑定应用程序数据到 HTML 的 disabled 属性。
    ng-init 为应用程序定义初始值。
    ng-model 绑定应用程序数据到 HTML 元素。
    ng-repeat 为控制器中的每个数据定义一个模板。
    ng-show、ng-hide 显示或隐藏 HTML 元素。

     

    AngularJS 过滤器

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

     

     

     

     

     

  • 相关阅读:
    uva10341
    android_定义多个Activity及跳转
    阿里巴巴2014年校园招聘(秋季招聘)在线笔试--測试研发project师
    关于程序猿的几个阶段!
    【Spring】Spring学习笔记-01-入门级实例
    感知器算法(二分类问题)
    Ubuntu14.04下安装ZendStudio10.6.1+SVN出现Failed to load JavaHL Library
    EF架构~关系表插入应该写在事务里,但不应该是分布式事务
    EF架构~在global.asax里写了一个异常跳转,不错!
    EF架构~为导航属性赋值时ToList()的替换方案
  • 原文地址:https://www.cnblogs.com/mrxia/p/4196143.html
Copyright © 2011-2022 走看看