AngularJS 笔记1

Posted 2020-09-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS 笔记1相关的知识，希望对你有一定的参考价值。

2017-03-23

本文更新链接： http://www.cnblogs.com/daysme/p/6606805.html

什么是 angularjs

2009年有两个外国人创建，后由谷歌收购并开源。
他的特点有MVC、模块化、双向数据绑定、语义化标签、依赖注入等。
AngularJS主要考虑的是构建CRUD应用，90%的应用都是CRUD应用，游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用不合适他做。
CRUD(增加Create、读取Read、更新Update、删除Delete)

安装

引入 angular.js
在 html 标签上添加 ng-app=””

入门规则

angularjs 中对数组，对象的获取方法和以前不同，数组是用下标，对象通过点(.)来获取。
ng-init 指定可以定义多个变量，每个变量由分号分开，先从标签内找变量，如果找不到，进行全局查找，都找不到也不报错。
```
<div>{{b}}</div>
<div ng-init="a=1;b=2;">{{a}}</div>
```
{{}} 是双向数据绑定的一种方式，里面写的是需要得到的变量名称。这种方式叫双括号插值法。另一种方式是 ng-bind=”“ 引号里写想要的变量。建议使用 ng-bind ，避免没有被渲染的模块提前暴露在页面上。

ng-model 是把元素的值绑定相应的应用程序，和 ng-bind 合作即双向数据绑定。

双向数据绑定：

<input ng-model="val">
<div ng-bind="val"></div>

双向数据绑定并设置初始值：

水：<input ng-model="a" ng-init="a=10">元/瓶<br>
数量：<input ng-model="b" ng-init="b=1"><br>
合计：<span ng-bind="a*b"></span>元

ng-repeat 遍历并渲染到页面上。

<ul ng-init="aa=[1,3,5,2]">
<li ng-repeat="i in aa" ng-bind="i"></li>
</ul>

ng-click 定义点击事件，以下代码点击1次加1。

<button ng-init="a=1" ng-click="a=a+1" ng-bind="a"></button>

ng-hide=”true” 设置元素不可见。

ng-show=”true” 设置元素可见。

<button ng-init="a=true" ng-click="a=!a">点击</button>
<div ng-show="a">显示/隐藏</div>

控制器

ng-controller 定义控制器。每创建一次，就会生成一个 $对象，这个对象的功能负责把控制器和关联在一起，每个控制器间互不影响，scope可以像变量一样在作用域间传递和使用。$
- 高版本的控制器不能直接在 js 中定义。
ng-app=”” 静态的指令，直接启动。如果有多个，只启动第一个。如果加在某 div 上，表示这个 div 标签内有效。还有一种动态的让 angularjs 运行的方式，在 js 中写 angula.bootstrap(启动对象,导入时载入的模块)。

