在这一步中,我们会实现电话细节的视图,这在用户点击列表中的一部电话时被展示. ·当您点击列表中的一部电话时,带有电话特定信息的电话细节页面将被展示. 我们打算使用$http来获取我们的数据,以此来实现电话细节视图,然后刷新phoneDetail组件模板. 最大的不同列举如下,您也可以点击这里从GitHub上看到全部不同. 数据 除了phones.json,app/phones/目录中也包含了每一步电话的JSON文件: app/phones/nexus-s.json: (样本片段) { "addi…

(注:曾经在<不敢止步>一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍.这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Phonecat范例全部翻译一遍,这当然更多是希望自己能得到一个提高.翻译力求尽善尽美,当然质量实在难以保证.所有专有名词尽量不译,所有章节与https://docs.angularjs.org/tutorial/对应,如果可以,希望您能对照两边学习,给我提些意见.那么,开始吧!) 本节翻译自:https://do…

在这一步中,我们将会在电话列表中为电话添加略图,并附上链接,当然现在也不会链接去哪.在随后的步骤中,我们将使用这些链接来展示电话列表中额外的信息. ·现在电话列表中会有链接和图片. 最重要的不同在下面列出.您可以点击这里在GitHub上查看全部的不同. 数据 注意到phones.json文件中包含了每一部电话的唯一ID和图片URLs.这些URLs指向app/img/phones/目录. app/phones/phones.json (样本代码片段): [ { ... "id": &qu…

在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view).一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户端代码“掌管”并和视图层实现了动态交互,通过在数据模型和状态中即刻更新视图来反应改变,这经常是用户交互的结果(我们不久将在第5步中看到一个例子),这种做法取代了在服务端创建一个静态HTML页面的做法. 模板(视图层包含绑定和展示逻辑的部分)作为一个蓝图,以此来决定我们数据怎么组织和展示给用户.而控制…

我们受够了在应用中用硬编码的方法嵌入三部电话!现在让我们用Angular内建的叫做$http的服务来从我们的服务器获取更大的数据集吧.我们将会使用Angular的依赖注入来为PhoneListCtrl控制器提供服务. ·现在我们有一个20部电话的列表,它们都是从服务器加载而来. 最重要的变化列举如下,当然您也可以点击这里在GitHub上查看所有的不同. 数据 你项目中的app/phones/phones.json文件是一个使用了JSON格式的一个更大的电话数据集合. 下面是一个文件的样本: […

在这一节的tutorial中,您将会逐渐熟悉AngularJS phonecat app的最重要的源代码文件.您也将学到如何将开发服务器与angular-seed绑定到一起,并且在浏览器中运行应用. 在您继续之前,请确保您已经搭建好您的开发环境并且安装了所有必要的依赖,像这里描述的那样. 在angular-phonecat目录下,运行这条指令: git checkout -f step-0 这将使您工作空间的tutorial应用重置到step 0. 您必须在将来的每一步中重复这条指令并将步骤指向…

[译]The Python Tutorial#Brief Tour of the Standard Library 10.1 Operating System Interface os模块为与操作系统交互提供了许多函数: >>> import os >>> os.getcwd() # Return the current working directory 'C:\\Python36' >>> os.chdir('/server/accesslogs'…

在这一步中,我们将会通过在我们先前创建的模板代码中添加CSS和JavaScript动画效果来扩展我们的web应用. ·我们现在使用ngAnimate模块来允许动画效果贯穿整个应用. ·我们也依赖于自带的指令来自动触发动画来进行开发. ·当一个动画效果被发现时,在给定的时间内,它将会和置于元素中的实际DOM操作一同运行(比如:在ngRepeat中插入/删除节点或在ngClass中添加/删除类). 最大的不同列举如下,您可以点击这里在GitHub上查看全部的不同. CSS过渡动画:使ngRepeat…

在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTTP方法和URLs. 最重要的变化列举如下,您可以点击这里在GitHub上查看全部的不同. 依赖 RESTful功能由Angular的ngResource模块提供,这是从Angular核心模块中独立出来的. 由于我们使用了Bower来安装客户端的依赖,这一步更新bower.json配置文件来添加新的依…

在这一步中,您将会在电话细节页面添加一个可点击的电话图片转换器. ·电话细节页面展示了当前电话的一张大图片和几张相对较小的略图.如果我们能仅仅通过点击略图就能把大图片换成略图就好了.让我们看看用Angular如何实现它. 最大的不同列举如下,您可以点击这里在GitHub上查看全部的不同. 组件控制器 app/phone-detail/phone-detail.component.js: ... controller: ['$http', '$routeParams', function Phon…

在这一步中您将学到如何创建您自己的展示过滤器. ·在先前的步骤中,细节页面展示“true”或“false”来显示某部电话是否有某项功能.在这一步中,我们将使用自定义的过滤器来将这些个字符串转化成符号:✓ 代表“true”, ✘代表“false”. 让我们看看过滤器代码看起来是什么样的. 最重要的改变展示如下,您可以点击这里在GitHub上查看全部的不同. checkmark过滤器 由于这个过滤器是大众化的(比如:它没有指向任何视图或组件),我们打算将其在一个core模块中注册,该模块包含了“广泛…

在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用. ·当您现在访问/index.html,您将被重定向到/index.html#!/phones,电话列表会显示在浏览器中: ·当您点击一部电话的超链接,URL会改变至该指定电话,浏览器将展示一个简短的电话细节页面. 最大的不同列举如下,您可以点击这里在GitHub上查看全部的不同. 依赖 这一步中添加的路由功能是由Angular中的ngRoute模块提供的,该模块由核…

在这一步中,我们将不会在我们的应用中添加任何新功能,相反,我们打算退回一步,重构我们的代码库,移动我们的代码和文件,以此来使我们的应用更具易扩展性和可维护性. 在先前的步骤中,我们已经见识到了如何将我们的应用构建得更具模块性和可测试性.另一种同样重要的思想是,用一种使得查看代码变得容易(无论对我们还是团队中的其他开发者)和能在我们应用中快速指定的某区域的相关代码块的方式来组织我们的代码库. 为此,下面我们将解释为何及如何: ·将每一个实体置于他们自己的文件中(own file). ·通过特定区域…

在这一步中,您将会添加一个新特性来使得您的用户可以控制电话列表中电话的顺序,动态改变顺序是由创建一个新的数据模型的特性实现的,将它和迭代器绑定在一起,并且让数据绑定神奇地处理下面的工作. ·除了搜索框,应用会展示一个下来菜单来允许用户控制电话列表的顺序. 最大的改变列举如下,当然您可以点击这里查看全部的不同. 组件模板 app/phone-list/phone-list.template.html: <div class="container-fluid"> <div…

在上一步中,我们花了很大功夫来布局应用的基础,所以我们现在做点简单点的吧!我们将会添加一个全文本搜索框(没错,这很简单). ·我们的应用现在会有一个搜索框,注意页面中手机列表的改变取决于用户在搜索框键入的内容. 最重要的变化列举如下,当然,你也可以点击这里在GitHub上查看全部的不同. 控制器 我们对控制器不做任何修改. 模板 app/phone-list/phone-list.template.html: <div class="container-fluid"> &l…

是时候用AngularJS生成我们的动态页面了. 通常我们有很多方法来构建一个应用的代码.对于Angular的应用,我们鼓励使用MVC设计模式来解耦代码并且实现职责独立.记住这个,现在让我们在我们的应用中使用一点Angular和Javascript来添加模型,视图和控制器成分. ·列表中的三部电话是由数据动态生成的. 最重要的不同将会在下面阐述,您可以点击这里在GitHub上查看所有的不同. 视图和模板 在Angular中,视图是数据模型通过html模板的映射.这意味着无论何时模型改变了,Ang…

为了说明Angular如何扩展了标准的html,您将会创建了一个纯粹的静态html页面,并且看到我们如何将这些html代码转换成Angular能动态展示相同结果的模板. 在这一步您将会在一个html页面中添加两部手机的基本信息. ·这个页面现在包含一个有两部手机的基本信息名单. 最重要的不同被列在了下面,您可以点击这里在GitHub上查看全部的不同. app/index.html: <ul> <li> <span>Nexus S</span> <p&g…

文档资料 速查表:https://www.angular.cn/guide/cheatsheet 风格指南:https://www.angular.cn/guide/styleguide Angular 词汇表:https://www.angular.cn/guide/glossary 路由与导航:https://www.angular.cn/guide/router API 列表:https://www.angular.cn/api 路由器配置 Routes:https://www.angul…

操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 通过接下来的章节,我们将会开启有关图形管线的话题,通过对图形渲染管线的配置完成最后的三角形绘画.所谓图形管线就是将mesh使用到的vertices定点数据和贴图数据,转化为渲染targets像素的操作序列.简要的概述如下图所示: Input assembler收集最原始的顶点数据,并且还可以使用索引缓冲区复用这些数据元素,而不必复制冗余的顶点数据副本. v…

一般来讲表单可能遇到的问题:1.如何数据绑定.2.验证表单.3.显示出错信息.4.整个form的验证.5.避免提交没有验证通过的表单.6.防止多系提交. input属性:nameng-modelng-requiredng-minlengthng-maxlengthng-patternng-change值变化时的回调 {{myForm.username.$error}} Form控制变量字段是否未更改formName.inputFieldName.$pristine字段是否更改formName.i…

1.angular.bind(self,fn.args);   切换作用域执行 2.angular.copy(source,[destination]);   拷贝和深度拷贝 3.angular.equals(o1,o2);  比较 4.angular.extend(dst,src); 对象的扩展 5.angular.forEach(); 循环 6.angular.fromJson(string);字符串转Json 7.angular.toJson(json,pretty); json转字符串…

原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与model.controller的信息一起,渲染成用户在浏览器中所看到的视图.它是静态的DOM,包括HTML.CSS.angular特别的元素和angular指定的元素属性.angular元素和属性指示angular去扩展行为以及将template DOM转换为动态视图的DOM. 下面是我们可以在templ…

HttpClientModule 应用 导入新的 HTTP Module import {HttpClientModule} from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {…

原文:https://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art074 ------------------------------------------------------- Angular CLI behind the scenes, part one Google's Angular is a fairly popular web application development framework - alth…

Angular常见问题:subscribe()还是 async 管道 ? 终极答案就在这里 Angular Development #10 – RouteReuseStrategy – Maintaining Component State on Navigation Angular Development #8 – Control Value Accessor Create An Angular Library And Consume it locally (with debugging) H…

React JS Tutorials for Beginners - 1 - Getting Started https://www.youtube.com/watch?v=-AbaV3nrw6E&list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA Downloads: https://facebook.github.io/react/downloads.html Sample code:https://github.com/buckyroberts/React-Bo…

官方手册 https://docs.saltstack.com/en/pdf/Salt-2019.2.1.pdf 快速入门 SALTSTACK是什么? Salt是一种和以往不同的基础设施管理方法,它是建立在大规模系统高速通讯能力可以大幅提升的想法上.这种方法使得Salt成为一个强大的能够解决基础设施中许多特定问题的多任务系统.远程执行引擎是Salt的核心,它能够为多组系统创建高速.安全的双向通讯网络.基于这个通许系统,Salt提供了一个非常快速.灵活并且容易使用的配置管理系统,称之为“Salt…

Angular中保存了很多的判断方法,可以用来验证对象是否符合某种要求,详细的参考代码样例即可 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"…

paip.最好的脚本语言node js 环境搭建连接mysql #====下载node...走十一个exe..容易的.. 1 #0----Hello world   .js 2 #---------模块的建立而且使用.. 2 1. ##--调用 (载入文件模块---普通文件模块 3 2. ) 3 3. ##---载入内置模块 3 4. ##----三.载入文件目录模块 3 5. ##--四.载入node_modules里的模块 4 ----第三方模块的下载跟安装 4 #---------调用my…

NGUI教程:步骤1-Scene 1.创建一个新的场景(New Scene).2.选择并删除场景里的MainCamera.3.在NGUI菜单下选择Create a New UI,会打开UI创建向导.     4.在创建向导中你能更改UI的基本参数.现在我们选Default layer,点击Create Your UI 按钮.5.就这样,你的UI便创建好了.   注意: 如果在一个已存在NGUI的项目中你要跳过第二步,并且你要选择一个不同的UI层,你还要确保非GUI相机不渲染UI层. 在做具体UI…