/** * Created by Administrator on 2016/5/3 0003. */ ng-app是告诉angularjs编译器把该元素当作编译的根 //定义模块 var myApp=angular.module('index', []) //定义控制器 myApp.controller('haha', function ($scope) { $scope.message = 'World'; }) /*AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}。 AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。 AngularJS 将在表达式书写的位置"输出"数据。 AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量*/ <div ng-app="myApp"> <div ng-controller="haha" > <input type="text" ng-model="message" /> Hello, {{ message }} </div> </div> //AngularJS 对象 <div ng-init="obj={'name':'leyi'}"> {{obj.name}} </div> //AngularJS 数组 <div ng-init="arr=[1,2,3,4,5]"> 第二个值为{{arr[1]}} </div> <!--AngularJS 表达式 与 JavaScript 表达式 类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。 与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。 与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。 与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。--> <!--AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。--> <div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入:</p> <p>姓名:<input type="text" ng-model="firstName"></p> <p>你输入的为: {{ firstName }}</p> </div> //ng-repeat 指令会重复一个 HTML 元素: <ul ng-init="arr=[1,2,3,4,5]"> <li ng-repeat="x in arr">{{x}}</li> </ul> <!-- 创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令。 你可以使用 .directive 函数来添加自定义的指令。 要调用自定义指令,HTMl 元素上需要添加自定义指令名。 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:--> .directive('leYi',function(){ return { template:"<p>自定义指令</p>" } }) //调用 通过元素名:<le-yi></le-yi> 通过属性:<div le-yi></div> 通过类名:<div class="le-yi"></div> 通过注释:<!-- 指令: le-yi --> //限制使用 restrict 值可以是以下几种: E 只限元素名使用 A 只限属性使用 C 只限类名使用 M 只限注释使用 restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。 .directive('leYi',function(){ return { restrict:"E",//只限元素名使用 template:"<p>自定义指令</p>" } }) 数据绑定是将模型中的人数据与web页面中显示的内容链接在一起的过程。 //双向绑定 当页面中的数据改变时,模型会更新,当模型中的数据改变时,web页面也将自动更新 .controller('bindFn',function($scope){ $scope.value='bind value' }) <div ng-controller="bindFn"> <input type="text" ng-model="value"/> {{value}} </div> //ng-model 指令 //验证用户输入 <form ng-controller="bindFn" name="haha"> <input type="email" ng-model="text" name="email"/> <span ng-show="haha.email.$error.email">你输入的的邮箱格式不正确</span> </form> //应用状态 ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error): <form ng-controller="bindFn" name="haha"> <input type="email" ng-model="text" name="email" required/> <p> valid:{{haha.email.$valid}}输入的值是否合法</p> <p> dirty:{{haha.email.$dirty}}值是否改变</p> <p> touched:{{haha.email.$touched}}是否有点击</p> </form> //CSS 类 ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类: ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid ng-dirty ng-pending ng-pristine <style> input.ng-empty{border:1px solid red} </style> <form ng-controller="bindFn" name="haha"> <input type="email" ng-model="text" name="email" required/> </form> <!-- Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。--> 所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。 $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。 AngularJS 过滤器可用于转换数据: {{100000|currency}}//$100,000.00 {{"abc"|uppercase}}//ABC {{"ABC"|uppercase}} 输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。 filter 过滤器从数组中选择一个子集: <div ng-init="arr=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"> <input type="text" ng-model="test" /> <p ng-repeat="x in arr|filter:test|orderBy:'country'"> {{x.name+"-----"+x.country}} </p> </div> 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。 AngularJS 内建了30 多个服务。 // $location 服务 .controller('bindFn',function($scope,$location){ $scope.myURL=$location.absUrl() }) //$http服务 .controller('bindFn',function($scope,$location,$http){ $scope.myURL=$location.absUrl() $http.get('xxx').success(function(response){ $scope.res=response }) }) //$timeout 服务 //$interval 服务分别对应window.setTimeout window.setInterval //创建自定义服务 .service('$leyi',function(){ this.fn=function(x){ return x+100 } }) .controller('bindFn',function($scope,$location,$http,$leyi){ $scope.myURL=$location.absUrl() $http.get('xxx').success(function(response){ $scope.res=response }) $scope.kk=$leyi.fn(1) }) //自定义过滤器 1.先创建一个模块 var myAppModule = angular.module("myApp",[]); 2.在模块的基础上,创建过滤器 myAppModule.filter("filterName",function(){//filterName 过滤器的名字 return function(ag1){ return ag1+1000 } }); {{50|filterName}} AngularJS Select(选择框) 1.可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出 <select ng-model="selectedName" ng-options="x for x in names"></select> 2.也可以使用ng-repeat 指令来创建下拉列表: <select ng-model="selectedName"> <option ng-repeat="x in names">{{x}}</option> </select> 3.两者之间的区别 ng-repeat 选择的值selectedName是一个字符串,ng-options选择的值selectedName是一个对象,当选择值是一个对象时,我们就可以获取更多信息,应用也更灵活。 $scope.names=[{"name":"a","color":"red"},{"name":"b","color":"blue"},{"name":"c","color":"green"}] <select ng-model="selectedName" ng-options="x.name for x in names"></select> selectedName.name:{{selectedName.name}} selectedName.color:{{selectedName.color}} <select ng-model="selectedName"> <option ng-repeat="x in names" value="{{x.name}}">{{x.color}}</option> </select> {{selectedName}} //a||b||c //使用对象作为数据源, x 为键(key), y 为值(value): <select ng-model="selectedName" ng-options="y.name for (x, y) in names"> </select> $scope.names={ "x":{"name":"a","color":"red"}, "y":{"name":"b","color":"blue"}, "z":{"name":"c","color":"green"} } {{selectedName.name}} {{selectedName.color}} AngularJS 表格 $index: 索引 $odd $even 索引为奇数偶数... AngularJS HTML DOM ng-disabled ng-show 指令隐藏或显示一个 HTML 元素。 ng-hide 指令用于隐藏或显示 HTML 元素。 <button ng-disabled="mySelect">禁用切换</button> <input type="checkbox" ng-model="mySelect"/> ng-click 指令定义了 AngularJS 点击事件。 <button ng-click="count=count+1">递增</button> {{count}} <button ng-click="toggle()">显示隐藏切换</button> <p ng-show="myvar">!@#$%^&*()</p> $scope.myvar=true $scope.toggle=function(){ $scope.myvar=!$scope.myvar } 表单验证 1.必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required ng-model="aa"/> {{aa}} 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="10" ng-model="bb" /> {{bb}} 3. 最大长度 <input type="text" ng-maxlength="15" /> 4. 模式匹配 匹配正则表达式 <input type="text" ng-pattern="/d/" ng-model="cc" /> {{cc}} 5. 电子邮件 验证输入内容是否是电子邮件 <input type="email" ng-model="dd" /> {{dd}} 6. 数字 验证输入内容是否是数字 <input type="number" ng-model="ee" /> {{ee}} 7. URL 验证输入内容是否是URL <input type="url" ng-model="ff" /> {{ff}} <!--以上是将HTML5的新属性和angular相结合进行验证,只有验证通过,才会进行绑定--> 屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记 访问DOM中的表单属性 formName.inputFieldName.property $pristine 是否未被修改 $dirty 是否被修改 $valid 是否通过验证 $invalid 是否未通过验证 <!--$error对象。它包含当前表单的所有验证内容,以及它们是否合法的信息。--> formName.inputfieldName.$error 如果验证失败,这个属性的值为true;如果值为false,说明输入字段的值通过了验证。 实例 <form name="formName"> // 以下代码还有点问题,当内容全删掉后还是会显示通过验证 <!--必填项--> <input placeholder="必填项" type="text" required ng-model="aa" name="require_name"/> <span ng-show="formName.require_name.$dirty&&formName.require_name.$valid">通过验证</span> <!--最小长度--> <input placeholder="最小长度为5" type="text" ng-model="bb" name="minlength_name" ng-minlength="5" /> <span ng-show="formName.minlength_name.$dirty&&formName.minlength_name.$valid">通过验证</span> <!--最大长度--> <input placeholder="最大长度为8" type="text" ng-model="cc" name="maxlength_name" ng-maxlength="8" /> <span ng-show="formName.maxlength_name.$dirty&&formName.maxlength_name.$valid">通过验证</span> <!--邮箱--> <input placeholder="输入邮箱格式" type="email" ng-model="dd" name="email_name" /> <span ng-show="formName.email_name.$dirty&&formName.email_name.$valid">通过验证</span> <!--数字--> <input placeholder="输入数字格式" type="number" ng-model="ee" name="num_name" /> <span ng-show="formName.num_name.$dirty&&formName.num_name.$valid">通过验证</span> <!--url--> <input placeholder="输入URL格式" type="url" ng-model="ff" name="url_name" /> <span ng-show="formName.url_name.$dirty&&formName.url_name.$valid">通过验证</span> <!--正则匹配--> <input placeholder="输入小写字母" type="text" ng-model="hh" ng-pattern="/^[a-z]*$/" name="regexp_name" /> <span ng-show="formName.regexp_name.$dirty && formName.regexp_name.$valid">通过验证</span> <input type="submit" ng-disabled="formName.$invalid" value="提交"/> </form> 全局方法函数API angular.bind angular.bind(self,fn,args ); 上下文,函数以及参数动态绑定,返回值为绑定之后的函数. 其中args是可选的动态参数,self在fn中使用this调用。 var aa={"name":"leyi"} function fn(age){ alert(this.name+"---"+age) } angular.bind(aa,fn)(12) angular.copy angular.copy(source, [destination]); 复制一个对象或者一个数组。 如果省略了destination,一个新的对象或数组将会被创建出来; 如果提供了destination,则source对象中的所有元素和属性都会被复制到destination中; 如果source不是对象或数组(例如是null或undefined), 则返回source; 如果source和destination类型不一致,则会抛出异常。 注意:这个是单纯复制覆盖,不是类似继承 function Haha(){ this.name=123 } Haha.prototype.age=222 var newObj=angular.copy(new Haha()) console.info(newObj) //创建一个新对象,包含继承属性 var newObj2={'height':333} angular.copy(new Haha(),newObj2) console.info(newObj2)//不包含继承属性,会覆盖新对象的属性 angular.element 如果jQuery被引入了,则angular.element就可以看作是jQuery选择器,选择的对象可以使用jQuery的函数;如果jQuery不可用,angular.element只能接受HTML字符串或者 DOM元素为参数,选择的元素只可以调用Angular中嵌入的精简版的jQuery library(名为: "jQuery lite" or "jqLite"). 注意: 所有被Angular引用的元素都是jQuery或者jqLite对象,不是原始的DOM元素了。 jqLite支持的jQuery函数有: <p id="haha">12</p> var haha=document.getElementById('haha') console.info(angular.element(haha).html()) angular.equals 比较两个值或者两个对象是不是相等。 angular.forEach ===>_.each() 循环对obj对象的每个元素调用iterator, obj对象可以是一个Object或一个Array. Iterator函数调用方法: iterator(value, key, obj), 其中obj是被迭代对象,key是obj的property key或者是数组的index,value就是相应的值 angular.fromJson 把Json字符串转为对象 angular.toJson() 相反 console.info(angular.isObject(angular.fromJson('{"name":"leyi"}'))) angular.extend angular.extend(dst, src); 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象,你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. var obj={"name":"leyi"} var obj2={} angular.extend(obj2,obj) console.info(obj2) //{"name":"leyi"} angular路由 angular.module('myRouter',['ngRoute']) .config(function($routeProvider){ $routeProvider .when('/',{"template":"这是首页!"}) .when("/leyi",{"templateUrl":"leyi.html"}) .when('/404',{"template":"404!"}) .otherwise({ redirectTo:"/404" }) }) 动画 angular.module('leyi', ['ngAnimate']) <style> .content{transition:all linear 0.5s; height:200px; background:lightblue} .ng-hide{height:0} </style> <input type="checkbox" name="" ng-model="bl"/> <div ng-class="bl" class="content">内容!</div> 依赖注入 AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入: value factory service provider constant Value 是一个简单的 javascript 对象,用于向控制器传递值(配置阶段): var leyiModule=angular.module('leyi.controllers', ['ngAnimate']) leyiModule.value("defaultValue",1000000) leyiModule.controller('leyi',function($scope,defaultValue){ //注入值 $scope.haha=defaultValue }) AngularJS中service,factory,provider的区别 在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除。而controllers在不需要的时候就会被销毁了。 这就是为什么使用controllers在应用里面传递数据不可靠的原因 factory() Angular里面创建service最简单的方式是使用factory()方法。返回一个工厂模式创建的服务对象 (需要使用.config()来配置service的时候不能使用factory()方法) var leyiModule=angular.module('leyi.controllers', ['ngAnimate']) leyiModule.factory("leyiFactory",function(){ var aa={} aa.num=11111 return aa }) service() 通过构造函数的方式让我们创建服务对象 (需要使用.config()来配置service的时候不能使用service()方法) leyiModule.service('leyiService',function(){ this.num=22222 }) provider() 是创建service最底层的方式,这也是唯一一个可以使用.config()方法配置创建service的方法 Provider recipe 是语法定义为一个自定义类型,实现 $get 的方法。这个方法是一个工厂方法,就像我们在 Factory recipe 中使用的一样。事实上,如果你定义一个 Factory recipe,钩子会自动创建一个包含空 Provider 类型 $get 方法的工厂方法。 leyiModule.provider('leyiProvider',function(){ this.$get=function(){ var aa={} aa.num=3333 return aa } }) 调用 leyiModule.controller('leyi',function($scope,leyiFac,leyiService,leyiProvider){ $scope.nihao=leyiFac.num $scope.hello=leyiService.num $scope.world=leyiProvider.num })