angular—入门

angular—入门

一、参考资料

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

二、环境搭建

三、构成

AngularJS 应用组成如下：

1. View(视图), 即 HTML。

2. Model(模型), 当前视图中可用的数据。

   • scope 是模型：scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
   • 根作用域：所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
     • $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

3. 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。