当前位置： 首页 > wzjs >正文

济南网站制作费用宣传片拍摄手法及技巧

wzjs 2025/9/22 3:07:09
济南网站制作费用,宣传片拍摄手法及技巧,网站主题定位,手机版网站开发教程服务是在controller里面引入的服务： 最好是内部服务在前面，自定义服务在后面 内部服务 $scope $scope.$watch(‘属性名’, function(newVal, oldVal) {}, true) true是深度监听,对象函数等$scope.$apply 触发页面更新,里面传入回调函数,比如说之前那个…

服务是在controller里面引入的服务： 最好是内部服务在前面，自定义服务在后面

内部服务

$scope

  • $scope.$watch(‘属性名’, function(newVal, oldVal) {}, true) true是深度监听,对象函数等
  • $scope.$apply 触发页面更新,里面传入回调函数,比如说之前那个settimeout这种更改数据页面没变化,可以会用这个,我觉得跟 vue中的 s e t 似的 . set似的. set似的.scope.$apply(function() { $scope.* = ‘hi’})

$timeout, $interval

$filter

$rootScope 根服务

$http

  • method
  • url
  • success
  • error
  • 简写直接就是$http.get().success() 我项目中写的是.then
  • 百度下拉搜索例子(这种教程上写法报错,但是基本看下怎么写的得了)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa"><input type="text" ng-model="name" ng-keyup="change(name)"><!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> --><script src="./public/angular.js"></script><script>var m1 = angular.module('myApp', [])m1.controller('Aaa', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {var timer = null$scope.change = function(name) {$timeout.cancel(timer)timer = $timeout(function() {$http({method: 'JSONP',url: 'http:www.list'// url: 'https://www.baidu.com/s?ie=utf-8&newi=1&mod=1&isbd=1&isid=f4ef53c100060ac3&wd='+name+'&rsv_spt=1&rsv_iqid=0x93e5cb7c0001e73c&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_dl=tb&rsv_enter=0&oq=a&rsv_btype=t&rsv_t=ebbcgxsrZUUmgNSW8%2Fr4PljCkX5%2FL8NvNDz5M3ed1hm27nDOB9PHaRTlQ7nkmZ0N5Nbb&rsv_pq=f4ef53c100060ac3&bs=a&rsv_sid=37377_36552_36461_37361_36885_34813_36804_37260_26350_22159_37223&_ss=1&clist=8e7d48f30f6acc95&hsug=&f4s=1&csor=1&_cr1=34739',}).success(function(data) {console.log(data)})}, 1000)}}])</script>
</body>
</html>

$location

  • absUrl() // 绝对编码地址
  • path() // 跟路由挂钩
  • replace()
  • hash()
  • search()
  • url()
  • host()
  • port()
  • protocol()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa"><script src="./public/angular.js"></script><script>var m1 = angular.module('myApp', [])m1.controller('Aaa', ['$scope', '$location', function($scope, $location) {console.log($location.absUrl()) // file:///C:/Users/17903/Desktop/moni/index.html#!/绝对路径$location.path('/aaa/bbb/ccc').replace() // file:///C:/Users/17903/Desktop/moni/index.html#!/aaa/bbb/ccc 路由, replace()是没有历史记录console.log($location.path()) // /aaa/bbb/ccc$location.hash('hello') // file:///C:/Users/17903/Desktop/moni/index.html#!/aaa/bbb/ccc#helloconsole.log($location.hash()) // hello$location.search({ name: 'zhaohui'}) // file:///C:/Users/17903/Desktop/moni/index.html#!/aaa/bbb/ccc?name=zhaohui#helloconsole.log($location.url()) // /aaa/bbb/ccc?name=zhaohui#helloconsole.log($location.host()) // ipconsole.log($location.port()) // 端口号console.log($location.protocol()) // 协议}])</script>
</body>
</html>

