angular js使用记录

jquery本身并不是框架，而仅仅是一个操作dom的工具，它的核心是操作dom;

目前较火的前端框架：backbone、angularjs、react、avalon、vue;

angularjs是由google开发的框架并进行维护，特别针对SPA（单页面）应用开发的框架，但不支持按需加载;　　MV*;

mvvm框架　　达到视图与逻辑（模块）同时绑定，同时更新；

1.ng-app——指令，使文档具有angularjs的能力（视图与逻辑混合）;

angular的核心就是视图与逻辑的同时绑定、同时更新;

angularjs可以极大地减少dom的操作，但是不影响它与jquery进行混合应用。但是理想的开发，是不希望在angular.js中掺杂jquery代码，因为要保持框架统一性;

angular.js最基础和也是最重要的部分

Directives --》》指令　　ng-*

　　自定义指令　　show = ‘‘;　

Data Binding --》》数据绑定（达到视图与数据同时绑定，极大减少dom操作;）　　{{*}}：例如{{name}}在某一控制器模块的作用域下查找；

　　核心数据绑定$scope.itemList = itemList;

Filter 通过一个管道进行过滤操作;　　name |　uppercase　　---->>>----|---->>>数据管道

　　<ul ng-repeat="item in carList | num_nice: {num: 5}"></ul>//筛选出数量为5的商品;或者表达为  | filter:{num:5};

　　app.filter(‘num_nice‘, function(arr, param) {

　　　　　　//arr待过滤的数组，parma表示传入的对象;

　　});

controller --》》控制层

每个控制层都有自己的作用域，让他们数据绑定相互独立于自己的作用域;

angular三大重要功能：

1.视图实时反应数据的变化，极大减少了dom操作；

2.directive实现组件;(templateUrl属性可以实现异步请求)

3.路由;

————angular的路由配置

 1 var app = angular.module("myTodo", [‘ngRoute‘]);
 2 //路由的配置：
 3 app.config(function($routeProvider) {
 4     //我们在实现I want you项目，自己实现了一个路由，
 5     //在这里angular.js帮我们实现了一个路由
 6
 7     var routeconfig = {
 8         templateUrl: "body.html",　　//视图区V
 9         controller: "myTodoCtrl"　　　//控制区C
10         /*controller: ‘myTodoCtrl‘*/
11     }
12
13     var ohter_config = {
14         templateUrl: "other.html"
15     }
16     //如果路由没有匹配到hash，让它跳到body.html
17     //如果路由器配到的hash是index.html#/all 或者
18     //index.html#/comp  index.html#/status
19     //假设路由器的匹配路径是 index.html#/!/allssssssssss
20     //会匹配失败，会通过otherwise,让它自动重定向到 index.html#/all
21     $routeProvider.
22       when("",routeconfig).
23       //status ： 它对应我们页面的hash: all completed active
24       //路由规则的优先级按写法的顺序所决定的
25       when("/other", ohter_config).
26       when("/:status_id", routeconfig ).
27       otherwise( { redirectTo: "/all" });
28 });

————获取本地存储

1 function store(namespace, data) {
2     if(arguments.length > 1) {
3         localStorage.setItem(namespace, JSON.stringify(data));
4     }else {
5         var obj = localStorage.getItem(namespace);
6         return (obj && JSON.parse(obj)) || null
7     }
8 }

————核心数据结构范例

 1 //核心数据结构 ---》
 2 var Coreobj = {
 3     //已完成
 4     completed: false,
 5     title: ‘我是没完成标题‘
 6 }
 7 var sobj = {
 8     completed: true,
 9     title: ‘我是以完成标题‘
10 }
11 var itemList = [];

————控制层C

 1 app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
 2
 3         //$filter --->ng中的过滤器模块，里面有一些定义好的简单方法，可以直接使用
 4         //$scope ---> 控制器中的核心作用域，实现数据与视图绑定功能 —— $scope.variable(变量名)在视图层设置，在控制层进行绑定和逻辑运算;视图层会实时更新变量的变化。
 5         //$routeParams --> 路由器参数
 6         //全局的一个控制层，控制它里面的所有内容,可以进行数据绑定和逻辑操作（各类功能的实现、对数据的操作）;
 7         //因为我的myTodo模块绑定在根元素的html上,
 8         //所以该控制层监听页面里的所有内容的作用域
 9         $scope.itemList = store(‘mytodo‘) || itemList;//进行核心数据的绑定，从localStorage中获取myTodo的数据，若不存在则为默认值itemList;
10         $scope.routName = "all";
11         $scope.newTodo = ‘‘;
12                 ...
13         $scope.$on(‘$routeChangeSuccess‘, function () {
14             //使用这个实时监听功能，是有条件，
15             //必须要配置路由器对象，才可以监听路由器的变化。
16             console.log(‘hash值改变了‘);
17             console.log($routeParams.status_id);
18             if($routeParams.status_id === "all") {
19                 $scope.filterStatus = {};
20                 $scope.routName = "all";
21             }else if($routeParams.status_id === "active") {
22                 $scope.filterStatus = {completed:false};
23                 $scope.routName = "active";
24             }else {
25                 $scope.routName = "completed";
26                 $scope.filterStatus = {completed:true};
27             }
28             //该功能可以实时监听该模块作用域下hash值的改变
29         });
30 });        

————指令ng-repeat的使用

item in itemList|filter:filterStatus track by $index//item in itemlist 等同于 item in itemList track by $id(item),而id是不允许重复的.因此需要自定义track by,最简单的方式就是 tack by $index;按照数组的索引值进行执行;

————指令ng-class的使用

<li ng-class="{completed: item.completed, editing: item.edit_status}" ></li>//ng-class中存放的是一个对象,className就是对象的属性.class值为true时，该class就发挥作用，否则就是无效的className;

————ng-model的使用

<input class="toggle" type="checkbox" ng-model="item.completed">//ng-model可以代替input标签的value值的作用，在angular中可以用来实时反应input值的变化,方便数据的传输，而value一般需要获取对应的dom节点;

————各类视图事件相关的指令

<label ng-dblclick="editTodo(item)">{{item.title}}</label>//ng-dbclick双击事件,双引号内为处理双击事件的自定义函数;<button class="destroy" ng-click="remove(item)"></button>//ng-click单击事件
<form ng-submit="saveEdit(item)">//ng-submit表单提交事件
　　<input todo-focus="item.edit_status" class="edit" ng-blur="saveEdit(item)" ng-model="item.title">　　//ng-blur失去焦点事件
</form>

————组件directive的使用

app.directive(‘todoFocus‘, function(){
    var linkFunction_nice = function(scope, element, attr) {
          //console.log(attr, element);
          scope.$watch(attr.todoFocus, function(newval){
              setTimeout(function(){
                  element[0].focus();
                  //延迟执行，否则无法聚焦
              }, 100);
          });
    };

    return {
      restrict: "A", //暴露的一个元素，若是‘A’则是属性，若是‘E‘则是元素
      link: linkFunction_nice　　//link:对特定的元素注册事件;需要用到scope参数来实现dom元素的一些行为;

    };
})//与compile相比较//参考链接：//　　http://hellobug.github.io/blog/angularjs-directive-2-compile-vs-link/