Angularjs笔记

这里是参照慕课网大漠穷秋老实的的视频Angularjs实战视频
1.index.html文件 一般用于加载js文件 其中并不需要太多的代码 ion-nav-view可以满足加载视图2.在js目录中 每个js文件的分工都明确 例如 controller.js 中只放控制器 可能是多个 route.js中主要是路由 同样也可能是多个3.路由中ngRoute和uiRoute的选择和区别 route的引包顺序 必须至于angular.js的后面  uiRoute相对ngRoute来说可以嵌套更深层次的路由 ngRoute是angular自带的路由 而uiRoute是根据ngRoute开发的第三方插件
4.directive :自定义指令
angular.module('MyApp',[])    .controller('MyCtrl',function($scope){        $scope.Name="";    })    .directive("hello",function(){//自定义标签 directive        return{            restrict:'EACM',//E:作为元素名使用,A:作为属性使用,C:作为类名使用,M:作为注释使用,默认为EA            transclude:true,            template:'<div>他的名字是<span ng-bind="Name"></span><div ng-transclude></div></div>',            replace:'true'//是否删除外层的自定义标签        }    })    //run方法 当所注册器加载完所有模块时 会执行一次.run(function($templateCache){    $templateCache.put("hello.html","<div>Hello Everyone!!</div>")})
在template中拼接太多的html标签会显得累赘且可读性差 所以可以用templateUrl在后面直接跟html文件的地址
templateUrl:'hello.html',
如果希望在自定义标签中显示html标签 那么可以再directive中添加属性transclude↑↑↑
5.例:当鼠标进入或者穿过元素时 执行加载事件
angular.module('MyApp',[])    .controller('MyCtrl',function($scope){        $scope.Name="";        $scope.loadData = function(){            console.log("正在加载数据。。。。。。");        }    })
   .directive("loader",function(){        return{            restrict:"AEMC",            link:function(scope,element,attr){//scope指的$scope element指的当前directive元素 attr这个元素的属性                element.bind("mouseenter",function(){//bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。mouseenter:鼠标进入事件                    scope.loadData();//scope.apply("loadData")                })            }        }     })
如果同时有两个控制器想用该标签 但是因为控制器不同 标签不同 可以采用赋予属性的方法 例如：
<loader howToLoad="loadData()">加载数据</loader>
scope.$apply(attrs.howtoload);//要写成小写6.ng的form指令
	和原生的form的区别
		6.1:HTML原生的表单是不能嵌套的 而ng封装后的表单是可以嵌套的
		6.2:ng为表单扩展了校验和防止重复提交功能
		6.3:ng对input的type进行了扩展(text，number，url，email，radio，checkbox，hidden，button，submit，reset)
		6.4:ng为表单内置了4种CSS样式(ng-invalid：字段内容是非法的，ng-PRistine：表单没有填写记录，ng-dirty:表单有填写记录，ng-valid:字段内容合法的)		
		6.5:内置了校验器(require:不能为空,minlength:最小长度,maxlength:最大长度)
	设置按钮是否可用:ng-disabled
7.$http
	一个简单的http请求
 $scope.GetList = function(){           $http.get("Hello.json").success(function(data){                console.log(data);           }).error(function(data){                console.log(data);           })        }
8.filter自定义
	html的代码:
	<p>{{1239123 | filter1 }}</p>	js的代码:
    .filter("filter1",function(){        return function (item){            return item+"O(∩_∩)O~~"        }    })
最后页面上成功显示1239123O(∩_∩)O~~
如果没有自定义 可以直接用 例如
<p>{{1239123 | date:"yyyy-MM-dd hh-mm-ss"}}</p>
页面显示
1970-01-01 08-20-39