AngularJS 入门介绍

最新推荐文章于 2020-02-02 15:54:41 发布

天明少侠

最新推荐文章于 2020-02-02 15:54:41 发布

阅读量224

点赞数

分类专栏： Front-end frame 文章标签： AngularJS 前端框架

本文链接：https://blog.csdn.net/thebigdipperbdx/article/details/79498101

版权

Front-end frame 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、AngularJS 简介

AngularJS是Google工程师研发的一款JS框架，官方文档中对它的描述是，它是完全使用JavaScript编写的客户端技术，同其他历史悠久的Web技术（HTML，CSS等）配合使用，使得Web开发变得更简单、更高效。它是笔者用过的比较有特色的一款框架，以HTML作为模版语言并扩展HTML属性，使得应用组件开发保持高度的清晰和一致。

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。它是一个以 JavaScript 编写的库。

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

二、AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

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

三、AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
 
<div ng-app="">
     <p>名字 : <input type="text" ng-model="name"></p>
     <h1>Hello {{name}}</h1>
</div>
 
</body>
</html>

实例讲解：
当网页加载完毕，AngularJS 自动开启。
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。

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

四、AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
 
<div ng-app="">
     <p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>
 
</body>
</html>

五、常用AngularJS 指令

1. ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。所有的 HTML 元素都支持该指令。

<span ng-bind="normalCard | formatCard"></span>  //span标签用ng-bind，其中formatCard是过滤器  
<div class="success flex-column flex-center" ng-show="info.resultScc">  
    <label>还款成功</label>  
    <img src="img/dolphin.png">  
    <div class="f-14">本次还款金额</div>  
    <div class="f-14 green" ng-bind="payAmtDesc"></div>  
    <div class="btn-primary m-top-100" ng-click="backToMenu()">完成</div>  
</div>  
//所有的 HTML 元素都支持该指令  
<element ng-bind="expression"></element>  
或作为 CSS 类：  
<element class="ng-bind: expression"></element>

2.ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

<input type="text" pattern="\d*" placeholder="6位验证码" maxlength="6" ng-focus="msgCode=''" ng-model="msgCode">  
//双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改  
<div ng-app="myApp" ng-controller="myCtrl">  
    名字: <input ng-model="name">  
    <h1>你输入了: {{name}}</h1>  
</div>

3.ng-init 指令初始化应用程序数据。

<div ng-app="" ng-init="firstName='John'">
 
     <p>在输入框中尝试输入：</p>
     <p>姓名：<input type="text" ng-model="firstName"></p>
     <p>你输入的为： {{ firstName }}</p>
 
</div>

4. ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。

<div class="m-top-10" infinite-scroll="getMore()" infinite-scroll-distance="0" infinite-scroll-disabled="isBusy">
	<div class="ctn-full m-bottom-15 bg-white" ng-repeat = "item in articles" ng-click="toHotActivity(item)">
		<div class="col-12">
			<img class="col-12" ng-src="{{item.picUrl}}" />
		</div>
		<div class="hotActivity no-border">
			<span class="red" >{{item.tag}}</span>
			<span>{{item.title}}</span>
		</div>
	</div>
</div>

5. ng-show 指令在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素。

<body ng-app="">

显示 HTML: <input type="checkbox" ng-model="myVar">
<div ng-show="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>

</body>

6. ng-click 指令告诉了 AngularJS HTML 元素被点击后需要执行的操作（JavaScript 函数）

<div class="flex flex-gapless-input no-border-top border-bottom" ng-click="showDetailInfo()">
	<label>本期账单金额</label>
	<span class="green col-5" ng-init="outBill='￥0.00'" ng-bind="outBill | fmtAmt"></span>
	<div class="flex flex-end flex-grow-1">
		<img class="arrow-down" src="img/arrow-green-down.png" ng-show="!showListDetail"/>
		<img class="arrow-down" src="img/arrow-green-up.png" ng-show="showListDetail"/>
		<img class="trans-detial m-left-5" src="img/detail.png" alt="明细"/>
	</div>
</div>

7. ng-focus，当输入框获取焦点时执行表达式

<input ng-focus="count = count + 1" ng-init="count=0" />

<h1>{{count}}</h1>

8. ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类

<select ng-model="home">
    <option value="sky">Sky</option>
    <option value="tomato">Tomato</option>
</select>

<div ng-class="home">
    <h1>Welcome Home!</h1>
    <p>I like it!</p>
</div>

<div class="bottom-popup-menu" ng-class="{true:'popup-show',false:'popup-hide'}[info.repayInfo]" ng-show="info.repayInfo">	
	<div class="bottom-popup-menu-title">
			<span class="green" ng-click="toggle('repayInfo')">取消</span>
			<label>还款详情</label>
	</div>
</div>

天明少侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 入门介绍

一、AngularJS 简介AngularJS是Google工程师研发的一款JS框架，官方文档中对它的描述是，它是完全使用JavaScript编写的客户端技术，同其他历史悠久的Web技术（HTML，CSS等）配合使用，使得Web开发变得更简单、更高效。它是笔者用过的比较有特色的一款框架，以HTML作为模版语言并扩展HTML属性，使得应用组件开发保持高度的清晰和一致。AngularJS 是一个 Ja...
复制链接

扫一扫