通过 angularjs 来控制 dom 元素，是通过 angularjs 内置的一个精简版的 jquery-jqlite ; 使他可以像 jq 一样进行 dom 操作。 jqlite 是 angular.element 提供出来的，和 jq 操作差不多，只不过不能使用 this 。并且不能直接获取 dom 元素，如果通过标签名查找的话可通过 angular.element(document).find(\'标签名\') 查找。

以下代码没有使用 ng-app，使用的是 angular.bootstrap 动态启动 angular

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<button id="btn">点击</button>
<script src="angular1.min.js"></script>
<script>
angular.element(document).ready(function(){
  var btn=document.getElementById(\'btn\');
  angular.element(btn).on(\'click\',function(){
    alert(1);
  });
  angular.bootstrap(btn,[]);
})
</script>
</body>
</html>

控制器在 1.3.0-beta.15 以上不再支持全局的 Controller 。以下代码使用的是 1.3.0-beta.14 版本，如果使用 1.3.0-beta.15 会报错。
因为从Angular-1.3.0 beta15开始，Angular不再支持全局的Controller！

<!DOCTYPE html>
<html  ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-controller="fn">
姓名：<input type="text" ng-model="aa"><br>
<input type="button" value="问候" ng-click="tap()">
<div ng-init="name" ng-bind="name"></div>
</div>
</body>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.14/angular.min.js"></script>
<script>
function fn($scope){
  $scope.tap=function(){
    $scope.name="hello"+$scope.aa
  }
}
</script>
</html>

使用 module 实现控制器。

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<body>
<div id="bo" ng-controller="mycontroller" ng-bind="msg"></div>
<script src="angular1.min.js"></script>
<script>
var myApp=angular.module(\'aa\',[]) //1 定义模块，注入需要的服务
var element=angular.element(document.getElementById(\'bo\')); //获取元素
var aa=function($scope){ //2 里面发生的事，通过 $scope 控制
$scope.msg=\'hi\';
}
myApp.controller(\'mycontroller\',aa); //3 通过控制器调用模块
angular.bootstrap(element,[\'aa\']); //4 运行 angular
</script>
</body>
</html>

自定义指令

让 html 更有语义，不需要深入研究代码和逻辑，就可知道页面的大致逻辑。

抽象一个自定义的组件，在其他地方可以重用。

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<body>
<mytag ng-app="myApp"></mytag>
<script src=\'angular1.min.js\'></script>
<script>
var myApp = angular.module("myApp", []);
myApp.directive("mytag", function() {
  return {
    template : "<h1>自定义指令!</h1>"
  };
});
</script>
</body>
</html>

MD:

- 2017-03-23
- 本文更新链接： http://www.cnblogs.com/daysme

## 什么是 angularjs
  2009年有两个外国人创建，后由谷歌收购并开源。
  他的特点有MVC、模块化、双向数据绑定、语义化标签、依赖注入等。
  AngularJS主要考虑的是构建CRUD应用，90%的应用都是CRUD应用，游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用不合适他做。
  *CRUD(增加Create、读取Read、更新Update、删除Delete)*
## 安装
- 引入 angular.js
- 在 html 标签上添加 ng-app="" 

## 入门规则
- angularjs 中对数组，对象的获取方法和以前不同，数组是用下标，对象通过点(.)来获取。
- ng-init 指定可以定义多个变量，每个变量由分号分开，先从标签内找变量，如果找不到，进行全局查找，都找不到也不报错。

  ```
  <div>{{b}}</div>
  <div ng-init="a=1;b=2;">{{a}}</div>
  ```

- **{{}}** 是双向数据绑定的一种方式，里面写的是需要得到的变量名称。这种方式叫双括号插值法。另一种方式是 **ng-bind=""** 引号里写想要的变量。建议使用 ng-bind ，避免没有被渲染的模块提前暴露在页面上。
- ng-model 是把元素的值绑定相应的应用程序，和 ng-bind 合作即双向数据绑定。
  - 双向数据绑定：
  
    ```
    <input ng-model="val">
    <div ng-bind="val"></div>
    ```

  - 双向数据绑定并设置初始值：

    ```
    水：<input ng-model="a" ng-init="a=10">元/瓶<br>
    数量：<input ng-model="b" ng-init="b=1"><br>
    合计：<span ng-bind="a*b"></span>元
    ```

- ng-repeat 遍历并渲染到页面上。

  ```
  <ul ng-init="aa=[1,3,5,2]">
    <li ng-repeat="i in aa" ng-bind="i"></li>
  </ul>
  ```

- ng-click 定义点击事件，以下代码点击1次加1。

  ```
  <button ng-init="a=1" ng-click="a=a+1" ng-bind="a"></button>
  ```

- ng-hide="true" 设置元素不可见。
- ng-show="true" 设置元素可见。

  ```
  <button ng-init="a=true" ng-click="a=!a">点击</button>
  <div ng-show="a">显示/隐藏</div>
  ```

## 控制器
- ng-controller 定义控制器。每创建一次，就会生成一个 $scope 对象，这个对象的功能负责把控制器和 dom 关联在一起，每个控制器间互不影响，$scope可以像变量一样在作用域间传递和使用。
    - 高版本的控制器不能直接在 js 中定义。
- ng-app="" 静态的指令，直接启动。如果有多个，只启动第一个。如果加在某 div 上，表示这个 div 标签内有效。还有一种动态的让 angularjs 运行的方式，在 js 中写 angula.bootstrap(启动对象,导入时载入的模块)。

通过 angularjs 来控制 dom 元素，是通过 angularjs 内置的一个精简版的 jquery-jqlite ; 使他可以像 jq 一样进行 dom 操作。 jqlite 是 angular.element 提供出来的，和 jq 操作差不多，只不过不能使用 this 。并且不能直接获取 dom 元素，如果通过标签名查找的话可通过 `angular.element(document).find(\'标签名\')` 查找。

- 以下代码没有使用 ng-app，使用的是 angular.bootstrap 动态启动 angular

  ``` 
  <!DOCTYPE html>
  <html lang="en">
  <meta charset="UTF-8">
  <button id="btn">点击</button>
  <script src="angular1.min.js"></script>
  <script>
    angular.element(document).ready(function(){
      var btn=document.getElementById(\'btn\');
      angular.element(btn).on(\'click\',function(){
        alert(1);
      });
      angular.bootstrap(btn,[]);
    })
  </script>
  </body>
  </html>
  ```

- 控制器在 1.3.0-beta.15 以上不再支持全局的 Controller 。以下代码使用的是 1.3.0-beta.14 版本，如果使用 1.3.0-beta.15 会报错。
    因为从Angular-1.3.0 beta15开始，Angular不再支持全局的Controller！

  ```
  <!DOCTYPE html>
  <html  ng-app="">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
  <div ng-controller="fn">
    姓名：<input type="text" ng-model="aa"><br>
    <input type="button" value="问候" ng-click="tap()">
    <div ng-init="name" ng-bind="name"></div>
  </div>
  </body>
  <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.14/angular.min.js"></script>
  <script>
    function fn($scope){
      $scope.tap=function(){
        $scope.name="hello"+$scope.aa
      }
    }
  </script>
  </html>
  ```

- 使用 module 实现控制器。

  ``` 
  <!DOCTYPE html>
  <html lang="en">
  <meta charset="UTF-8">
  <body>
  <div id="bo" ng-controller="mycontroller" ng-bind="msg"></div>
  <script src="angular1.min.js"></script>
  <script>
  var myApp=angular.module(\'aa\',[]) //1 定义模块，注入需要的服务
  var element=angular.element(document.getElementById(\'bo\')); //获取元素
  var aa=function($scope){ //2 里面发生的事，通过 $scope 控制
    $scope.msg=\'hi\';
  }
  myApp.controller(\'mycontroller\',aa); //3 通过控制器调用模块
  angular.bootstrap(element,[\'aa\']); //4 运行 angular
  </script>
  </body>
  </html>
  ```



## 自定义指令
1. 让 html 更有语义，不需要深入研究代码和逻辑，就可知道页面的大致逻辑。
2. 抽象一个自定义的组件，在其他地方可以重用。

  ```
  <!DOCTYPE html>
  <html lang="en">
  <meta charset="UTF-8">
  <body>
  <mytag ng-app="myApp"></mytag>
  <script src=\'angular1.min.js\'></script>
  <script>
    var myApp = angular.module("myApp", []);
    myApp.directive("mytag", function() {
      return {
        template : "<h1>自定义指令!</h1>"
      };
    });
  </script>
  </body>
  </html>
  ```

View Code

以上是关于AngularJS 笔记1的主要内容，如果未能解决你的问题，请参考以下文章

angularjs2 学习笔记组件

angularJS使用ocLazyLoad实现js延迟加载

AngularJS笔记

AngularJS学习笔记