angularjs学习笔记--1.入门

最新推荐文章于 2024-04-29 17:01:02 发布

weixin_34210740

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量63

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mrxia/p/4196143.html

版权

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	根据某个表达式排列数组。

转载于:https://www.cnblogs.com/mrxia/p/4196143.html

weixin_34210740

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs学习笔记--1.入门

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：<script src="angular.js"></script>AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。Angu...
复制链接

扫一扫