js
javascript代码实例教程-angular.jsѧϰһ
发布时间：2019-01-15 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-angular.jsѧϰһ，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
一、Angular和jquery的比较
jquery是一个库，库总是被动的。就像工具，应用开发的逻辑是开发者 的，开发者需要自己的逻辑思维
angular是一个框架，实现一些功能的封装，我们要想使用这些功能，必须按照angular的逻辑思维。
angular内置了jqLITe,这个精简的dom对象是不支持选择器的
模板：htML
ng-app：指令
模板+指令==》视图
二、angular的五大特性
1、mvc
2、模块化 模板就是html
angular的模块化
module中包括filter、directive、factory、controller
3、指令系统（angular的特性）
<!doctyPE html> <html lang="en" ng-app=";myapp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="Angular.js"></script> </head> <body> <p > <hello></hello> </p> </body> <script type="text/javascript"> angular.module('myapp',[]).directive("hello",function(){ return { restrict:'E', template:"<p>dasdasda</p>", replace:true } }) </script> </html>
其实ng-app就是一个指令
4、双向数据绑定（angular的特性）
5、依赖注入
创建一个angular的应用
<!doctype html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body> <p ng-app="" ng-init="name='sas'"> hello{{name}} </p> </body> </html>
在初始化ng-app的时候,可以对一些值进行初始化
常见的指令
ng-app：表明一个angular应用程序，并通过angular完成自动初始化和标记根作用域
ng-init：初始化应用程序的数据
ng-repeat：遍历一个数据集合的每个数据元素
<!doctype html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body> <p ng-app="" ng-init="names=['1','2']"> <span ng-repeat="name in names"> heLOLo{{name}} </span> </p> </body> </html>
ng-model：可以将应用程序数据绑定到html的元素上边，实现的就是model和html的双向数据绑定
<!doctype html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body> <input ng-model="cc" type="text"> <span>{{cc}}</span> </body> </html> ng-bind：这个指令和{{}}有异曲同工之妙，不同之处在于ng-bind是在angular渲染之后，才将数据显示出来
<!doctype html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body> <input ng-model="cc" type="text"> <span ng-bind="cc"></span> </body> </html>
ng-click：定义的是一个angular的单击事件
<!doctype html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body> <p ng-app="" ng-init="click=false" > <button ng-click="click=!click">显示/隐藏</button> <p ng-hide="click"> <input type="text" ng-model="name"> <span >{{name}}</span> </p> </p> </body> </html> ng-hide:为true时，元素不可见
ng-controller：用来定义程序控制器，并且同时创建一个新的作用域关联到相应的DOM元素上边
<!doctype html> <html lang="en" ng-app="aa"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body> <p ng-init="click=false" > <p ng-controller="cc"> {{name}} </p> </p> </body> <script> VAR cc=angular.module("aa",[]); cc.controller("cc",function($scope){ $scope.name="赵文娟" }) </script> </html> 为什么需要mvc
1、项目越来越大、需要分开处理
2、代码复用
3、后期维护
angular中怎样实现mvc
实现控制器 controller
控制器1和控制器2来调用service（service里边存放的是两个控制器的共同的方法）
使用Controller中的注意事项
1、不操作DOM
2、不做数据格式化，因为ng有很好用的表单控件
3、不在Controller里面做数据操作 ng有$filter服务
angular中实馅�"/kf/yidong/wp/" target="_blank" class="keylink">WPHN0cm9uZz5tb2RlbDwvc3Ryb25nPjwvcD4KCgoKPHByZSBjbGFzcz0="brush:SQL;"><!doctype html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" ng-model="cc"> <p>{{cc}}jdasji</p> </body> <script src="angular.js"></script> </html>
ng-model就是一个model
view directive可以生成自己的特有的标签（视图）。
作用域：
特殊的作用域：
在作用域里边坚挺数据的变化*
$watch这个方法需要传入3个参数：
1、watchExPression要监听的表达式
2、listener变化发生的时候的回调函数，angular将会向这个函数传入新值和旧值
3、objectEquality如果监听表达式的值是一个对象，应当将这个参数设置为true
<!doctype html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <p ng-init="sb={name:'赵文娟',age:9,gender:'2'}" ng-app="test"> <cc data="sb"> </cc> </p> </body> <script> angular.module("test",[]).directive("cc",function($rootScope){ return { restrict:"E", template:"<p>", replace:true, link:function(scope,element,attrs){ var sb=eval(attrs.data); element.append("<p><span></span></p>").append("<p><span></span></p>").append("<p><span></span></p>"); scope.$watch(attrs.data,function(nv,ov){ var span=element.find("span"); span[0].textContent=nv.name; span[1].textContent=nv.age; span[2].textContent=nv.gender; },true); setInterval(function(){ scope.$apply("sb.age=sb.age+1"); },1000) } } }) </script> </html> 过滤器
1、使用过滤器可以实现对字符串大小写的转化、货币格式的转化，数组的过滤等
<!doctype html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <p ng-app=""> 请输入: <input type="text" ng-model="name"> 结果为： {{ name | uppercase}} </p> </body> <script> </script> </html> 2、过滤器可以过滤中选择一个子集出来
<!doctype html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <p ng-app="" ng-init="friends=[{name:'tom',age:12},{name:'amy',age:13},{name:'das',age:15}]"> 输入过滤<input type="text" ng-model="name"> <ul> <li>姓名，年龄</li> <li ng-repeat="x in friends|filter:name"> {{x.name+x.age}} </li> </ul> </p> </body> <script> </script> </html> 预置的过滤器：
currency，number
<!doctype html> <html lang="en" ng-app="cc"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <p ng-controller="cc"> <cc>{{total|number:2|currency}}</cc> </p> </body> <script> angular.module("cc",[]).controller("cc",function($scope){ $scope.total=123 }) </script> </html> 过滤器也是一种服务，和普通的服务不同，在注册的时候加一个后缀名Filter
通常我们的代码呗封装在控制器、服务、指令
创建过滤器
<!doctype html> <html lang="en" ng-app="cc"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <p ng-init="text='sasasa'"> <cc>{{text|ezUC}}</cc> </p> </body> <script> angular.module("cc",[]).filter("ezUC",function () { return function (input) { return input.toUpperCase(); } }) </script> </html> <!doctype html> <html lang="en" ng-app="cc"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <p ng-controller="cc"> <cc>{{total}}</cc> </p> </body> <script> angular.module("cc",[]).controller("cc",function($scope,numberFilter,currencyFilter){ $scope.total=currencyFilter(numberFilter(123,2)) }) </script> </html> 指令
angular中的指令可以封装javascript代码，例如可以使用一个自定义的标签来凤庄一部分代码。讲一个指令看作是一个API，同时自定义的这个标签更具有语义化。自定义的指令显示在页面上的实现的步骤:
1、构造神明的界面模板
2、抽取自定义的指令
3、实现自定义的指令
将数据传递给指令
<!doctype html> <html lang="en" ng-app="test"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <p > <cc data="window.sb"> </cc> </p> </body> <script> var sb={name:"赵文娟",age:"21",gender:"as"}; angular.module("test",[]).directive("cc",function(){ return { restrict:"E", template:"<p>", replace:true, link:function(scope,element,attrs){ var sb=eval(attrs.data); element.append("<p>"+sb.name+"</p>").append("<p>"+sb.age+"</p>").append("<p>"+sb.gender+"</p>") } } }) </script> </html> 创建指令
指令也是一种服务，只是这种服务的定义有几个特殊的要求
1、必须使用模块的directive()方法注册服务
2、必须以对象工厂factory定义服务的实现
3、对象工厂必须返回一个指令定义对象
指令定义对象的函数return中有以下几个参数
template：使用tempalte指定的是html标记替换的内容
<!doctype html> <html lang="en" ng-app="cc"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <cc ></cc> </body> <script> angular.module("cc",[]).directive("cc",function(){ return { restrict:"E", replace:true, template:"<p>czxczx</p>" } }) </script> </html> restrict：限定指令在html模板中出现的位置
E：可以当作html元素来使用
A：可以作为html的属性来使用
C：可以作为css属性来使用
replcae：true指明在template的替换方式
当指定replace为true的时候，审查元素的cc整的会变成p为fasle的时候只是在cc的里边加了一个p
scope：创建私有的作用域
<!doctype html> <html lang="en" ng-app="cc"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <p ng-controller="cc"> <cc sb="Emmy"></cc> </p> </body> <script> angular.module("cc",[]).controller("cc",["$scope",function($scope){ $scope.Emmy={ name:"asa", add:"dasaa" } }]).directive("cc",function(){ return { restrict:"E", scope:{ customer:"=sb" }, template:"<p>{{customer}}</p>" } }) </script> </html> link：这个属性是一个函数，用来操作DOM，从而实现数据绑定
传入的参数：
scope指令没有自己定义的本地作用域 传入就是哎不得作用域
isElement 这个指令的DOM对象‘
isAttrs ：指令集所在对象的属性集
<!doctype html> <html lang="en" ng-app="cc"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <p cc>我是p</p> </body> <script> angular.module("cc",[]).directive("cc",function(){ return { restrict:"A", link:function(scope,element,attrs){ element.on("mouseover",function(){ element.css({outline:"#ff0000 dotted thick"}) }).on("mouseout",function(){ element.css({outline:"none"}) }) } } }) </script> </html> 数据的双向传播
数据->界面:使用的是
$apply()：这个方法内部会调用监听队列的监听函数
依赖注入
在angular中所有组件的功能都以依赖注入的方式组织。这是angular的一angular的依赖注入的模式，中介是依赖注入的容器。
注入器：一个组件必须通过注入器才可以调用另一组件。
注册服务：
组件：PRovider provider类要求提供一个$get函数injector通过调用该函数。可以获得服务组件的实例
<!doctype html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <p id="cc"></p> </body> <script> //在aa模块上登记一个服务为Hello angular.module("aa",[]).provider("hello",function(){ //注册的服务都会有这个方法 返回的是这个为服务的实例 this.$get=function(){ return "hello大苏打似的"; } }) angular.element(document).ready(function(){ angular.injector(['ng','aa']).invoke(function(hello){ var e=document.querySelector("#cc"); angular.element(e).text(hello); }) }) </script> </html> 要使用angular的功能，必须首先获取注入器。获取注入器有两种方
1、创建新的注入器
angular.injector()
2、获取已经创建的注入器
var element = angular.element(dom_element); var injector = element.injector();
注入器两个方法可以调用API invoke和get
invoke的调用：可以直接调用用户自定义的函数体，并可以传递参数注入所依赖的服务对象
get的调用 这个方法的主要是获得服务实例的名称
注入的方式；
参数名注入：
依赖数组注入010
创建服务组件
<!doctype html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <button onclick="daCal()">3+4=?</button> <p id="cc"></p> <p id="dd"></p> </body> <script> function daCal() { //先新建一个注入器 在cc上新建一个注入器 var injector=angular.injector(["cc"]), shiji=injector.get("aa"); var shiji2=injector.get("bb"); document.querySelector("#cc").textContent=shiji.add(3,4) document.querySelector("#dd").textContent=shiji2.sub(3,4) } //向cc的服务上注册了一个组件 aa angular.module('cc',[]).provider('aa',function(){ this.$get=function(){ return { add:function (a,b) { return a+b; } } } }).provider('bb',function(){ this.$get=function(){ return { sub:function (a,b) { return a-b; } } } }) </script> </html> 注册的服务上边可以有注册多个组件。angular在使用这些组件的时候
首先在一个服务上新建一个空的注入器，再通过这空的注入器的get方法得到该服务上某个组件的实例。
创建可配置的服务组件
<!doctype html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <button onclick="daCal()">3+4=?</button> <p id="cc"></p> <p id="dd"></p> </body> <script> function daCal() { //先新建一个注入器 在cc上新建一个注入器 var injector=angular.injector(["cc"]), shiji=injector.get("aa"); document.querySelector("#cc").textContent=shiji.add(3,4) } //向cc的服务上注册了一个组件 aa angular.module('cc',[]).provider('aa',function(){ var cu="$"; this.setlocal=function(m){ var rep={ "CN":"￥", "EN":"$" } if(rep[m]) cu=rep[m]; } this.$get=function(){ return { add:function (a,b) { return cu+a+b; } } } }).config(function(aaProvider){ aaProvider.setlocal("CN"); }) </script> </html> 一定要注意的是在给组件添加配置的时候，config的参数是组建后跟Provider
服务定义语法
使用模块的provider方法定义简化了组件，在有些场景下先得有些笨重。angular很友好的封装了一些简化的定义方式
1、factory
使用一个对象工厂函数定义服务，调用该工厂函数将会返回服务实例
<!doctype html> <html lang="en" ng-app="cc"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <button onclick="doc()">3+4</button> <p id="cc"></p> </body> <script> var doc=function () { var injector=angular.injector(["cc"]), myinjector=injector.get("mm"), ret=myinjector.add(3,4); document.querySelector("#cc").textContent=ret; } angular.module("cc",[]).factory("mm",function(){ return { add:function (a,b) { return a+b; } } }) </script> </html> 2、service方法
要求提供一个构造函数，使用这个构造函数创建服务实例
<!doctype html> <html lang="en" ng-app="cc"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <button onclick="doc()">3+4</button> <p id="cc"></p> </body> <script> var cc=function(){ return { add:function (a,b) { return a+b; } } } var doc=function () { var injector=angular.injector(["cc"]), myinjector=injector.get("mm"), ret=myinjector.add(3,4); document.querySelector("#cc").textContent=ret; } angular.module("cc",[]).service("mm",cc); </script> </html> 3、value方法
我们需要在不同的组件之间共享一个变量，可以将这种情况视为一种服务
<!doctype html> <html lang="en" ng-app="cc"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <button onclick="doc()">3+4</button> <p id="cc"></p> </body> <script> var doc=function () { var injector=angular.injector(["cc"]), myinjector=injector.get("mm"); document.querySelector("#cc").textContent=myinjector; } angular.module("cc",[]).value("mm","cc"); </script> </html> 4、constant方法
我们需要在不同的组件之间使用不同的常量
<!doctype html> <html lang="en" ng-app="cc"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> </head> <body> <button onclick="doc()">3+4</button> <p id="cc"></p> </body> <script> var doc=function () { var injector=angular.injector(["cc"]), myinjector=injector.get("cc"); document.querySelector("#cc").textContent=myinjector.add(3,4); } angular.module("cc",[]).constant("mm","CN").provider("cc",function(){ var cc=""; this.setl=function(mm){ var rep={ "CN":"$" } if(rep[mm]) cc=rep[mm]; } this.$get=function(){ return { add:function (a,b) { return cc+a+b } } } }).config(function(ccProvider,mm){ ccProvider.setl(mm) }) </script> </html> 注意：这些方法并不是依赖在组件之上的，而是和组件在一个等级上边的
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的javascript代码实例教程-angular.jsѧϰһ全部内容，希望文章能够帮你解决javascript代码实例教程-angular.jsѧϰһ所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的js相关文章
- 前端学java系列（1）——搭建环境 2019-11-04
- JavaScript教程- JavaScript 语句 2018-11-21
- JavaScript教程- JavaScript 语法 2018-11-20
- JavaScript教程- JavaScript 输出 2018-11-20
- JavaScript教程- JavaScript 用法 2018-11-20
- JavaScript教程- JavaScript 简介 2018-11-20
- 重温java基础 2018-11-20
- 了解JavaScript中的Spread运算符 2018-11-17
- js数组操作常用方法超级完整版本值得收藏 2018-11-16
- 谷歌JavaScript风格指南中值得注意的13点 2018-11-11
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新js教程
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件
- javascript代码实例教程-Extjs4――实现动态的grid（即实现数据库表数据的显示）
热门js教程
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- vue项目优化--服务端渲染优化
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件