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>

  ```