AngularJS 笔记1

Posted

tags:

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

什么是 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>

自定义指令

  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>

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 学习笔记 组件

angularjs2 学习笔记 组件

angularJS使用ocLazyLoad实现js延迟加载

AngularJS笔记

AngularJS学习笔记

AngularJS谷歌地图点击事件不在ios设备ipad和iphone中触发