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


Angular开发(十八)-路由的基本认识

一、学单词:angular路由中涉及到很多新单词词汇 单词 说明 使用场景 Routes 配置路由,保存URL对应的组件,以及在哪个RouterOutlet中展现 Rout...
  • kuangshp128
  • kuangshp128
  • 2017年05月22日 14:23
  • 2934

Angular 比较常用的指令

特别好用的指令 来自  http://techlogs.cn/angular-bi-jiao-chang-yong-de-zhi-ling/ 已经用了angular很久积累了一些很实用...
  • XINGXUEXX
  • XINGXUEXX
  • 2016年11月02日 15:57
  • 1328

angular的基本指令

ng-bind angular的双向绑定是很有名的,一开始我都是用{{detail.totle}}双花括号来读数据的,这样会有一个问题,那就是数据还没加载出来的时候就会看到{{detail.totle...
  • qq_23114525
  • qq_23114525
  • 2016年03月28日 17:59
  • 947

angularjs学习系(3)指令的@=&

1:先说指令域scope的@     我觉得描述很费劲,直接用代码来阐述:     angularjs.html      ...
  • ikscher
  • ikscher
  • 2015年04月02日 14:51
  • 19370

angular-全部删除

$scope.delete1=function ($index) { if($scope.data.length>=0){ $scope.data.splice($index)...
  • c_hjf
  • c_hjf
  • 2017年10月23日 08:20
  • 156

现今最详细的angular开发环境配置全套教程

为广大angular2学习者、爱好者提供便捷资源共享通道
  • guiyunfan94
  • guiyunfan94
  • 2017年04月18日 18:24
  • 6663

angular初学者福利啦(列表增、删、改)

1、废话少说、直接上代码 html页面: user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> angular测试 ...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2016年08月21日 10:51
  • 1468

【Angular】——环境配置

下载安装nodejs 打开nodejs官网,点击绿色按钮,即可立即下载。     node.js插件在windows系统下是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能...
  • u012654963
  • u012654963
  • 2017年05月14日 21:10
  • 961

【Angular】——创建启动Angular

创建angular2项目     直接在命令提示符中输入:     ng new helloworld     为什么终止:此时angular2的基本文件已经全部创建,接下来是下载项目所依赖的n...
  • u012654963
  • u012654963
  • 2017年05月14日 21:27
  • 1687

angular原理及模块简介

本人前端小白,奈何在公司在做一个PC端的程序,用angular写,不得不自学了一下angular框架。虽然在工作过程中勉强勉强够了,但是觉得既然用了就稍微了解得全面一点,所以花了几个晚上看了一下ang...
  • u011579138
  • u011579138
  • 2016年11月22日 20:45
  • 4703
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angular
举报原因:
原因补充:

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