$anchorScroll -锚点跳转

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 300px;height: 600px;border: 1px solid #000;}ul {position: fixed;right: 200px;top: 30px;}</style>
</head>
<body ng-app="myApp" ng-controller="Aaa"><ul><li ng-repeat="id in ['1', '2', '3', '4', '5']" ng-click="change('div'+ id)">{{id}}aaaa</li></ul><div class="box" ng-repeat="id in ['1', '2', '3', '4', '5']" ng-attr-id="div{{id}}">{{id}}</div><script src="./public/angular.js"></script><script>var m1 = angular.module('myApp', [])m1.controller('Aaa', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) {$scope.change = function(id) {$location.hash(id)$anchorScroll() // 引入这个$anchorScroll就行,自动hash跳转id,但是因为这个如果一样的不跳转,所以在这里又调用了下}}])</script>
</body>
</html>

$cacheFactory 存储

  • info()
  • put()
  • get()
  • remove()
  • 配置capacity
<!DOCTYPE html>
<html lang="en"> 
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa"><script src="./public/angular.js"></script><script>var m1 = angular.module('myApp', [])m1.controller('Aaa', ['$scope', '$cacheFactory', function($scope, $cacheFactory) {var cache = $cacheFactory('myCache', { capacity: 2 }) // capacity限制只能存储两条cache.put('name', 'hello') // 设置console.log(cache.info()) // {capacity: 2, id: 'myCache', size: 1}console.log(cache.get('name')) // hello获取cache.remove('name') // 删除console.log(cache.get('name')) // undefined}])</script>
</body>
</html>

$log – 其实跟console.log差不多

  • log // $log.log(‘hello’)
  • info()
  • warn()
  • error()
  • debug()

$interpolate

-插值计算(比如说输入框中输入{{name}}, 就找$scope.name显示替换),
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa"><!-- <span>{{ name }}</span> --><textarea ng-model="body"></textarea><span>{{ showText }}</span><script src="./public/angular.js"></script><script>var m1 = angular.module('myApp', [])m1.controller('Aaa', ['$scope', '$interpolate', function($scope, $interpolate) {$scope.name = 'zhaohui'$scope.$watch('body', function(newBody) {if (newBody) {var tem = $interpolate(newBody)$scope.showText = tem({ name: $scope.name })}})}])</script>
</body>
</html>

$q

  • promise实现
  • defer()
  • resolve()
  • reject()
  • notify() // 消息通知
  • then() --成功失败之后的回调
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa"><script src="./public/angular.js"></script><script>var m1 = angular.module('myApp', [])m1.controller('Aaa', ['$scope', '$q', function($scope, $q) {var dfd = $q.defer()function show() {setTimeout(function() {dfd.resolve()}, 2000)return dfd.promise}show().then(function() {alert('成功')}, function() {alert('shibai')})}])</script>
</body>
</html>

项目中使用–attachfileupload

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body ng-app="myApp" ng-controller="Aaa"><script src="./js/angular.js"></script><script>var m1 = angular.module("myApp", []);m1.controller("Aaa", ["$scope","$q",function ($scope, $q) {function upload() {var defer = $q.defer();var promise = defer.promise;promise.success = function (fn) {promise.then(function (response) {fn(response);});return promise;};promise.error = function (fn) {promise.then(null, function (response) {fn(response);});return promise;};promise.progress = function (fn) {promise.then(null, null, function (response) {fn(response);});return promise;};return promise;}function fnUploadFiles() {var def = $q.defer();upload().success(function (data) {def.resolve(data);}).error(function (data) {def.reject(data);}).progress(function (data) {def.notify(data);});return def.promise;}fnUploadFiles().then(function (data) {console.log("chenggongn", data);},function (data) {console.log("shibai", data);},function (data) {console.log("progress", data);});},]);</script></body>
</html>可以链式调用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body ng-app="myApp" ng-controller="Aaa"><script src="./js/angular.js"></script><script>var m1 = angular.module("myApp", []);m1.controller("Aaa", ["$scope","$q",function ($scope, $q) {function upload() {var defer = $q.defer();var promise = defer.promise;promise.success = function (data) {console.log(data);return promise;};promise.error = function (data) {console.log(data);return promise;};promise.lala = function (data) {console.log(data);return promise;};return promise;}function fnUploadFiles() {var def = $q.defer();upload().success("success").error("error").lala("nihao");return def.promise;}fnUploadFiles();},]);</script></body>
</html>

angularjs的供应商

  • 服务的相关初始化配置操作(很多服务都可以,直接在后面加Provider)
  • config
  • $interpolate --插值
    • startSymbol()
    • endSysbol()
  • $anchorScroll
    • disableAutoScrolling() —配置不可以自动跳转了,直接需要重新触发$anchorScroll()手动跳转
      插值改变
      在这里插入图片描述
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa"><!-- <span>{{ name }}</span> --><textarea ng-model="body"></textarea><span>@@ showText @@</span><script src="./public/angular.js"></script><script>var m1 = angular.module('myApp', [])m1.config(['$interpolateProvider', function($interpolateProvider) {$interpolateProvider.startSymbol('@@')$interpolateProvider.endSymbol('@@')}])m1.controller('Aaa', ['$scope', '$interpolate', function($scope, $interpolate) {$scope.name = 'zhaohui'$scope.$watch('body', function(newBody) {if (newBody) {var tem = $interpolate(newBody)$scope.showText = tem({ name: $scope.name })}})}])</script>
</body>
</html>

自定义服务

  • factory() // 第一个参数名字,第二个可以是函数或者跟controller似的[]
  • provider() --也是服务,但是比factory好在可以config初始化配置（使用angularjs的供应商）, $get
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa"><textarea ng-model="body"></textarea><script src="./public/angular.js"></script><script>var m1 = angular.module('myApp', [])m1.factory('myFactory', function() {return {name: 'hello',show: function() {return this.name}}})m1.provider('myProvider', function() {return {age: '18',$get: function() {return {name: 'zhaohui',age: this.age,show: function() {return this.name + this.age}}}}})m1.config(['myProviderProvider', function(myProviderProvider) {console.log('myProviderProvider', myProviderProvider)myProviderProvider.age = '20'}])m1.controller('Aaa', ['$scope', 'myFactory', 'myProvider', function($scope, myFactory, myProvider) { // 一般自定義放在定義好的服務後面console.log(myFactory.show()) // helloconsole.log(myProvider.show()) // zhaohui18, 中間配置了就是zhaohui20}])</script>
</body>
</html>

上面优化
可以多个模块使用
service.js

var m1 = angular.module('myModule1', [])
m1.provider('myProvider', function() {return {age: '18',$get: function() {return {name: 'zhaohui',age: this.age,show: function() {return this.name + this.age}}}}
})

index.html

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa"><textarea ng-model="body"></textarea><script src="./public/angular.js"></script><script src="./service.js"></script><script>var m2 = angular.module('myApp', ['myModule1'])m2.config(['myProviderProvider', function(myProviderProvider) {console.log('myProviderProvider', myProviderProvider)myProviderProvider.age = '20'}])m2.controller('Aaa', ['$scope', 'myProvider', function($scope, myProvider) { // 一般自定義放在定義好的服務後面console.log(myProvider.show()) // zhaohui18, 中間配置了就是zhaohui20}])</script>
</body>
</html>
  • service() -构造函数方式写法,面向对象写法
  • constant() --定义常量,可以用。config，但是這個裏面不用後面加Provider.下面這倆不用基本
  • value() – 也是定义常量,但是跟constant区别就上面那个可以config配置
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa"><textarea ng-model="body"></textarea><script src="./public/angular.js"></script><script>var m1 = angular.module('myApp', [])m1.service('myService', Fn)function Fn() {this.name = 'hello'}m1.constant('myConstant', 'LALALLA')m1.config(['myConstant', function(myConstant) {console.log('myConstant', myConstant) // LALALLA}])m1.controller('Aaa', ['$scope', 'myService', 'myConstant', function($scope, myService, myConstant) {console.log(myService.name) // helloconsole.log(myConstant) // LALALLA}])</script>
</body>
</html>

项目中

  • 看项目中基本是使用的.service，，比如弹框等基本都是返回return{ 名称： 定义的函数 }然后其他地方就可以直接abcWidth.fn()
  • 其次可能用factory，也可以返回对象函数拉乱七八糟的，使用也都差不多跟.service
  • provider 这个我看用的基本在插件中
http://www.dtcms.com/wzjs/823912.html

相关文章：

  • 2017年做那个网站致富西安网站建设风尚
  • 成都网站优化软件山东平台网站建设哪里有
  • 什么后台做网站安全中国空间站名字
  • 网站速度查询科技有限公司简介
  • 塑胶原料东莞网站建设技术支持网站制作需要平台
  • 手机怎么生成网站我想给网站网站做代理
  • 设计参考图哪个网站好wordpress 表单 入库
  • 公司为什么要网站备案全屋定制营销方案
  • 黑河做网站的公司google 优化推广
  • 全国网站建设公司排名企业网站用什么做二次开发最快
  • 做建材网站怎么做wordpress 数据库丢失
  • 会计公司网站模板下载襄阳seo公司
  • 晏阳初乡村建设网站厦门网站制作哪里好薇
  • 做网站需要哪几个板块南通开发区人才网
  • 嘉祥网站建设公司赣州建网站
  • 企业网站商城建设方案长沙市公共资源交易中心
  • 常州自助建站seodrupal网站建设
  • 钟表玻璃东莞网站建设数码网站名
  • 百度免费网站怎样建设广东佛山网络有限公司
  • sns网站设计吉安建设网站
  • 网站5g空间多少钱怎么选择佛山网站设计
  • 俄语网站建站网站开发的发展历史及趋势
  • 网站如何减少404跳转网站关停怎么做
  • 怎样做自己的 优惠卷网站抖音代运营mcn
  • 网站开发团队需配备什么岗位湘icp备 网站建设 农业 湖南
  • 商务网站设计实训报告服装平台网站有哪些
  • 苏州北京商场网站建设seo长尾关键词优化
  • 网站建设代码大全可视化网站开发工具
  • 企业网站建设代理商外贸平台有那些
  • 企业网站的规划与建设ppt河北建设工程信息网辅助系统