AngularJs学习体会

最新推荐文章于 2020-06-10 13:29:07 发布

前端漫谈

最新推荐文章于 2020-06-10 13:29:07 发布

阅读量583

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架

本文链接：https://blog.youkuaiyun.com/hcz804933522/article/details/42061137

前端框架专栏收录该内容

54 篇文章

订阅专栏

本文深入讲解AngularJS框架的核心概念及实际应用，包括数据绑定、指令使用、控制器功能等，并通过实例演示如何利用AngularJS简化前端开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键点在于自己要吃透其想法，而不是一味的记忆语法规则。这样才能凌驾语言之上。

1.汇智网学习AngularJs。Angularjs是一个JavaScript框架，增强(ng-directives )HTML表现力，减少开发者很多js处理。AngularJS可以干什么：

AngularJS 把应用程序数据绑定到 HTML 元素。参考下例1-4。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。
HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效

例子

@1.ng-app，同一个网页可以多个，但是感觉是一个作用域的标示，用于区分不同。但是使用“0”，“1”时候，居然不起作用，直接输出，很疑惑？

其中的ng-init，就是一个js初始化作用域，这里可以设置变量，对象，然后使用。是否可设置方法，不得而知?

后面的ng-bind，{{}},都是特定的触发替换数据而已。

ng-model，是数据模型；数据来源，自然就可以想到展示需要ng-bind。

千万不可忘的，就是Angular是javascript框架。

控制器就是提供一个更大的空间，容纳属性、方法绑定到html，进行数据替换。

AngularJs所有指令的使用，在其作用域内，都可以随心使用。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-size:18px;"><!DOCTYPE HTML>
<html>
<head>
	<title> 测试页 </title>
	<meta charset="utf-8">
	<script src="http://www.hubwiz.com/javascripts/angular.min.js"></script>
</head>
<body>
<div ng-app="0" ng-init="num=100;price=8">
  <p>总价：{{num*price}}</p>
  <div>
    
    <div ng-app="" ng-init="name=['tom','jerry','jack']">
      <p>your name:{{name[0]}}</p>
    </div>
    
</body>
</html></span></span>

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-size:18px;">
总价：{{num*price}}

your name:{{name[0]}}
</span></span>

@2.ng-model实现数据的双向绑定，解决了很多js处理的问题。不过，{{}}不能直接的输出没有引号的文字，譬如：{{zz}}。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><div ng-app=''>
    <input type='text' ng-model='name'/>
    <p>param :{{name}}</p>
</div></span>

@3..ng-bind === {{}}，但是实在文档加载完毕后，替换数据。执行时间晚于{{}}

<span style="font-family:KaiTi_GB2312;font-size:18px;"><div ng-app=''>
      	<input type="text" ng-model='name'/>
      <p> Hello : <span ng-bind='name'></span></p>
</div></span>

注解：

ng-model:把用户输入的数据双向绑定到变量；ng-bind，把上述的变量，应用到前端视图，进行显示。

ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

@4.ng-click ,点击事件，让你更专注与业务逻辑

<span style="font-family:KaiTi_GB2312;font-size:18px;"> <div ng-app='' ng-init="click=false">
    <input type="button" value="hidden/show" ng-click="click=!click"/>
    <div ng-hide="click">
      	<input type="text" ng-model="name" />
      	<p ng-bind="name"></p>
    </div>
  </div></span>

@5.ng-repeat 来循环迭代

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
<div>