angular

原创 2015年11月20日 12:51:38

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


相关文章推荐

NativeScript for Angular Mobile Development

  • 2017年11月15日 09:13
  • 8.87MB
  • 下载

SWITCHING_TO_ANGULAR_2

  • 2017年11月09日 09:15
  • 2.64MB
  • 下载

Angular2 中的依赖注入

Angular2 中的依赖注入 在angular2应用中依赖注入将会大量的应用在我们所创建的服务中,至于依赖注入的原理及特点在此不做深究,网上大量资料介绍依赖注入,本节重点是如何在angular2 ...

angular.js

  • 2017年11月05日 16:17
  • 16.43MB
  • 下载

ng-book2,媲美官方的angular2实用教程

  • 2017年11月04日 12:59
  • 25.44MB
  • 下载

使用angular-ui-sortable实现可拖拽排序列表

项目需求,添加列表可拖拽排序功能,谷歌了一下,找到一个Angular的插件:angular-ui-sortable,项目地址:https://github.com/angular-ui/ui-sort...

揭秘angular2

  • 2017年11月19日 14:58
  • 102.79MB
  • 下载

angular2笔记--模板语法

小弟初学angular2,借花献佛,大神勿喷,只是笔记 写视图的模板都需要什么,我们将覆盖模板语法中的下列基本元素: HTML 插值表达式 Interpolation 模板表达式 Templa...

angular-sanitize.min.js

  • 2017年10月24日 16:09
  • 6KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angular
举报原因:
原因补充:

(最多只允许输入30个字)