angular js使用记录

 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 = [];

 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 });        

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

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

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

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/