AngularJS 学习笔记（一）

2024-05-13 20:48

文章标签 学习笔记 angularjs

本文主要是介绍AngularJS 学习笔记（一），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

AngularJS 学习笔记（一）

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

与jquery的区别：在jQuery里面，你会先设计好一个页面，然后再通过DOM操作使页面变成动态的。
在AngularJS的中，首先必须有整体架构，然后以MVC模式去设计页面。

AngularJS 实例：

<!DOCTYPE html>
<html><body><div ng-app="" ng-controller="personController" ng-init="show='ID Card'"><!--ng-controller用personController初始化，ng-init初始化show变量 -->
<div ng-bind=show>这行字不显示，只显示ID Card</div><!--把ng-init初始化的变量show绑定到div中-->
名： <input type="text" ng-model="person.firstName"><br><!--把ng-controller中初始化的变量person。firstName绑定到div中赋值-->
姓： <input type="text" ng-model="person.lastName"><br>
姓名： {{person.firstName + " " + person.lastName}}<br><!--AngularJS 表达式把数据绑定到 HTML，这与 <strong>ng-bind</strong> 指令有异曲同工之妙。-->
朋友: <input type="text" ng-model="country"><br>
<br>
<ul><li ng-repeat="x in friends | filter:country | orderBy:'country'"><!--过滤器，如filter是指表达式与ng-model=country匹配的值-->{{ (x.name | uppercase) + ', ' + x.country }}</li>
</ul>
</div><script>
function personController($scope) {$scope.person = {firstName: "John",lastName: "Snow"};$scope.friends = [{name:'Liva',country:'Norway'},{name:'Margin',country:'CSS'},{name:'Lucy',country:'Denmark'}];;}
</script><script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script></body>
</html>

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。
ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-app 通过一个值（比如 ng-app="myModule"）连接到代码模块。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-model 指令也可以：
    为应用程序数据提供类型验证（number、email、required）。
    为应用程序数据提供状态（invalid、dirty、touched、error）。
    为 HTML 元素提供 CSS 类。
    绑定 HTML 元素到 HTML 表单。

ng-init 不是很常见的初始化数据的方式，ng-controller更规范

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

ng-repeat 指令：

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

过滤器可以使用一个管道字符（|）添加到表达式和指令中（如<li ng-repeat="x in friends | filter:country | orderBy:'country'">中的filter、orderBy）。

这篇关于AngularJS 学习笔记（一）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！