![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Angular.js
文章平均质量分 85
神奇大叔
这个作者很懒,什么都没留下…
展开
-
AngularJs ui-router多视图嵌套子视图
1、通过.或parent的方式创建子路由2、在父路由的模板中添加容器标签并添加ui-view='x'设置子路由显示位置3、在子路由的views中'x@父路由名称',创建子路由视图4、子路由若要匹配顶级视图,在views中'顶级试图ui-view的名称@'代码示例:主页面:<html ng-app="app" ng-controller="main"><head&g...原创 2020-02-23 11:51:27 · 303 阅读 · 0 评论 -
AngularJs ui-router多视图嵌套
1、定义多个容器标签,且每一个加上ui-view='自定义名称'2、定义路由,只有url、views属性 views:{ ui-view的名称1:{template/templateUrl}, ui-view的名称2:{template/templateUrl}, ui-view的名称3:{template/templateUrl}, ... }3、当进入路由时,页面中的容...原创 2020-02-23 11:08:33 · 177 阅读 · 0 评论 -
AngularJs ui-router路由嵌套
1、通过state添加子路由2、将子路由state的第一个参数名称写成,父路由的名称.子路由名称 或者在子路由添加parent,值为父路由的名称3、在父路由的模板内添加子路由的跳转标签,并且路径为ui-sref='父路由的名称.子路由名称'4、在父路由内放置容器标签,并添加ui-view显示子路由页面代码示例:主页面:<html ng-app="app" ng-contr...原创 2020-02-23 10:13:49 · 181 阅读 · 0 评论 -
AngularJs ui-router路由跳转传参
1、在跳转a标签中通过跳转指令设置 ui-sref='state名称({键值对1,键值对2})' 其中,值如果是变量会自动解析,如果是字符串需要加""2、在对应state路由中设置 在url路径后添加"/{键名}/{键名}"3、读取参数 在对应的controller中,注入$stateParams $stateParams.键名调用代码示例:<html ng...原创 2020-02-22 22:08:25 · 707 阅读 · 0 评论 -
AngularJs ui-router动态跳转路由
1、在包含路由的控制器中,注入$state2、跳转 $state.go('state的第一个自定义名称')代码示例:<html ng-app="app" ng-controller="main"><head> <meta charset="utf-8"> <title ></title> <script src...原创 2020-02-22 21:41:21 · 471 阅读 · 0 评论 -
AngularJs ui-router路由
1、引入angular-ui-router.js文件,或引入cdn <script src="https://cdn.bootcss.com/angular-ui-router/1.0.25/angular-ui-router.js"></script> 2、在angular.module中注入,['ui.router']3、配置路由app.config(...原创 2020-02-22 21:25:37 · 269 阅读 · 0 评论 -
AngularJs 消息机制($emit、$broadcast、$on)
1、发送消息必须配合事件如(ng-click)在回调函数中使用2、$scope.$emit('名称',数据) 向自身以及父controller发送消息3、$scope.$broadcast('名称',数据) 向自身以及子controller发送消息4、$scope.$on('名称',function(event,data数据形参){...}) 接收消息代码示例:<html n...原创 2020-02-22 15:04:59 · 358 阅读 · 0 评论 -
AngularJs 装饰服务decorator
1、将定义的服务内容修改2、修改完后必须返回3、在angular1.4以上才出现4、语法: app.decorator('已有的服务名',function($delegate){ xx return xxx; }) 其中: $delegate代表服务的内容代码示例: var app=new angular.module('app',[]);...原创 2020-02-22 12:01:43 · 174 阅读 · 0 评论 -
AngularJs 多个模块的注入
ng-app创建了多个模块,另一个模块通过new angular.module(‘xx’,[‘x1’,‘x2’])引入了其他模块,则该模块就可以使用其他模块控制器脚本的内容及其附属内容...原创 2020-02-22 11:01:11 · 619 阅读 · 0 评论 -
AngularJs $scope.$apply()处理在angular内使用脱离angular的应用
1、若在angular脚本中,使用原生的ajax请求而不使用angular自身的,会导致视图更新失败 处理方法:在原生ajax的回调函数中,添加$scope.$apply(),强制刷新 2、若在angular脚本中写不是angular自身的定时器,也会导致视图刷新失败 处理方法:在定时器的函数中添加$scope.$apply(),强制刷新...原创 2020-02-21 22:02:43 · 265 阅读 · 0 评论 -
AngularJs 自定义指令link操作dom
1.指令方案link 描述:指令方案link是angularJS中提供给自定义指令的一种“专有行为” 操作自定义指令所在范围,包括子元素dom 语法:app.directive('指令名称', function (){ ... ... link:function (scope, element, attrs){...} }); ...原创 2020-01-20 21:37:21 · 797 阅读 · 0 评论 -
AngularJs 自定义指令
自定义指令 类似创造一个组件(标签),使得多个页面引用相同内容自定义创建app页面数据模型.directive()来创建的;语法:app页面数据模型.directive('自定义指令名称必须小写',function(){ return { restrict:'指令类型', template:'指令结构即html内容', replace:'指令复写' };...原创 2020-01-20 17:07:14 · 355 阅读 · 0 评论 -
AngularJs 自定义provider服务
provider服务 1、只要被创建就会添加到app中,无论是否注入,都存在且占内存,后续不需等待直接使用 2、其他服务创建完成后,只有注入使用才加载,只有使用时才占据内存,但加载需要时间 3、创建完成自动执行,服务名称.调用对象内容 4、此服务主要目的是空间换时间,节约时间 5、与factory服务类似 语法:app页面数据模型.provider('自定义provider名字',f...原创 2020-01-20 15:54:56 · 355 阅读 · 0 评论 -
AngularJs 自定义service服务
service服务 相当于本身已经构建了一个空白对象,通过this.来操作,不是通过this.创建的内容,需 要提供一个this.方法来对外暴露返回/修改,否则无法取值 语法:app页面数据模型.service('自定义service服务名字',function() { 通过this.添加内容; ... })代码示例:<html ng-app='app' ng-co...原创 2020-01-20 15:29:35 · 270 阅读 · 0 评论 -
AngularJs 自定义factory服务
自定义factory服务 通过函数返回一个对象,在函数内部可以进行算式等操作然后赋值给返回的对象,value服务等提供的对象是较固定的键值对 语法:app数据模型.factory('自定义factory名字',function(){ var obj={}; ... return obj; })代码示例:<html ng-app='app' ng-controller...原创 2020-01-20 15:00:08 · 281 阅读 · 0 评论 -
AngularJs 自定义constant服务
自定义constant服务 作用上等价于value服务,区别一旦定制完成,在注入使用前不能更改(多次定制相同constant服务,只有第一个生效) 语法:app数据模型.constant('自定义constant服务名',{})代码示例:<html ng-app='app' ng-controller='main' ><head> <meta char...原创 2020-01-20 14:41:53 · 268 阅读 · 0 评论 -
AngularJs 自定义value服务
自定义value服务 .value()方法对app数据模型进行扩展,使得不同controller可以进行通信,充当全局变量的作用 语法:数据模型app.value('自定义服务名称',服务内容JSON{}); 定义后在controller中使用需要注入代码示例:<html ng-app='app' ng-controller='main' ><head> ...原创 2020-01-20 14:23:41 · 290 阅读 · 0 评论 -
Angular 事件监听$scope.$watch
监听服务$watch 1、不需要在控制器脚本中注入,直接使用 2、监听任何想要监听的NG变量的值,并在这个值改变的时候调用回调函数 语法:$scope.$watch('想要监听的NG变量(不需要加$scope.)或字符串',回调函数)代码示例:<html ng-app='app' ng-controller='main' ><head> <meta ...原创 2020-01-20 12:35:22 · 1083 阅读 · 0 评论 -
AngularJs 定时器/时间轴服务
时间轴服务 1、NG中也能写js语法,因为输入js范围 2、使用时需要在控制器脚本中注入 3、注入服务参数可以有多个 (1)间隔调用服务$interval 1、使用时需要在controller脚本中注入$interval 2、计时器序号=$interval(function(){},调用间隔毫秒数) (2)延迟调用服务$timeout 1、使用时需要在controlle...原创 2020-01-20 12:09:07 · 185 阅读 · 0 评论 -
AngularJs 自定义过滤服务
自定义过滤服务$filter 通过页面数据模型调用,用来添加水印,添加出处等,在已知内容上添加 语法:app.filter('自定义过滤服务名字',function(){ return function(形参text即页面当中的文本) { ... return ...; } })代码示例:<html ng-app='app' ng...原创 2020-01-20 11:40:31 · 167 阅读 · 0 评论 -
AngularJs 系统过滤服务
过滤服务$filter 在NG框架中对数据进行转换显示的小工具,能让页面中的显示内容呈现为不一样的结构 语法:{{任意内容 | 过滤器}}(1)支持自定义$filter提供四种过滤器(1)纯数字| currency:'货币符号' 1、用于将内容转换为货币格式,默认转换为美元格式,即在数字前添加美元符号 2、:'...'可不写,若写则其中内容会放在|前面的内容之前 如 559...原创 2020-01-20 11:21:56 · 138 阅读 · 0 评论 -
AngularJS 服务service-系统服务$http处理ajax请求
服务service 相当于是app提供给用户使用的变量全局变量,其目的是对controller功能的扩展 (1)在NG框架中,服务是名字,可以理解问NG下的全局变量 (2)不同controller可以根据注入服务的方式来实现通信 (3)服务有系统服务和自定义服务 1、系统服务$http (1)NG框架内直接对数据模型内置的一个用于处理网络请求(如ajax请求等)功能的服务 (...原创 2020-01-19 21:38:56 · 306 阅读 · 0 评论 -
AngularJs 邮箱路由模块化案例
补充:同级controller之间的通信,依靠传入$rootScope全局变量(自身是一个对象)并在注入信息的函数中添加该参数实现模块化样式:html文件:<!DOCTYPE html><html ng-app='app'><head lang="en"> <meta charset='utf-8'/> <title ng-bi...原创 2020-01-19 20:24:34 · 244 阅读 · 0 评论 -
AngularJs 报错类型
1、Error: [injector:modulerr]http://errors.angularjs.org/1.3.9/injector:modulerr] http://errors.angularjs.org/1.3.9/injector:modulerr]http://errors.angularjs.org/1.3.9/injector/modu标点符号错误2、[ng:areq]...原创 2020-01-19 17:14:15 · 185 阅读 · 0 评论 -
AngularJs 路由模块化
项目工程化:代码模块化:页面效果:原创 2020-01-19 15:59:46 · 117 阅读 · 0 评论 -
AngularJs 路由
router路由 router路由是angularJs用于构建单页面应用的模块 本质是从a标签点击跳转功能延展而来的 (1)router功能的实现需要引入,angular.route.min.js (2)router功能的实现需要以来ng-view指令 1、提供标注,显示不同页面容器的作用 (3)router功能的实现需要a标签的href属性 1、href='#要加载的页面代号...原创 2020-01-19 15:01:00 · 542 阅读 · 0 评论 -
AngularJs 多控制器思想
ng-controller多控制器思想 为了便于团队开发和维护 (1)每一个控制器是嵌套的,即外层控制器可以访问内层控制器变量 (2)习惯上mainController作为用户默认加载页面的根控制器有且仅有一个代码示例:<html ng-app='app' ng-controller='main' ><head> <meta charset="utf...原创 2020-01-19 11:48:40 · 148 阅读 · 0 评论 -
AngularJs 评论案例
<html ng-app='app' ng-controller='main' ><head> <meta charset="utf-8"> <meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,mi...原创 2020-01-18 22:19:55 · 198 阅读 · 0 评论 -
AngularJs 事件机制
AngularJs事件机制 1、ng-无on的事件名='函数名(参数必须是NG变量)',对元素添加事件机制,回调函数需要在控制器脚本中实现 2、控制器脚本中回调函数 $scope.回调函数名=function(形参){ ...};代码示例:<html ng-app='app' ng-controller='main'><head> <meta ch...原创 2020-01-18 16:43:16 · 225 阅读 · 0 评论 -
AngularJs 控制器
AngularJs控制器(对页面元素进行类似js的功能) 1、angular.module()方法 (1)NG方法中提供用来生成页面数据模型的语法(相当于dom) (2)var 模型名称=angular.module('边界名称即对ng-app进行赋变量名',[注入信息]); (3)var my_app=angular.module('my_app',[]) 2、声明控制器指令ng-...原创 2020-01-18 16:15:47 · 196 阅读 · 0 评论 -
AngularJs 指令
AngularJs框架 指令(可以理解为属性) 1、边界指令ng-app (1)AngularJs框架在使用时,除了需要引入框架,还需要边界指令告知框架在哪个范围内生效 (2)习惯写在html标签中,在当前页面中生效 (3)<html ng-app> 2、呈现指令{{}} (1){{}}用来表示内容呈现功能 (2)在{{}}中书写NG语法规则下的变量、字符...原创 2020-01-18 15:03:32 · 249 阅读 · 0 评论 -
Angular.js 使用、MVC
AngularJs框架 MVW设计模式,model view whatever,支持模块化和双向数据绑定,为克服html语言在构建App上天生的不足使用前奏: 1、引入文件 2、在html标签中添加<html ng-app>使用: 在要输入的标签中添加ng-model='变量名';表示在该标签中输入的内容全都放进变量中,变量放在其他标签中实现同步效果 实现了MVC模式...原创 2020-01-17 21:51:35 · 1896 阅读 · 0 评论