angular

1.自己实现ng-model

return {
    restrict: 'A',
    link: function ($scope, element, attr) {
        var modelName = attr["model"];
        $(element).val($scope.$eval(modelName));
        
        //从view update model
        $(element).keyup(function () {
            $scope.$apply(function () {
                $scope.$eval(modelName + " = " + $(element).val());
            })
        });
        //从model update view
        $scope.$watch(modelName, function (newVal) {
            $(element).val(newVal);
        });
    }
}
<input type="text" model="aa"/>
{{aa}}

2.ngRoute

angular自带ngRoute，用来实现简单的导航，需要导入angular-route.js，

语法为

var app = angular.module('plunker', ["ngRoute"]).config(function ($routeProvider, $locationProvider) {
    $routeProvider
            .when("/view1", {
                controller: "View1Controller",
                templateUrl: "view1.html"
            })
            .when("/view2/:name", {
                controller: "View2Controller",
                templateUrl: "view2.html",

                //resolve里包含一个对象，对象的键值对分别成为View2Controller的依赖
                resolve: {

                    //这里是一个字符串，那么route的依赖注入就是一个service
                    route: "$route",

		    //这里是一个函数，那么users的依赖注入就是该函数的返回值
                    users: function () {							
                        return ["sakop", "leah"];
                    }，

		  //返回一个promise
		   pro: ["$q", function ($q) {
    		  	deferred = $q.defer();
                  	//该promise还没有被resolve的话，view2会被浏览器下载，但是不会被angular渲染
                       //整个画面还是停留在view1上,网址也是view1。如果被reject了，画面不变，$rootScope会广播一个$routeChangeError事件
    			return deferred.promise;
		   }]
                }            })            .when("/view3", {                templateUrl: "view3"            });    // $routeProvider.otherwise({redirectTo: '/view1'});});

controller("View2Controller", function ($scope, $routeParams, users, route,pro) {
    $scope.name = $routeParams.name;

    //打印数组
    console.log(users);

    //这里的route是$route服务
    console.log(route);

    //已经被resolve的值

    console.log(pro);
});

3.

$rootScope.$on('$locationChangeStart',function(event){
    console.log("location starts to change");
    event.preventDefault();
    console.log($location.absUrl());
}); //可以防止跳出该页面，

$routeChangeStart和$routeChangeSuccess用于显示切换页面的动画

4.uiRouter和ngRouter初始化时有些许不同

1.使用$stateProvider取代$routeProdiver

$stateProvider.state("stateName",{

{

 url:"",

controller:"",

templateUrl:"",

resolve:..

}

2.使用$state.go(stateName,paramKeyValueMap)代替$location.path("/view1").search({a:1,b:2})

3.页面上使用ui-view代替ng-view，用ui-sref代替href

5.

module.directive("directiveName",function(){return {

  restrict:"E",

  link:function(...){}

});

第二个参数是一个函数，他返回一个用来描述directive的元对象，之所以元对象外面包了一层函数是因为通过它可以传入其他service，如$timeout,$http

module.controller("AController",function($scope){}) 

第二个参数实际上是一个构造器函数，angular会在new他的时候把$scope传进去

module.service("aService",function($timeout){ this.methodA = function(){} }

第二个参数实际上是一个构造器函数，angular在new他的时候会把$timeout传进去，注意service是一个singleton对象，并且是lazy loading的。

如果要eagar loading，可以在module.run(function(aService){})中传入该service

因为service是singleton，所以可以将一些全局变量存在某个service中，如登陆状态。

module.factory("aFactory",function($timeout){

    return {

      methodA:function(){},

      methodB:function(){}

   }

});

第二个参数不再是一个构造器函数，而直接是一个对象，factory也是singleton

6. 当url匹配上$stateProvider.state中定义的任意一个路由时，下面这个方法不执行，不然的话，会去执行下面的代码改变url并且再次尝试匹配路由

$urlRouterProvider.rule(function ($injector, $location) {
    var path = $location.path(),
        search = $location.search(),
        params;
    if (path[path.length - 1] === '/') {
        return;
    }
    if (Object.keys(search).length === 0) {
        return path + '/';
    }
    params = [];
    for (var s in search) {
        params.push(s + '=' + search[s]);
    }
    return path + '/?' + params.join('&');
});