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>
  ```

时间： 2024-11-03 21:36:49

AngularJS 笔记1的相关文章

AngularJS笔记---注册服务

在前面的笔记中,了解到AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, AngularJS提供了一个可以依赖注入的方法.我们可以将逻辑处理封装到Service中,需要调用只需要引入对应的Service即可. Angular 提供了3种方法来创建并注册我们自己的 service. 1.Factory 2.Service 3.Provider 一. Factory: 1. 下面构建了

AngularJS笔记

1,客户模板 angular中,模板和数据都会被发送到浏览器中,然后在客户端进行装配 2,MVC (1)MVC核心概念,把管理数据的代码(model).应用逻辑代码(controller).向用户展示数据的代码 (view)清晰地分离开 (2)Angular应用中: 试图就是Document ObjectModel 控制器就是Javascript类 模型数据则被储存在对象属性中 3,数据绑定 (1)数据绑定可自动将model和view间的数据同步 (2)Angular实现数据绑定的方式,可以让我

AngularJS笔记--自定义指令

在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义.  下面定义了一个简单的控件,点击后调转到博客园. Note: 1.命名方式:directive必须以小写字母开头,其中如果后面由大写字母,html调用的时候就要用 - 将单词分开. <html> <script src='angular.js'></script> <scri

AngularJS笔记---作用域和控制器

什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设置不同的ng-Controller来让$scope处于不同的作用域下面.  一.$rootScope 1.1 $rootScope可以理解成全局变量,一旦赋值对整个module都有效.$rootScpoe不依赖于任何一个controller,  app.run是module被加载时候执行的代码. 可

AngularJS笔记---数据绑定

一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 B.ng-models :  用于数据绑定, 也就是两个input的里面输入的信息都会绑定到val1和val2变量里面. C.{{ FiledName }}: 双括号也是用于数据的绑定. <!DOCTYPE html> <html> <script src="angul

AngularJS 笔记——$on、$emit和$broadcast的使用与区别

AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$rootScope的,或者说都是嵌套在主作用域下面的.很多时候,你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么. 那么在这种情况下,如何在作用域之间通信呢?其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 在AngularJS中还有另外一个选

AngularJS 笔记2

2017-03-23 本文更新链接: http://www.cnblogs.com/daysme/p/6613071.html $http angularjs中的ajax 向服务器请求数据 1/2 后台文件 test.php <?php $str='你好'; echo $str;?> 2/2 前台文件 <!DOCTYPE html><html lang="en" ng-app="app"><meta charset=&quo

web -- Angularjs 笔记2

<body ng-app="myApp">    <p>多个控制器</p>    <div ng-controller="Ctrl1">        <p>{{greeting.text}}, Angular</p>    </div>    <div ng-controller="Ctrl2">        <p>{{greeting

AngularJS笔记---路由视图

最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我们会有一个对应的controller和views,还有一个routerconfig. 其实在AngularJS也有类似的东西.下面我会按照Asp.net的MVC框架搭建一个AngularJs的小Demo出来. 一.创建文件目录: A. Controller文件夹放ng-controller的代码 B