AngularJS 初步理解

AngularJS 初步理解

AngularJs 是一个JavaScript 框架。它可通过 script标签添加到 HTML 页面。

HTML中AngularJS指令使用格式和方法：

AngularJS 通过 ng-directives 扩展了 HTML。

1. ng-app 指令定义一个 AngularJS 应用程序，指令在网页加载完毕时会自动引导（自动初始化）应用程序。例如： <div
ng-app="" ng-init="quantity=1;cost=5">，定义一个AngularJS
   应用程序，且定义变量quantity值为1，变量cost为5；
2. ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
3. 把拥有这个标签元素的值写到指定元素值中，比如 <input type="text" ng-model="name"> 即把input的value属性的值传入到 定义的 AngularJS 应用程序中的name变量中，变量可有的数据类型和JS中的一致；
4. ng-bind 指令把应用程序数据绑定到 HTML 视图。 把定义的 AngularJS 应用程序变量传入当前标签的innerHTML中，比如： <p ng-bind="name"></p> 它就会实时更新同一AngularJS 应用程序中的name的变量值。 在这个属性中可以进行变量的运算，例如 ng-bind=”quantity * cost”
5. 在标签中更新数据用双花括号{{name}}
   ，比如：<h1>{{name}}</h1>,就可以实时更新name变量的数据了，在定义的AngularJS
   应用程序下，花括号里面的变量可以进行运算，例如{{name + “增加的字段”}}。
6. ng-init 指令指定变量初始值，比如ng-init=”firstName='John'”就定义当前AngularJS
   应用程序的firstName变量的初始值为'John'。
7. ng-repeat 指令会重复HTML元素，例如 <li ng-repeat="x in names">{{ x }} </li>
   它会重复<li>元素 个数为变量names的个数。
8. ng-controller 指令是为当前AnglarJs应用程序添加一个控制器，例如<div ng-app="myApp" ng-controller="myCtrl"><div>定义名为myapp的AngularJS应用程序添加一个名为myCtrl的控制器；
9. ng-disabled指令是绑定到HTML的disabled的属性上，可以通过同步该值来对当前的标签的可用性进行修改，同步示例： <p><button ng-disabled="mySwitch">点我！</button></p> <p><input
type="checkbox" ng-model="mySwitch">按钮</p>
   就可通过修改input中的values传给mySwitch，然后在传给button，从而同步button的disabled属性。
10. ng-show 指令是控制隐藏或显示一个 HTML 元素。同样可以通过同步该值来控制这个属性，同步示例： <p><button ng-show="mySwitch">在这</button></p> <p><inputtype="checkbox" ng-model="mySwitch">按钮</p> ng-click 指令是赋予当前标签的点击事件，可直接定义函数，<button ng-click="count = count +1">点我！</button>button 就可以实现当前AngularJs定义程序中count变量加1；
11. ng-hide 指令与 ng-show 指令相反，可用于隐藏当前控件；

需要注意的是，ng-model=”name” ng-bind=”name” {{name}} 需要放到定义的同一个 AngularJS 应用程序中，即拥有属性ng-app的div下，PS：1.属性ng-app最好放在div中 2.一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。3.赋予值的时候可以进行js中的计算、判断；

AngularJS作用域（Scope）的理解

Scope(作用域)可用来控制变量，在script中改变html中变量的值。scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

上代码理解：

`<div ng-app="myApp" ng-controller="myCtrl">

<input ng-model="name">

<h1>我的名字是 {{name}}</h1>

</div>

<script>
var app = angular.module(&#39;myApp&#39;, []);

app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.name = "John Dow";
});
</script>`

这里是定义了一个名为myApp的AngularJS应用程序，并设置它的控制器为myCtrl，
设置input的value为变量name的值，<h1>中输出变量name的值，script代码中的理解，拿到名为myApp的angular应用程序对象，并调用controller方法输入对应的控制器的名称拿到其对应的应用象，用$scope 对象来调用控制器来对变量进行改值。$scope 是一个应用象(属于应用变量和函数)。
控制器中也可以创建方法 ，并返回值。例如 $scope.fullName = function() {return $scope.firstName + " " + $scope.lastName;} ，定义fullName 方法。
控制器也可以放在外部，由script标签进行导入，在指令ng-controller中写上对应的名称就好。例如：<script src="namesController.js"></script>

