`
天梯梦
  • 浏览: 13766840 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

Angular.js为什么如此火呢?

 
阅读更多

AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表)

 

上一篇之 后,Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的SPA(single-page-application)应用框架,其为我们的web应 用开发增加不少魔法变换。

 

我可以花整天的时间告诉你为什么你必须在新项目尝试angular.js,但是我觉得还是百说不如一练。

 

数据绑定和scopes(作用域)

首先第一个浮出大脑的问题是:angular支持数据绑定吗?

下面让我们来了解angular.js的数据绑定:

Edit in plucker

<body ng-app>
    <span>Insert your name:</span>
    <input type="text" ng-model="user.name" />
    <h3>Echo: {{user.name}}</h3>
</body>

 

在这代码片段中,在我们解释细节之前,我还是希望尝试下其效果:

注:此刻暂时不要太心急去了解ng-app。

 

如你所见,我在input中输入的将会显示在后边echo。这是如何工作的?简单来说,angular的ng-model(更多关于指令的将在文章后续)给我带来了双向绑定机制。

 

如 此是好,但是user.name存储在哪里呢?其存储在我们的$scope上,当我们在input中输入任何字符都会及时的更新scope对象上 的user.name属性。然后我们可以利用angular的表达式{{...}}现实在HTML中。所以当我们在input中输入时,其会及时更新 scope上的user,name属性,在由修改HTML显示。

 

好吧,这并不难,但是你所说的$scope是个什么东东呢?在angular中$scope是连接controllers(控制器)和templates(模板view/视图)的主要胶合体。我们可以把我们的model存放在scope上,来达到双向你绑定。

 

这就好比:

Angular.js为什么如此火呢?
Angular.js为什么如此火呢?

这意味着我们我们从template上为$scope设置了一个属性对象user.name,所以我们也可以在controller中访问这个对象(user.name).

 

让我们来看个更复杂的示例:

Edit in plunker

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) 
{
    $scope.message = 'World';
});

 

<body ng-app="app" ng-controller="MainCtrl">
Hello, {{ message }}
</body>

 

在这里首先我们定义了angular application,只是简单的创建了一个angular module,其接受一个module名字和依赖数组为参数。

 

紧 接着创建了一个controller,通过调用 app module的controller方法,并传入一个controller 名字和function。function函数接受$scope参数(可以接受更多的参数,放在后面部分)。所以我们可以开始双向绑定了。

在$scope中我们附加了message的字符串属性。

 

在view中你可能注意到了body tag多出了一些东东,这是干什么的?这些是angular的指令(directives),它给HTML带来了新的语法扩展,在这例子中我们使用了两个angular内置的指令:

 

ng-app:它会告诉angularbody节点包含了我们的angular应用,换句话说,在body中的一切会被angular所接受管理。其参数为我们的app module的名字,和我们在javascript中命名一致。

 

ng-controller:在这指令在我们传入的是controller 名字,此例中为MainCtrl。

 

最后我们将message插入我们的remplate。

所以其可视化表示将是:

Angular.js为什么如此火呢?
Angular.js为什么如此火呢?

聪明的你可以会冒出一个疑问:我们能够在$scope上绑定function?

当然。

 

Edit in plunker

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) 
{
    $scope.greet = function() {
        $scope.message = "Hello, " + $scope.user.name;
    }
});

 

<body ng-app="app" ng-controller="MainCtrl">
    What's your name?:
    <input type="text" ng-model="user.name" />
    <button ng-click="greet()">Click here!</button>
    <h3>{{ message }}</h3>
</body>

 

我在示例controller中很容易了解到如何添加function到$scope。示例中function将修改$scope.message为“hello ,”和从input输入的$scope.user.name的字符串连接。

 

然后在HTML中创建一个附加了angular bg-click 指令的button。ng-click指令是的button在被点击时会执行我们为其赋值的greet()表达式。

 

注意:在input中enter并不会工作,这是展示ng-click如何工作。

Angular.js为什么如此火呢?
Angular.js为什么如此火呢?

指令

我们已经看见了一些指令了,指令是个什么东东?

指令为HTML引入了新的语法。HTML已经很强大了,但是有时我需要更多...

 

看下面的例子:

<body>
    <div id="chart"></div>
</body>

 

示例代码在做什么?除了看见id外,我真的什么也不能获知。

然后我们只得从多余30个javascript文件中去查找,最后我们看见如下代码:

$('#chart').pieChart({ ... });

 

Aha!原来是个饼图(pie chart)容器。

在这里如果你不去查找javascript文件将无法获知页面到底是做什么的,实现了什么功能。

 

下面我们再来看看angular code,

<body>
    <pie-chart width="400" height="400" data="data"></pie-chart>
</body>

 

是不是语义很清晰,我们可以一眼看出这是一个pie chart,不仅如此,而且还知道width,height,以及其数据。

如果你对pie chart 示例感兴趣,请猛击这里

 

angular内置指令

angular给我带来了大量的内置指令。我们已经在前面看见了ng-app,ng-controller,ng-click,ng-model(angular的内置指令都以ng开始),接下来让我了解更多的内置指令。

 

有时在页面中有部分内容我们只希望到达某状态(属性为true)才显示:

Edit in plunker

<button ng-click="show = !show">Show</button>
<div ng-show="show">
    I am only visible when show is true.
</div>

 

ng-show仅当angular其表达式值为true时,才显示该元素或子元素。

 

注意:在这里对于ng-click我们并不是直接在controller中创建function(此刻我们没真正的controller),利用angular表达式作为指令的参数。在首次表达式为undefined,然后我们设置为为true,在false如此交替。

angular同时也提供了ng-hide指令。

 

让我们看些更有趣的指令,如果有个List或者数组呢?

Edit in plunker

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) 
{
    $scope.developers = 
    [
        { 
            name: "Jesus", country: "Spain" 
        },
        {
            name: "Dave", country: "Canada"
        },
        {
            name: "Wesley", country: "USA"
        },
        {
            name: "Krzysztof", country: "Poland"
        }
    ];
});

 

<body ng-app="app" ng-controller="MainCtrl">
    <ul>
        <li ng-repeat="person in developers">
            {{person.name}} from {{person.country}}
        </li>
    </ul>
</body>

 

棒极了,我们在controller中定义了一个list对象,在HTMLng-repeat就能简单的显示了。

它是如何工作的?

 

ng-repeat会为集合中的每一项创建一个新的模板,在示例中有四项数据,将会重复创建下面code四次,

<li ng-repeat="person in developers">
    {{person.name}} from {{person.country}}
</li>

 

 

每次复制都会创建自己新的scope,我们没有为每项手动创建scope,我们可以把scope理解为其scope,但是在这里我们仍然能够访问父scope。

可视化的展示为:

Angular.js为什么如此火呢?
Angular.js为什么如此火呢?

我们能自定义directive?

当然,我们能以不同粒度方式创建angular的directive,例如modal dialogs accordions, paginators, charts,search from ...

 

angular指令总是与可视化有关?不,我们仍然可以创建一些非可视化的指令集。

让我们来看一个例子吧:

 

回到我们上面的greet示例:

<body ng-app="app" ng-controller="MainCtrl">
    What's your name?:
    <input type="text" ng-model="user.name" />
    <button ng-click="greet()">Click here!</button>
    <h3>{{ message }}</h3>
</body>

 

 

已经能够很好的工作了,但是我们希望能够在页面初始化的时候光标焦点聚焦在输入框input。jQuery?jQuery提供了focus函数,能够很简单的完成,但是这里是angular教程,所以我们需要以angular way,显得我们更专业些...

 

同时我们也希望我们的HTML能够有自描述能力(译者注:现代软件开发特别语言语义更重要,如linq,guava,restfull...) ,所以angular directive肯定是个好的选择。

app.directive('focus', function() 
{
    return 
    {
        link: function(scope, element, attrs) {
            element[0].focus();
        }
    };
});

 

 

接下来,我们可以在可以HTML中标注angular directive(angular directive首字母小写驼峰命名,在前台转换为全小写-分割风格)。

 

directive是angular中最复杂的要点,这里只是最简单的directive而已,如果可能这将放在以后文章,这里并不会深入。

 

directive需要一个object的返回对象,我们可以定义一些需要关注的属性,在示例中我们返回了一个link的链接函数(link函数主要作为directive的行为绑定), 我们如果需要,也可以替换HTML中模板。

 

Link function有3个参数(准确应该是是4个)scope,节点element,还有所有HTML attribute iAttrs。在link函数里我们可以绑定click,mouseenter等事件,注册指令行为。

 

在示例中我们为指令节点使用了focus操作。对element了解更多,你可以移步到这里

我们可以很简单的使用指令如下:

 

 Edit in plunker

<body ng-app="app" ng-controller="MainCtrl">
    What's your name?:
    <input type="text" focus ng-model="user.name" />
    <button ng-click="greet()">Click here!</button>
    <h3>{{ message }}</h3>
</body>

 

 

目前我们看见的directive都很简单,如何利用指令渲染上面说的固定模板呢?

如下:

app.directive('hello', function() 
{
    return {
        restrict: "E",
        replace: true,
        template: "<div>Hello readers, thank you for coming</div>"
    }
});

 

 

这里返回的是带有一些attribute的object。

  • restrict:指令的使用方式
  1. Attribute 形如:<div foo></div>.
  2. Element 形如:<foo></foo>
  3. Class 形如: <div class=”foo”></div>
  4. CoMment 形如: <!-- directive: foo -->
  • replace:询问是不是需要利用我们的模板替换原来的节点。
  • template:我们需要append或者replace到原节点的html模板。

directive还有很多的可配置options,如编译compile,template url ...

在示例我们不需要行为的绑定,所有没有link function。其使用如下:

Edit in plunker

<hello></hello>

 

 

Filters(过滤器)

假想我们有个购物车的view显示如下:

<span>There are 13 phones in the basket. Total: {{ 1232.12 }}</span>

 

 

我们如何利用angular表达式显示为货币格式?形如:$1,232.12。

 

相当简单,angular为我们提供了叫filter得东东,过滤器其好比unix中的管道pipeline。angular同时也内置了货币currency filter.

<span>There are 13 phones in the basket. Total: {{ 1232.12 | currency }}</span>

 

 

如你所见,我们可以用| 使用filter,这和unix管道模型很相似。我们也可以使用|链接更多的filter。

例如我们可以对开发人员简单排序,在用ng-repeat显示出来:

<ul>
    <li ng-repeat="person in developers | orderBy:'name'">
        {{ person.name }} from {{ person.country }}
    </li>
</ul>

 

 

在这里你发现了一些很有趣的事?卫门你可以给filter传递参数!

 

OrderBy filter会接受一个属性名,并以它进行排序,示例中我们使用 name,如果你希望反序排列,你可以用 -name表示。

 

马上你可能会冒出你头脑:假想我们不止4个开发人员,有300,并且我们希望通过 name,country过滤呢?

非常简单:

Edit in plunker

<body ng-app="app" ng-controller="MainCtrl">
Search: <input ng-model="search" type="text" />
<ul>
    <li ng-repeat="person in developers | filter:search">
        {{ person.name }} from {{ person.country }}
    </li>
</ul>
</body>

 

 

在示例中请注意我们是如何绑定search.name的,此处利用name 做filtering。filter的参数不会改变,绑定是search对象,会根据我们在input中输入改变,而filter则会找寻search对象中的name属性。

到这里我希望你也像我一样一样兴奋起来了!

 

下面我们来自定义filter呢?实现单词首字母大写 filter:

app.filter('capitalize', function() 
{
    return function(input, param) 
    {
        return input.substring(0,1).toUpperCase()+input.substring(1);
    }
});

 

 

这里我们自定义了一个filter其接受输入参数input和过滤器参数param的一个函数。

接下来我们将在view使用它:

<span>{{ "this is some text" | capitalize }}</span>

 

 

Services

在文章最后,我们需要再次较少下services。这是一个的维护应用程序功能逻辑部分,他是一个单间模式singleton。

 

为了保持应用程序的逻辑层次分明,更趋向于将其业务逻辑放到不同的services,保持controller的逻辑只有流程控制和view交互逻辑。

 

angular 内置了很多services,如$http http请求,$q 异步promises编程模式...在这里我们不会讨论angular的内置services,由于有很多的services,并且很难一次性解释完,将 在后续文章。我们将创建一个简单的自定义services。

 

在controller之间共享数据对我们很有用,每个controller都有自己的scope所以我们不能将其绑定到其他的controller。所以解决方案是services,可以吧数据共享到services,在需要用到的地方引用它。

 

首先我们来看看如果不用services,我们将会遇见什么问题:

<div ng-controller="MainCtrl">
    MainCtrl:
    <input type="text" ng-model="user.name">
</div>

<div ng-controller="SecondCtrl">
    SecondCtrl:
    <input type="text" ng-model="user.name">
</div>

 

app.controller('MainCtrl', function($scope) {

});

app.controller('SecondCtrl', function($scope) {

});

 

 

我们使用了相同的ng-model,预期当一个input改变时候会及时更新到另一个input,如下:

Angular.js为什么如此火呢?
Angular.js为什么如此火呢?

但是实际情况却是:

Angular.js为什么如此火呢?
Angular.js为什么如此火呢?

接下来需要借助services来解决这个问题,利用services将user name在controller之间共享。

app.factory('UserInformation', function() 
{
    var user = {
        name: "Angular.js"
    };

    return user;
});

 

 

这里用的是factory去创建一个service。angular中还有其他更高级的方式去创建service,如service,provider,这将会在后续文章详解。

 

这里有很多方式去创建service,我们选择的是创建了一个带有name默认值的user对象,并返回它。

在controllers中如何去使用呢?如下:

Edit in plunker

app.controller('MainCtrl', function($scope, UserInformation) {
    $scope.user = UserInformation;
});

app.controller('SecondCtrl', function($scope, UserInformation) {
    $scope.user = UserInformation;
});

 

 

现在我们的程序形如:

Angular.js为什么如此火呢?
Angular.js为什么如此火呢?

酷极了,它工作了,工作了。

 

现 在我们的$scope.user在MainCtrl和SecondCtrl都用的是UserInformation,并且service是单例 的,所以当我们更新其中一个controller的时候,另外一个也将会被更新。也有你又有了一个疑问:UserInformation参数是从哪里来 的?

 

angular核心是DI(依赖注入)在需要使用的地方会自定注入service。DI将不会在本节中讲述,我们可以简单的说,你创建 了一个 service,你可以在module作用域的controller,directive,甚至是其他service作为参数来轻松使用。

 

也许你对上面出现的$scope认为他也是个service,其实这是一个例外,其并不是真正的service注入到我们的controller。

 

总结:

到这里我们完成了第一篇但不是最后一篇angular博客。

Angular.js是一个优秀的框架,我敢肯定你也爱上了它。希望能在下片文章中仍然能见到你的倩影。

希望你能enjoyed这篇文章,也能够评论些你的观点。

 

英文原文:http://angular-tips.com/blog/2013/08/why-does-angular-dot-js-rock/

译文链接:http://www.cnblogs.com/whitewolf/p/angularjs-start.html

AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表)

下一篇:七步从Angular.JS菜鸟到专家(1):如何开始

 

本文转自:Angular.js为什么如此火呢?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    Data-Structures-Algorithms-LaFore-In[removed]Java 中的数据结构和算法示例移植到 Javascript

    你可能会看着它说(你为什么要做这些事情 - javascript 原生支持 X!)。 这不是重点,因为这是一个学习练习 在转换为 javascript 语法时,我试图使示例相对接近本书,因此它不是最佳实践 我正在尝试尽可能多地使用...

    【大牛说】聊聊前端那些事儿

    #### 高压环境下前端为何如此火爆? 随着互联网行业的飞速发展,用户对互联网产品的体验需求不断提高,前端技术的重要性日益凸显。前端技术不仅涉及网页的设计与交互,还涵盖了用户体验优化等多个方面。据统计,...

    基于局部优化的电动汽车充放电策略优化:MATLAB+CVX平台下的调度模型与效果分析,基于局部优化的电动汽车大规模随机充放电策略优化方案-对比均衡负载与全局优化法,实现运行成本最小化与高效出图效果

    基于局部优化的电动汽车充放电策略优化:MATLAB+CVX平台下的调度模型与效果分析,基于局部优化的电动汽车大规模随机充放电策略优化方案——对比均衡负载与全局优化法,实现运行成本最小化与高效出图效果。,MATLAB代码:基于局部优化的大规模电动汽车随机充放电策略优化 关键词:电动汽车充放电优化 电动汽车 局部优化 充放电策略 参考文档:《Optimal Scheduling for Charging and Discharging of Electric Vehicles》完全复现 仿真平台:MATLAB+CVX平台 主要内容:代码主要做的是电动汽车充放电优化策略管理,为解决大规模电动汽车调度问题带来的复杂求解难度,提出了一种基于局部优化的快速优化方法,并横向对比了三种方法,即均衡负载法、局部优化法以及全局优化法,电动汽车的调度模型考虑了大量人口以及电动汽车的随机达到分布式调度模型,调度的目标函数为电动汽车充放电管理的运行成本最小化,更加创新,而且求解的效果更好,出图效果十分完美 可以直接拿过去用 ,电动汽车; 局部优化; 充放电策略优化; 随机充放电; 分布式调度模型; 运行成本

    基于PLC控制的加工站与包装站间传送系统电气控制设计研究,PLC在加工传送包装站中的电气控制系统设计与应用,基于plc加工站传送包装站控制系统设计加工传送包装站电气控制 ,核心关键词:PLC加工站

    基于PLC控制的加工站与包装站间传送系统电气控制设计研究,PLC在加工传送包装站中的电气控制系统设计与应用,基于plc加工站传送包装站控制系统设计加工传送包装站电气控制 ,核心关键词:PLC加工站; 传送; 包装站; 控制系统设计; 电气控制。,基于PLC的加工站与包装站控制系统设计与电气控制

    2012年必应壁纸.rar

    2012年必应壁纸

    Zotero 重复合并 v1.1.5

    来自GITHUB作者frangoud的文档合并删除插件,适用于Zotero。原下载网站网速较慢,提供一个下载链接 使用方法: 1.下载zotero 重复条目合并文件。 2.在Zotero中点击工具-附加组件,齿轮处选择 install Add-on from file...。 3.找到下载文件中的ZoteroDuplicatesMerger-v1.1.5.xpi并双击。 4.双击install now。 5.重启以确认安装。 插件原下载位置:https://github.com/frangoud/ZoteroDuplicatesMerger

    基于DDS技术的FPGA信号发生器波形仿真:用Verilog语言实现正弦波、方波、锯齿波及三角波的组合生成,基于DDS技术的FPGA信号发生器波形仿真:Verilog语言实现正弦波、方波等四种波形及其

    基于DDS技术的FPGA信号发生器波形仿真:用Verilog语言实现正弦波、方波、锯齿波及三角波的组合生成,基于DDS技术的FPGA信号发生器波形仿真:Verilog语言实现正弦波、方波等四种波形及其线性组合生成,FPGA仿真,Verilog语言。 基于DDS技术的信号发生器波形仿真,能产生正弦波方波锯齿波三角波以及四种波形的线性组合。 ,FPGA仿真; Verilog语言; DDS技术; 信号发生器; 正弦波; 方波; 锯齿波; 三角波; 波形组合。,FPGA实现DDS技术:Verilog编程的信号发生器波形仿真

    BIC调控超表面手性光响应:偏振转换、能带结构与复杂结构建模研究,基于BIC的超表面手性光响应:探索偏振转换与圆二色性CD谱特性,复杂结构建模及仿真研究,COMSOL与MATLAB联合应用,BIC支持

    BIC调控超表面手性光响应:偏振转换、能带结构与复杂结构建模研究,基于BIC的超表面手性光响应:探索偏振转换与圆二色性CD谱特性,复杂结构建模及仿真研究,COMSOL与MATLAB联合应用,BIC支持的超表面最大可调手性光响应; - 复现:2022子刊NC; - 结果关键词:超表面,BIC,偏振转、能带、偏振场分布、Q因子、圆二色性CD谱,光场模式、斜入射、复杂结构建模 - 软件:comsol,matlab - 备注:所展示结构即可以实现文章所有结果,其后续图均为修改参数即可得到 ,BIC; 超表面; 最大可调手性光响应; 复现2022子刊NC; 偏振转换; 能带; 偏振场分布; Q因子; 圆二色性CD谱; 光场模式; 斜入射; 复杂结构建模; comsol; matlab。,BIC超表面优化光响应研究:偏振转换与能带调控

    南充经济开发区(南充化工园区)智慧园区解决方案PPT(65页).pptx

    在当今化工行业转型升级的大潮中,智慧化工园区作为推动绿色、创新、高质量发展的关键力量,正逐步成为行业发展的新趋势。随着国家政策的不断引导和推动,智慧化工园区的建设已不仅仅是提升管理服务水平的手段,更是实现安全生产、环境保护和应急响应能力全面提升的重要途径。从提升重大危险源监测、隐患排查到完善风险分级管控机制,智慧化工园区利用信息化、智能化技术,构建了一个全方位、多层次的安全、环保、应急救援一体化管理平台。 智慧化工园区以安全、便捷、高效、节能、物联为核心理念,通过深度融合云计算、物联网、人脸识别、大数据分析、人工智能等先进技术,实现了园区生产、车辆、人员、环境、能源等关键环节的智能化管理。在基础网络方面,园区不仅实现了全千兆光纤接入,还覆盖了5G信号、NB-IoT信号和WiFi网络,为万物互联提供了坚实的基础。智慧安监作为园区的核心板块,通过企业安全云服务、安全文化宣传教育、舆情信息监管、风险分级管控、隐患排查治理以及重大危险源管理等功能,构建了从源头到末端的全过程安全监管体系。特别是企业一张表功能,实现了企业档案的数字化管理,为精准施策提供了有力支持。此外,智慧园区还通过物联网监测预警系统,利用智能终端设备对园区内的各类风险进行实时监测和预警,确保园区安全无虞。 在智慧节能与环保方面,园区通过智能仪表监测电、水、冷、气等能耗数据,实现能源管理的精细化和节能减排。智慧应急系统则融合了指挥调度、辅助决策等功能,能够在突发情况下迅速响应,有效处置。智慧环保系统则利用物联网技术和大数据分析,实现了环境质量的自动监测和预警,为环保部门提供了精准的执法依据。同时,智慧物流、智慧安防、智慧楼宇等系统的引入,进一步提升了园区的智能化水平和运行效率。这些系统的集成应用,不仅让园区的管理更加便捷高效,还极大地提升了园区的整体竞争力和可持续发展能力。对于正在筹备或优化智慧化工园区建设方案的读者来说,这份解决方案无疑提供了宝贵的参考和灵感,让智慧化工园区的建设之路变得更加清晰和有趣。

    基于SMO滑模观测器的异步电机无传感器矢量控制:Matlab仿真模型研究,基于SMO滑模观测器的异步电机无传感器矢量控制研究:Matlab仿真模型分析,基于SMO滑模观测器的异步电机无传感器矢量控制

    基于SMO滑模观测器的异步电机无传感器矢量控制:Matlab仿真模型研究,基于SMO滑模观测器的异步电机无传感器矢量控制研究:Matlab仿真模型分析,基于SMO滑模观测器的异步电机无传感器矢量控制,matlab,仿真模型。 ,基于SMO滑模观测器; 异步电机无传感器矢量控制; MATLAB; 仿真模型;,基于SMO的异步电机无传感器矢量控制仿真模型:MATLAB中的滑模观测器应用

    使用ssh框架的文档管理系统.zip(毕设&课设&实训&大作业&竞赛&项目)

    项目工程资源经过严格测试运行并且功能上ok,可复现复刻,拿到资料包后可实现复刻出一样的项目,本人系统开发经验充足(全栈),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助 【资源内容】:包含源码、工程文件、说明等。资源质量优质,放心下载使用!可实现复现;设计报告可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,及时抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 质量优质,放心下载使用。下载后请首先打开说明文件(如有);项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途,网络商品/电子资源资料具可复制性不支持退款。质量优质,放心下载使用。

    在 Python 中使用 TensorFlow 进行面罩检测

    tensorflow 在 Python 中使用 TensorFlow 进行面罩检测 在本文中,我们将讨论我们的两阶段 COVID-19 口罩检测器,详细介绍我们将如何实施我们的计算机视觉/深度学习管道。 我们将使用此 Python 脚本来训练口罩检测器并查看结果。鉴于经过训练的 COVID-19 口罩检测器,我们将继续实施另外两个额外的 Python 脚本,用于: 检测图像中的 COVID-19 口罩 检测实时视频流中的面罩

    北京大学-DeepSeek系列-提示词工程和落地场景

    北京大学-DeepSeek系列-提示词工程和落地场景

    控制台下的超级玛丽,自己做的“黑框框程序创意设计大赛”作品。。。一般般,可是符合现阶段我的水准,加油.zip

    大创项目代码

    一站式图片处理神器,轻松搞定截图与编辑

    打工人们你们好!这里是摸鱼 特供版~ 嘿,朋友们!在日常工作中,无论是设计、文档整理,还是简单的图片编辑,我们总离不开各种图片处理工具。但你是否还在为频繁切换软件而烦恼?今天,我要给大家介绍一款超实用的综合性图片处理工具——PicPick!它不仅能轻松完成各种截图任务,还能对图片进行高效编辑,甚至还有许多隐藏的“黑科技”功能,绝对能让你爱不释手! 推荐指数:★★★★★ 一、功能介绍 1. 屏幕截图:五种模式,满足你的所有需求 PicPick的截图功能堪称“全能”,提供了五种不同的截图模式,无论是全屏截图、活动窗口截图,还是自由选取截图、固定区域截图,甚至是滚动截屏,都能轻松搞定。再也不用担心错过屏幕上的任何精彩瞬间! 全屏截图:一键捕捉整个屏幕,适合快速获取完整画面。 活动窗口截图:精准捕捉当前活动窗口,方便提取特定应用的内容。 自由选取截图:自由框选任意区域,灵活应对复杂场景。 固定区域截图:设置固定区域,重复截图时更加高效。 滚动截屏:完美解决长网页、长文档的截图难题,一键生成完整长图。 2. 屏幕截图图像编辑:功能强大,操作简单 截图完成后,PicPick还能对图片进行快速

    S7-1200 PLC在MCGS M7120型平面磨床电气控制系统中的改造实践,S7-1200 PLC与MCGS系统改造M7120平面磨床电气控制系统升级方案,S7-1200 MCGS M7120型平

    S7-1200 PLC在MCGS M7120型平面磨床电气控制系统中的改造实践,S7-1200 PLC与MCGS系统改造M7120平面磨床电气控制系统升级方案,S7-1200 MCGS M7120型平面磨床电气控制系统的PLC改造 ,S7-1200 PLC; MCGS 监控系统; M7120平面磨床; 电气控制系统改造; 自动化升级,S7-1200 PLC在M7120型平面磨床电气系统中的升级改造

    智慧化工园区解决方案-6PPT(50页).pptx

    在当今化工行业转型升级的大潮中,智慧化工园区作为推动绿色、创新、高质量发展的关键力量,正逐步成为行业发展的新趋势。随着国家政策的不断引导和推动,智慧化工园区的建设已不仅仅是提升管理服务水平的手段,更是实现安全生产、环境保护和应急响应能力全面提升的重要途径。从提升重大危险源监测、隐患排查到完善风险分级管控机制,智慧化工园区利用信息化、智能化技术,构建了一个全方位、多层次的安全、环保、应急救援一体化管理平台。 智慧化工园区以安全、便捷、高效、节能、物联为核心理念,通过深度融合云计算、物联网、人脸识别、大数据分析、人工智能等先进技术,实现了园区生产、车辆、人员、环境、能源等关键环节的智能化管理。在基础网络方面,园区不仅实现了全千兆光纤接入,还覆盖了5G信号、NB-IoT信号和WiFi网络,为万物互联提供了坚实的基础。智慧安监作为园区的核心板块,通过企业安全云服务、安全文化宣传教育、舆情信息监管、风险分级管控、隐患排查治理以及重大危险源管理等功能,构建了从源头到末端的全过程安全监管体系。特别是企业一张表功能,实现了企业档案的数字化管理,为精准施策提供了有力支持。此外,智慧园区还通过物联网监测预警系统,利用智能终端设备对园区内的各类风险进行实时监测和预警,确保园区安全无虞。 在智慧节能与环保方面,园区通过智能仪表监测电、水、冷、气等能耗数据,实现能源管理的精细化和节能减排。智慧应急系统则融合了指挥调度、辅助决策等功能,能够在突发情况下迅速响应,有效处置。智慧环保系统则利用物联网技术和大数据分析,实现了环境质量的自动监测和预警,为环保部门提供了精准的执法依据。同时,智慧物流、智慧安防、智慧楼宇等系统的引入,进一步提升了园区的智能化水平和运行效率。这些系统的集成应用,不仅让园区的管理更加便捷高效,还极大地提升了园区的整体竞争力和可持续发展能力。对于正在筹备或优化智慧化工园区建设方案的读者来说,这份解决方案无疑提供了宝贵的参考和灵感,让智慧化工园区的建设之路变得更加清晰和有趣。

    基于集成学习Bagging算法的Matlab数据回归预测代码实现,基于集成学习Bagging算法的集成模型数据回归预测:高效MATLAB代码实践,基于集成模型的Bagging的数据回归预测 matla

    基于集成学习Bagging算法的Matlab数据回归预测代码实现,基于集成学习Bagging算法的集成模型数据回归预测:高效MATLAB代码实践,基于集成模型的Bagging的数据回归预测 matlab代码 ,基于Bagging的集成模型; 数据回归预测; Matlab代码,基于集成模型Bagging的Matlab数据回归预测实现

    数据库实现电话簿和记事本.zip(毕设&课设&实训&大作业&竞赛&项目)

    项目工程资源经过严格测试运行并且功能上ok,可复现复刻,拿到资料包后可实现复刻出一样的项目,本人系统开发经验充足(全栈),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助 【资源内容】:包含源码、工程文件、说明等。资源质量优质,放心下载使用!可实现复现;设计报告可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,及时抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 质量优质,放心下载使用。下载后请首先打开说明文件(如有);项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途,网络商品/电子资源资料具可复制性不支持退款。质量优质,放心下载使用。

    web项目,功能测试平台.zip(毕设&课设&实训&大作业&竞赛&项目)

    项目工程资源经过严格测试运行并且功能上ok,可复现复刻,拿到资料包后可实现复刻出一样的项目,本人系统开发经验充足(全栈),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助 【资源内容】:包含源码、工程文件、说明等。资源质量优质,放心下载使用!可实现复现;设计报告可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,及时抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 质量优质,放心下载使用。下载后请首先打开说明文件(如有);项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途,网络商品/电子资源资料具可复制性不支持退款。质量优质,放心下载使用。

Global site tag (gtag.js) - Google Analytics