AngularJS的学习笔记

Posted 2020-08-16

声明：单纯作为我自己的学习笔记，纯是为了自己学习，上面的话都是从各处粘贴，如有冒犯，请原谅我这个小菜鸟~

 

AngularJS使用了不同的方法，它尝试去补足html本身在构建应用方面的缺陷。

使用双大括号{{}}语法进行数据绑定；

使用DOM控制结构来实现迭代或者隐藏DOM片段；

支持表单和表单的验证；

能将逻辑代码关联到相关的DOM元素上；

能将HTML分组成可重用的组件。

 

AngularJS主要考虑的是构建CRUD应用。（增加Create、查询Retrieve、更新Update、删除Delete）。

幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。

如游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用，和CRUD应用就有很大的不同，它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

 

AngularJS的优点：

1）移除回调。回调的使用会打乱你的代码的可读性，让你的代码变得支离破碎，很难看清本来的业务逻辑。大幅度地减少你因为javascript这门语言的设计而不得不写的代码，能让你把自己应用的逻辑看得更清楚。

2）用声明的方式描述的UI界面可随着应用状态的改变而变化，能让你从编写低级的DOM操作代码中解脱出来。绝大部分用AngularJS写的应用里，开发者都不用再自己去写操作DOM的代码，不过如果你想的话还是可以去写。

3）4）百度百科里有，就不粘贴了。

 

以上是AngularJS的背景介绍，，那么现在，要开始学习啦：）。

 

AngularJS 通过新的属性和表达式扩展了 HTML。

AngularJS 可以构建一个单一页面应用程序

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

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

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

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

 

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

• AngularJS 把应用程序数据绑定到 HTML 元素。
• AngularJS 可以克隆和重复 HTML 元素。
• AngularJS 可以隐藏和显示 HTML 元素。
• AngularJS 可以在 HTML 元素"背后"添加代码。
• AngularJS 支持输入验证。

第一步，想jQuery一样，先把文件引进来呀

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

建议放在body的下面，原因你知道的。

各个 angular.js 版本下载： https://github.com/angular/angular.js/releases

在某一个div中加入ng-app=“”来开启一个angularjs的一个应用程序

AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。

HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

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

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

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。

 

AngularJS 模块

var app = angular.module(‘myApp‘, []);

 

AngularJS 控制器

app.controller(‘myCtrl‘, function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});