根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

过滤器

使用方法： 用 | 线来添加
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。 orderBy：‘sdas’ 按字段sdas里的数据进行排序
uppercase 格式化字符串为大写。
示例：{{ lastName | uppercase }} 将lastName转换为大写
也可自定义过滤器，用于过滤输入，

• 
  {{ (x.name | uppercase) + ‘, ’ + x.country }}

• 它就会过滤掉含有test变量值的数据

  AngularJS 服务(Service)

  在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
  AngularJS 内建了30 多个服务。
  同样通过AngularJS应用程序对象的controller方法，来返回，比如：

  var app = angular.module('myApp', []);
  app.controller('customersCtrl', function($scope, $location) {
      $scope.myUrl = $location.absUrl();
  });

  返回了一个` $location`的位置信息应用象。 常用服务： 1. `$location`，它可以返回当前页面的 URL 地址。 2. ` $http`，服务向服务器发送请求，应用响应服务器传送过来的数据。 3. `$timeout`，服务对应了 JS window.setTimeout 函数。 4. `$interval`，服务对应了 JS window.setInterval 函数。 5.自定义服务，示例：

  var app = angular.module('myApp', []);
  app.service('hexafy', function() {
      this.myFunc = function (x) {
          return x.toString(16);
      }
  });
  app.filter('myFormat',['hexafy', function(hexafy) {
      return function(x) {
          return hexafy.myFunc(x);
      };
  }]);
  

  调用app.service创建一个名为hexafy的服务，里面添加了一个函数，返回16进制的字符串，第二个是添加一个名为myFormat的过滤器，并为其设置hexafy服务返回值的作为过滤器，即将拥有改过滤器的值转换为十六进制字符串。 ### $http服务的使用 通过调用controller获取$http服务应用象，使用get去获得相应的文件

  var app = angular.module('myApp', []);
  app.controller('customersCtrl', function($scope, $http) {
    $http.get("/statics/demosource/Customers_JSON.php")
    .success(function (response) {$scope.names = response.records;});
  });
  

  ## 为选择框添加数据 指令 ng-options=”x for x in names” 添加names数组中的所有数据填充到选择数据里 比如： ` `和`{{x}}`效果是一致的。区别在于一个是填充数据，一个是克隆多个标签 ## 自定义指令

   
   
  
  
  var app = angular.module("myApp", []);
  app.directive("myCode", function() {
      return {
          template : "指令构造器创建"
      };
  });
  
  

  调用模块的directive方法，传入模块对应名称，新构造一个方法，对对应的值操作或返回一些字

  AngularJS 常用API

  angular.lowercase()	转换字符串为小写
  angular.uppercase()	转换字符串为大写
  angular.isString()	判断给定的对象是否为字符串，如果是返回 true
  angular.isNumber()	判断给定的对象是否为数字，如果是返回 true

  AngularJS 动画

  AngularJS 使用动画需要引入 angular-animate.min.js 库。
  动画示例：

  <style>
  div {
    transition: all linear 0.5s;
    background-color: lightblue;
    height: 100px;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
  }
  .ng-hide {
    height: 0;
    width: 0;
    background-color: transparent;
    top:-200px;
    left: 200px;
  }
  </style>
  <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
  </head>
  <body ng-app="ngAnimate">
  <h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
  <div ng-hide="myCheck"></div>
  </body>

  当ng-hide去隐藏或出现的时候用有个过渡动画，过渡动画的属性从.ng-hide中来获取，
  比如当前是去隐藏的话，就会出现当前的div属性到.ng-hide的属性的过渡动画，当显示的时候从.ng-hide属性到div属性的过渡动画

  第一次写博客，有什么说的不对的地方或者理解不到位的地方还请各位大佬帮小弟指点迷津
  从这个学习网站上学的，相当不错的程序员学习网站