angular—入门

pentiumCM

已于 2023-05-15 19:24:53 修改

阅读量687

点赞数

文章标签： angular.js javascript 前端

于 2023-05-14 16:49:15 首次发布

本文链接：https://blog.csdn.net/pentiumCM/article/details/130669968

版权

MDN：
https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
菜鸟教程：https://www.runoob.com/angularjs/angularjs-tutorial.html
demo：https://blog.csdn.net/hbiao68/article/details/107461253

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
- scope 是模型：scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
- 根作用域：所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
  - $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
- AngularJS 控制器：
  - AngularJS 应用程序被控制器控制。
  - ng-controller 指令定义了应用程序控制器。
  - 控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
  - 控制器也可以有方法（变量和函数）
  - 控制器定义有两个参数：
    - 第一个是控制器名称(字符串)
    - 第二个是一个函数或者数组
      - 当为函数时, 表示控制器的构造函数
      - 当为数组时, 数组前面的元素为构造函数用到的字符串形式的服务, 数组最后一个元素为构造函数, 此时构造函数的参数列表和数组前面元素是一一对应的, 例如:
```
	module.controller("myController", function ($scope, $http, $timeout){//});
	module.controller("myController", ["$scope", "$http","$timeout", function (scope,http ,timeout ){//}]);
   ```
```

核心：模型和控制器。

指令	用法
AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init	指令初始化 AngularJS 应用程序变量
ng-app	指令告诉 AngularJS，元素是 AngularJS 应用程序的"所有者"。
ng-model	指令把输入域的值绑定到应用程序变量 name。
ng-bind	指令把应用程序变量 name 绑定到某个段落的 innerHTML。