zoukankan html css js c++ java

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

查看全文

相关阅读:
[ERR] Node 10.211.55.8:7001 is not empty. Either the node already knows other nodes (check with CLUSTER NODES) or contains some key in database 0.
PAT A1137 Final Grading （25 分）——排序
 PAT A1136 A Delayed Palindrome （20 分）——回文，大整数
 PAT A1134 Vertex Cover （25 分）——图遍历
 PAT A1133 Splitting A Linked List （25 分）——链表
 PAT A1132 Cut Integer （20 分）——数学题
 PAT A1130 Infix Expression （25 分）——中序遍历
 PAT A1142 Maximal Clique （25 分）——图
 PAT A1141 PAT Ranking of Institutions （25 分）——排序，结构体初始化
 PAT A1140 Look-and-say Sequence （20 分）——数学题

原文地址：https://www.cnblogs.com/daysme/p/6606805.html