关闭

angular

228人阅读 评论(0) 收藏 举报

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('&');
});


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5960次
    • 积分:261
    • 等级:
    • 排名:千里之外
    • 原创:21篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论