angular

生成一个新的项目 --routing会为我们生成路由相关的模块 路由相关的对象： routes 路由的配置，保存了哪个url对应展示哪个对象，以及在哪个 routerOutlet 中展示。 routeOutlet 占位符指令，在html中标记路由呈现的位置。 router 负责在运行时执行路由的对象。 navigate() navigateByUrl() 通过这两个方法来导航到一个指定的路由 routerLink 指令，用于在html中声名路由导航，可以传递参数，参数是一个数组类型。 ActivatedRoute 当前激活的路由对象 保存着路由信息，如地址，参数等 路由参数传递： 1.在查询参数中传递 queryParams 效果 http://localhost:4200/?id=3 在对应的组件中接收，这里借助的是 ActivatedRoute 对象来获取参数 2.在url中传递参数 修改 app-routing.module.ts 中的path配置，使其可以携带参数，并修改productComponent的routerLink 效果 http://localhost:4200/product/1 接收参数，只需要把上面第一种方式的queryParams替换为params就可以了 3.事件绑定传递数据 定义我们绑定的方法 在对应的组件中接收 4.小问题补充 snapshot 参数快照 subscribe 参数订阅 路由重定向 用户房顶一个特定的地址是，将其重定向到另一个地址。比如你打开 www.didi.com 结果打开了 www.google.com 这一段的意思是，当我访问空路径时，当前路由重定向到home上，比较简单的内容。 子路由 路由的children属性添加 然后需要在ProductCompont.html中添加配置 routerLint 以及 router-outlet 这样我们就实现了子路由，同样我们仍然可以传递参数，接收方式与之前一致，从本质上来讲，子路由就是组件之间的 router-outlet形成的父子关系 。 辅助路由 辅助路由 1.router-outlet name="xxxx" 2.outlet:"xxxx" 3.{outlets:{xxxx:"yyy"}} 本质就是一个路由允许定义多个 router-outlet 1.app组件中重新定义一个router-outlet 2.单独开发一个组件 2.通过路由配置控制 增加两个链接，注意 outlets 不是 outlet 点击开始聊天,浏览器显示结果： http://localhost:4200/home(aux:chat) 补充，如果我们想不管我们在哪里，都希望主路由是home,可以这样更改，添加 primary:"home" 路由守卫 需求：只有当用户登录获取某些权限时候才能够进入某些路由 或者 当用户未执行保存操作而试图离开当前导航时提醒用户。 CanActivate 处理导航到某路由的情况 CanDeactivate 处理从当前路由离开的情况 Resolve 处理在激活路由之前获取路由数据，这样在进入路由后数据展示会更快 创建文件，模拟登陆逻辑和离开的逻辑 login.guard.ts unsave.guard.ts 这里需要将需要守卫的路由作为泛型传递过去 接下来，去改写路由的配置 app-routing.modules.ts 我们只针对product做操作 注意不要忘了 然后就可以愉快的玩耍了。。。

在路由中传参有3种方法：1.routerLink单一参数：在<a routerLink=["/exampledetail",id]></a>中加routerLink进行跳转，其中/exampledetail是我设置的路由path，id是需要传递的参数。多个参数：如果要传多个参数，则可以写成routerLink=["/exampledetail",{queryParams:object}] ,queryParams携带多个参数，这个参数的格式可以是自行组织的object，也可以分开多个参数写成routerLink=["/exampledetail",{queryParams:"id":"1","name":"yxman"}];。2.router.navigate单一参数：this.router.navigate(["/exampledetail",id]); ，多用在调用方法里多个参数：this.router.navigate(["/exampledetail"],{queryParams:{"name":"yxman"}});3.router.navigateByUrl单一参数：this.router.navigateByUrl("/exampledetail/id");多个参数：this.router.navigateByUrl("/exampledetail",{queryParams:{"name":"yxman"}});传参方传参之后，接收方2种接收方式如下：1.snapshotimport { ActivateRoute } from "@angular/router";public data: any;constructor( public route: ActivateRoute ) { };ngOnInit(){this.data = this.route.snapshot.params["id"];};2.queryParamsimport { ActivateRoute } from "@angular/router";public data: any;constructor( public activeRoute:ActivateRoute ) { };ngOnInit(){this.activeRoute.queryParams.subscribe(params => {this.data = params["name"];});};

tbody语言标签表格主体。使用tbody标签，可以将表格中的好几个单独的部分定义成一个部分，tbody标签可将表格中的一行或几行合成一组，当所要定义的angular表格没有任何数据的时候，tbody标签也不会呈现任何东西，成为空白。

将library search paths里两个条目的顺序调整一下，这点很重要！！！

Angular 1 使用双向绑定，Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。指令与组件在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。性能Vue 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。在 Angular 1 中，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次。Angular 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系。

<div id="app"><input type="text" v-model="item.name" /><input type="checkbox" v-model="item.check" /><input type="date" v-model="item.date" /><iframe ref="iframe" src="child.html" @load="load"></iframe></div><script src="http://cdn.bootcss.com/vue/2.1.8/vue.min.js"></script><script>window.app = new Vue({el: "#app",data() {return {item: {name: null,check: false,date: null,},}},methods: {load: function (item) {const app = this.$refs.iframe.contentWindow.app;if (app && app.setContent) {app.setContent(this.item)}else {window._item = this.item}}}})</script>

下面小编就为大家分享一篇Angular自定义组件实现数据双向数据绑定的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧学过Angular的同学都知道，输入框通过[(ngModel)]实现双向数据绑定，那么自定义组件能不能实现双向数据绑定呢？答案是肯定的。Angular中，我们常常需要通过方括号[]和圆括号()实现组件间的交互：那么在[]和()的基础上，如何实现组件的双向数据绑定？ 例子如下。子组件：<!--testDataBinding.component.html--><h1>childStatus: {{childStatus}}</h1>//testDataBinding.component.tsexport class TestDataBindingComponent implements OnInit{ @Input() childStatus; @Output() childStatusChange = new EventEmitter(); ngOnInit(){ setTimeout(()=>{ this.childStatus = false; this.childStatusChange.emit(this.childStatus); },5000); }}注意这里的写法，这是关键所在，输出属性前半部分必须与输入属性相同，输入属性可以随意取名，输出属性需在输入属性基础上加上Change，比如你的输入属性是myData，那么输出属性就必须是myDataChange。父组件：<!--app.component.html--><test-binding [(childStatus)]="parentStatus"></test-binding><h1>parentStatus: {{parentStatus}}</h1>//app.component.tsimport { Component,OnInit } from "@angular/core";@Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"]})export class AppComponent implements OnInit{ parentStatus: boolean = true; ngOnInit(){ setTimeout(()=>{ this.parentStatus = true; },10000); }}在父组件我们初始化parentStatus为true，并把它传到子组件TestDataBindingComponent。在子组件里，5秒后我们把childStatus设为false，看它能不能传到父组件。再过5秒，我们在父组件将parentStatus设为true，看它能不能传到子组件。事实证明，子组件值变化后，父组件的值也跟着变化；父组件值变化后子组件的值也跟着变了！我们实现了双向绑定！上面是我整理给大家的，希望今后会对大家有帮助。相关文章：在angularjs中如何实现柱状图动态加载在Angular作用域中scope的如何使用使用react如何实现菜单权限控制详细解读vue.js中props如何传递参数

本篇文章主要介绍了浅谈AngularJs 双向绑定原理(数据绑定机制)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧那么什么是双向绑定，下面简单进行讲解。首先我们要理解数据绑定。我们看到的网站页面中，是由数据和设计两部分组合而成。将设计转换成浏览器能理解的语言，便是html和css主要做的工作。而将数据显示在页面上，并且有一定的交互效果（比如点击等用户操作及对应的页面反应）则是js主要完成的工作。很多时候我们不可能每次更新数据便刷新页面（get请求），而是通过向后端请求相关数据，并通过无刷新加载的方式进行更新页面（post请求）。那么数据进行更新后，页面上相应的位置也能自动做出对应的修改，便是数据绑定。在以前的开发模式中，这一步一般通过jq操作DOM结构，从而进行更新页面。但这样带来的是大量的代码和大量的操作。如果能在开始的时候，便已经确定好从后端获取的数据到页面上需要进行的操作，当数据发生改变，页面的相关内容也自动发生变化，这样便能极大地方便前端工程师的开发。在新的框架中（angualr，react，vue等）,通过对数据的监视，发现变化便根据已经写好的规则进行修改页面，便实现了数据绑定。可以看出，数据绑定是M(model，数据）通过VM（model-view，数据与页面之间的变换规则）向V（view）的一个修改。而双向绑定则是增加了一条反向的路。在用户操作页面（比如在Input中输入值）的时候，数据能及时发生变化，并且根据数据的变化，页面的另一处也做出对应的修改。有一个常见的例子就是淘宝中的购物车，在商品数量发生变化的时候，商品价格也能及时变化。这样便实现了V——M——VM——V的一个双向绑定。AngularJs 为 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view(html) 上时 AngularJs 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发。$digest 会遍历所有的 $watch。从而更新DOM。$watch这有点类似于我们的观察者模式，在当前作用域$scope下，我们创建一个监控器$watchers和一个监听器$watch，$watchers 负责管理所有的 $watch，当我们每次绑定到UI上的时候就<font color=red>自动</font>创建一个$watch，并把它放到 $watchers。controller.jsapp.controller("MainCtrl", function($scope) { $scope.Hello = "Hello"; $scope.world = "World";});index.html<p>{{Hello}}</p>这里，即便我们在$scope上添加了两个变量，<font color=red>但是只有一个绑定在了UI上，因此在这里只生成了一个$watch</font>$digest当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发。$digest将会遍历我们的$watch，如果$watch没有变化，这个循环检测就将停止，如果有至少一个更新过，这个循环就会再次触发，直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。这就是脏检查(Dirty Checking)机制controller.jsapp.controller("MainCtrl", function() { $scope.name = "Foo"; $scope.changeFoo = function() { $scope.name = "Bar"; }});index.js<p>{{ name }}</p><button ng-click="changeFoo()">Change the name</button>当我们按下按钮浏览器接收到一个事件，进入angular context。$digest循环开始执行，查询每个$watch是否变化。由于监视$scope.name的$watch报告了变化，它会强制再执行一次$digest循环。新的$digest循环没有检测到变化。更新与$scope.name新值相应部分的DOM。$apply$apply 我们可以直接理解为刷新UI。<font color=red>如果当事件触发时，你调用$apply，它会进入angular context，如果没有调用就不会进入，之后的$digest检测机制就不会触发</font>app.directive("clickable", function() { return { restrict: "E", scope: { foo: "=" }, template: "<ul style="background-color: lightblue"><li>{{foo}}</li></ul>", link: function(scope, element, attrs) { element.bind("click", function() { scope.foo++; console.log(scope.foo); }); } }});当我们调用clickable指令的时候，我们可以看到foo的值增加了，但是界面上显示的内容并没有改变。$digest脏检测机制没有触发，检测foo的$watch就没有执行。$apply()方法的两种形式1) 无参$scope.$apply();element.bind("click", function() { scope.foo++; //if error scope.$apply();});当我们使用这种形式的时候，如果在scope.$apply之前程序发生异常，那scope.$apply没有执行，界面就不会更新2) 有参$scope.$apply(function(){ ...})element.bind("click", function() { scope.$apply(function() { scope.foo++; });})如果用这种形式，即使后面的发生异常，数据还是会更新。在 AngularJS 中使用 $watch常用的使用方式：$scope.name = "Hello";$scope.$watch("name", function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++;});传入到$watch()中的第二个参数是一个回调函数，该函数在name的值发生变化的时候会被调用。如果要监听的是一个对象，那还需要第三个参数：$scope.data.name = "Hello";$scope.$watch("data", function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++;}, true);表示比较的是对象的值而不是引用，如果不加第三个参数true，在 data.name 变化时，不会触发相应操作，因为引用的是同一引用。总结1) 只有在$scope变量绑定到页面上，才会创建 $watch2) $apply决定事件是否可以进入angular context3) $digest 循环检查model时最少两次，最多10次(多于10次抛出异常，防止无限检查)4) AngularJs自带的指令已经实现了$apply，所以不需要我们额外的编写5) 在自定义指令时，建议使用带function参数的$apply上面是我整理给大家的，希望今后会对大家有帮助。相关文章：在javaScript中如何使用手机号码校验工具类PhoneUtils在微信小程序中如何实现下载进度条在微信小程序中如何使用video组件播放视频在微信小程序中如何使用audio组件在微信小程序中有关功能函数总结（详细教程）

这篇文章主要介绍了Angularjs中使用轮播图指令swiper的相关知识，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下我们在angualrjs移动开发中遇到轮播图的功能安装 swiper npm install --save swiper 或者 bower install --save swiper引入文件路径指令中的编写方式data 绑定接口返回的轮播列表 vm.home.headImgs对应轮播图返回的数据列表

这次给大家带来怎样使用AngularJS实现base64编码与解码，使用AngularJS实现base64编码与解码的注意事项有哪些，下面就是实战案例，一起来看一下。<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>base64加密</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; // public method for encoding this.encode = function (input) { var output = ""; var chr1, chr2, chr3, enc1, enc2, enc3, enc4; var i = 0; input = _utf8_encode(input); while (i < input.length) { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + _keyStr.charAt(enc3) + _keyStr.charAt(enc4); } return output; } // public method for decoding this.decode = function (input) { var output = ""; var chr1, chr2, chr3; var enc1, enc2, enc3, enc4; var i = 0; input = input.replace(/[^A-Za-z0-9+/=]/g, ""); while (i < input.length) { enc1 = _keyStr.indexOf(input.charAt(i++)); enc2 = _keyStr.indexOf(input.charAt(i++)); enc3 = _keyStr.indexOf(input.charAt(i++)); enc4 = _keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } } output = _utf8_decode(output); return output; } // private method for UTF-8 encoding _utf8_encode = function (string) { string = string.replace(/ /g, " "); var utftext = ""; for (var n = 0; n < string.length; n++) { var c = string.charCodeAt(n); if (c < 128) { utftext += String.fromCharCode(c); } else if ((c > 127) && (c < 2048)) { utftext += String.fromCharCode((c >> 6) | 192); utftext += String.fromCharCode((c & 63) | 128); } else { utftext += String.fromCharCode((c >> 12) | 224); utftext += String.fromCharCode(((c >> 6) & 63) | 128); utftext += String.fromCharCode((c & 63) | 128); } } return utftext; } // private method for UTF-8 decoding _utf8_decode = function (utftext) { var string = ""; var i = 0; var c = c1 = c2 = 0; while (i < utftext.length) { c = utftext.charCodeAt(i); if (c < 128) { string += String.fromCharCode(c); i++; } else if ((c > 191) && (c < 224)) { c2 = utftext.charCodeAt(i + 1); string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); i += 2; } else { c2 = utftext.charCodeAt(i + 1); c3 = utftext.charCodeAt(i + 2); string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); i += 3; } } return string; } } </script></head><body><p id="p1">PHAgc3R5bGU9ImxpbmUtaGVpZ2h0OiAyZW07Ij48c3BhbiBzdHlsZT0iZm9udC1zaXplOiAxNnB4OyBmb250LWZhbWlseTog5b6u6L2v6ZuF6buRLCAnTWljcm9zb2Z0IFlhSGVpJzsiPu+7vzxpbWcgc3JjPSJodHRwOi8vd3d3LmpiNTEubmV0L2ltYWdlcy9sb2dvLmdpZiIgdGl0bGU9ImxvZ28uZ2lmIi8+PC9zcGFuPjwvcD48cCBzdHlsZT0idGV4dC1pbmRlbnQ6IDJlbTsgbGluZS1oZWlnaHQ6IDJlbTsiPjxzcGFuIHN0eWxlPSJmb250LXNpemU6IDE2cHg7IGZvbnQtZmFtaWx5OiDlvq7ova/pm4Xpu5EsICdNaWNyb3NvZnQgWWFIZWknOyI+5qyi6L+O6K6/6Zeu6ISa5pys5LmL5a62PC9zcGFuPjwvcD48cCBzdHlsZT0ibWFyZ2luLXRvcDogMHB4OyBtYXJnaW4tYm90dG9tOiAwcHg7IHBhZGRpbmc6IDBweDsgdGV4dC1pbmRlbnQ6IDJlbTsgY29sb3I6IHJnYigzNCwgMzQsIDM0KTsgZm9udC1mYW1pbHk6ICdNaWNyb3NvZnQgWWFIZWknLCDlvq7ova/pm4Xpu5E7IGZvbnQtc2l6ZTogMTRweDsgd2hpdGUtc3BhY2U6IG5vcm1hbDsgbGluZS1oZWlnaHQ6IDJlbTsiPjxzcGFuIHN0eWxlPSJmb250LXNpemU6IDE2cHg7IGZvbnQtZmFtaWx5OiDlvq7ova/pm4Xpu5EsICdNaWNyb3NvZnQgWWFIZWknOyI+6ISa5pys5LmL5a625piv5Zu95YaF5LiT5Lia55qE572R56uZ5bu66K6+6LWE5rqQ44CB6ISa5pys57yW56iL5a2m5Lmg57G7572R56uZ77yM5o+Q5L6bYXNw44CBcGhw44CBYXNwLm5ldOOAgWphdmFzY3JpcHTjgIFqcXVlcnnjgIF2YnNjcmlwdOOAgWRvc+aJueWkhOeQhuOAgee9kemhteWItuS9nOOAgee9kee7nOe8lueoi+OAgee9keermeW7uuiuvuetiee8lueoi+i1hOaWmeOAgjwvc3Bhbj48L3A+PHAgc3R5bGU9Im1hcmdpbi10b3A6IDBweDsgbWFyZ2luLWJvdHRvbTogMHB4OyBwYWRkaW5nOiAwcHg7IHRleHQtaW5kZW50OiAyZW07IGNvbG9yOiByZ2IoMzQsIDM0LCAzNCk7IGZvbnQtZmFtaWx5OiAnTWljcm9zb2Z0IFlhSGVpJywg5b6u6L2v6ZuF6buROyBmb250LXNpemU6IDE0cHg7IHdoaXRlLXNwYWNlOiBub3JtYWw7IGxpbmUtaGVpZ2h0OiAyZW07Ij48c3BhbiBzdHlsZT0iZm9udC1zaXplOiAxNnB4OyBmb250LWZhbWlseTog5b6u6L2v6ZuF6buRLCAnTWljcm9zb2Z0IFlhSGVpJzsiPui/memHjOi/mOaPkOS+m+Wkp+mHj+eahOa6kOeggeOAgeeUteWtkOS5puS4i+i9ve+8jOS7peWPiuWQhOenjeW4uOingeeahOWunueUqOWcqOe6v+W3peWFtzwvc3Bhbj48L3A+</p><script> var b = new Base64(); str = document.getElementById("p1").innerHTML; //解密 str = b.decode(str); document.getElementById("p1").innerHTML = str;</script></body></html>相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：在不使用select的情况下vue怎么实现下拉框功能webpack-dev-server配置与使用步奏详解

这次给大家带来怎样对Angular4+router进行使用，对Angular4+router进行使用的注意事项有哪些，下面就是实战案例，一起来看一下。router，也就是路由，是前端中一个比较重要的概念。通过router把特定的地址和对应的页面关联后分离出来，以达到解耦的目的。在src/app目录下新建一个detail的文件夹，建立一个名为gundam-detail.component的文件。import { Component } from "@angular/core";import { Gundam } from "../../model/gundam";@Component({ template: ` <p *ngIf="selectedGundam"> <span>{{selectedGundam.name}}</span> <span>{{selectedGundam.type}}</span> </p> `})export class GundamDetailComponent { selectedGundam: Gundam;}ps：有关命名，基本上是采用xxx+“-”+“业务类型”+“组件类型”的命名方式，至少官方文档上是这么推荐的。当然给组件起名叫猪头三也可以，但是标准的命名可以增加组件的可读性。即便是不介意随意起名坑后来的维护者，谁也不能确定很长时间以后自己不会再对同一段代码进行重构。所以，做人还是要厚道。不写注释也就算了，起名还是规范一点好。ps2：有关分包的方式，有的人喜欢把view放一起、controller放一起，再根据逻辑进一步细分；也有人是倒过来，先分逻辑再分view和controller。这个好像没有什么统一的定论，我个人是喜欢后一种，所以本项目采用后一种分法。目前文件里没什么东西，只是简单的把app.component.ts里的temple给搬过来而已。先明确需求，再开始写router。需求：点击gundam列表页面中的任意item，可以跳转到该gundam的详情页。作为angular的组件，希望在页面中使用router，必须先在app.module.ts里声明。ps：之前的业务和app.module.ts没什么关系，但这并不是说它不重要。app.module.ts相当于android的mainifist文件，对整个项目进行统筹管理。打开app.module.ts：imports：在组件页面里用到基础类。declarations：现有custom组件声明。bootstrap：可以理解为Android的main launch，项目启动时从那个组件进入。需要使用router前先引入：import { RouterModule } from "@angular/router";因为要调用RouterModule的forRoot方法，RouterModule.forRoot 又是项目中用到的基础类，所以需要写在imports里。 imports: [ BrowserModule, FormsModule, RouterModule.forRoot() ],RouterModule.forRoot 接受两个参数，第一个是route数组来表明跳转，第二个参数常年忽略，我也不知道有什么用。route类包括2个比较关键的属性：path和component，通过访问path，可以找到唯一的component。在forRoot里添加上包含主页和详情页2个component的route数组。RouterModule.forRoot([ { path: "", component: AppComponent }, { path: "", component: GundamDetailComponent }])app.module.ts现在看起来是这样的：import {NgModule} from "@angular/core";import {BrowserModule} from "@angular/platform-browser";import {FormsModule} from "@angular/forms";import { RouterModule } from "@angular/router";import {AppComponent} from "./component/appcomponent/app.component";import { GundamDetailComponent } from "./component/detail/gundam-detail.component";@NgModule({ imports: [ BrowserModule, FormsModule, RouterModule.forRoot([ { path: "", component: AppComponent }, { path: "", component: GundamDetailComponent } ]) ], declarations: [ AppComponent, GundamDetailComponent ], bootstrap: [AppComponent],})export class AppModule {}2个path都还空着，因为还少一个关键的东西，就算写上也会报错：Error: Cannot find primary outlet to load ‘AppComponent"在angular里，router是要搭配标签router-outlet来使用的，换句话说router决定显示哪个组件，而由router-outlet决定显示在哪里。在app.component.ts里的template加上标签<router-outlet></router-outlet>然后不出意外的显示了2个主页:app.component.ts是一个组件也是一个页面，angular先从bootstrap里进入了app.component.ts渲染了界面（也就是router-outlet上面的部分）。碰到又去找router，发现对应的router也有组件，于是又加载了一遍。所以为了正常显示，也要把主页也单独抽出来。所有组件通过app.component.ts里的来进行加载。而app.component.ts作为整个demo的最外层容器可以进行一些公共的操作（典型：后退动作）。在src下新建host包，新建gundam-host.component.ts文件。 基本上可以把整个app挪过来，删除掉out标签，删掉selector(暂时用不到)。import {Component} from "@angular/core";import { Gundam } from "../../model/gundam";import { GUNDAMS } from "./../../service/data";@Component({ template: ` <p *ngFor="let gundam of gundams" (click)="onSelected(gundam)"> <span> {{gundam.name}} </span> </p> `})export class GundamHostComponent { gundam: Gundam = { name: "海牛", type: "NewType" }; gundams = GUNDAMS; selectedGundam: Gundam; // 定义一个selectedGudam作为展示详情的变量 onSelected (gundam: Gundam): void { this.selectedGundam = gundam; // 通过参数赋值 }}app.component.ts只保留标签，其他一概去掉。修改app.module.ts文件，导入gundam-host.component.ts并把GundamHostComponent 增加到组件声明declarations里。修改route里的path所指向的component，默认进入后显示主页组件：beforeafterpath的值为”(空字符串)的表示不需要增加子路径。修改详情页的路径:{ path: "detail", component: GundamDetailComponent}在主页里增加跳转连接:点击跳转(路径已改变)现在点击主页的高达列表的item后，可以跳转到一个空白的详情页。之所以是空白，是因为详情页的值是需要由主页进行传递的。现在主页详情页分家以后，需要通过路由来进行值传递。传值的方法有很多种，甚至可以传的值也有很多种。 目前我先用最笨的方法：将gundam类转化为一个字符串，将字符串传递到详情页面后再转化为gundam类。在app.component.ts文件的class里添加函数：parseGundamToString(gundam: Gundam): string { return gundam.name + "&" + gundam.type;} // 将gundam类转化为固定格式的字符串修改app.component.ts文件的template，访问gundam路径时转化传递转化过的gundam字符串<p *ngFor="let gundam of gundams" routerLink="/detail/name=parseGundamToString(gundam)"> <span> {{gundam.name}} </span></p>修改详情页的path{ path: "detail/:gundam", component: GundamDetailComponent}/:gundam 是一个占位符，又是参数说明。表示传递过来的参数属性是gundam。这样在detail文件中，就可以从url的连接中拿到传递过来的高达字符串。获得这个字符串的时机，应该是在在detail页面初始化的时候。Angular提供了所谓的的“钩子”(hook)，用来标示component的活动周期—其实也就是是类似于Android里onStart或者onCreate一样的方法。在gundam-detail.component.ts的中添加OnInit钩子,或者说接口：import { Component, OnInit } from "@angular/core";在class后面加implements关键词和OnInit来实现该接口：export class GundamDetailComponent implements OnInit { selectedGundam: Gundam ; ngOnInit(): void { }}剩下的事情，就是读取连接上传来的参数就可以了。读取连接上传递的参数还是要用到router里的几个类，所以需要在detail里导入。import { ActivatedRoute, Params } from "@angular/router";导入完成后，通过在构造器里注入的方式进行调用：（有关注入，现在暂时没有说到）constructor(private route: ActivatedRoute){}angular会自动创建ActivatedRoute的实例。先在ngOnInit里输出看看params是什么this.route.params.switchMap((params: Params) => console.log(params))ps：switchMap是angular官方给的拿取url参数的方法，也是需要预先导入才可以使用：import "rxjs/add/operator/switchMap";ps2: 有关箭头函数(params: Params) => this.gundamStr = params["gundam"]是一个箭头函数,等同于function(params){ this.gundamStr = params["gundam"]}其中params是switchMap的返回值，返回的即是通过路由连接传递过来的参数所在的类。ps3: 箭头函数真的是整个ES6里最恶心的东西，之一。控制台中 输出：传递过来的参数，是一个gundam类格式化输出的字符串，所以还要在detail里补充一个反格式化字符串到gundam类的函数。parseStringToGundam(str: string): Gundam { const temp = str.split("&"); const tempGundam: Gundam = { name: temp[0], type: temp[1] }; return tempGundam;}最终,获得detail的初始化是这个样子的ngOnInit(): void { this.route.params // 通过注入的方式拿到route里的参数params .switchMap((params: Params) => this.gundamStr = params["gundam"]) // 通过参数拿到gundam字符串并付给detail里的一个临时变量 .subscribe(() => this.selectedGundam = this.parseStringToGundam(this.gundamStr)); // 通过反格式化函数解析临时变量并返回给作为显示的model}移动web页面间传值确实没有什么太好的方法，angular和react都是如此。以前我们的做法是短的参数直接挂连接传走，长的大的或者object的参数就先保存本地，然后第二个页面再从本地读取。但是像android那样扔一个intent里直接就过去了的方式，确实没有。回首页：点击一个列表：包结构：总的来说，业务被分开了，结构干净多了。虽然现在还体现不出来，但是写到后来就觉得心花怒放，磨刀不误砍柴工功啊。作为router，也可以分离的。目前我的项目里只有2个页面，如果多起来-比如20来个，那么app.module.ts又会变的乱七八糟。所以要把router也给扔出去。新建一个文件app-routing.module.ts，然后把footRoot平移过来(带上引用)。在app-routing.module.ts文件里，也需要ngModul。个人理解ngModul就相当于一个基类指示器，导出class后以便被其他类引用。import {NgModule} from "@angular/core";import { RouterModule } from "@angular/router";import { GundamDetailComponent } from "./component/detail/gundam-detail.component";import { GundamHostComponent } from "./component/host/gundam-host.component";@NgModule({ imports: [ RouterModule.forRoot([ { path: "", component: GundamHostComponent }, { path: "detail/:id", component: GundamDetailComponent } ]) ], exports: [RouterModule]})export class AppRoutingModule {}然后既然已经有了这个类，可以导入到app.module.ts里使用使得整个文件看起来清爽一些。import {NgModule} from "@angular/core";import {BrowserModule} from "@angular/platform-browser";import {FormsModule} from "@angular/forms";import {AppComponent} from "./component/appcomponent/app.component";import { GundamDetailComponent } from "./component/detail/gundam-detail.component";import { GundamHostComponent } from "./component/host/gundam-host.component";import { AppRoutingModule } from "./app-routing.module";@NgModule({ imports: [ BrowserModule, FormsModule, AppRoutingModule // 调用路由 ], declarations: [ AppComponent, GundamDetailComponent, GundamHostComponent ], bootstrap: [AppComponent],})export class AppModule {}当然，官方文档又进行了进一步简化。既然forRoot是一个Route数组，那么数组也可以单独抽出来，当然进一步抽取也可以放到另一个文件里。import {NgModule} from "@angular/core";import { RouterModule, Route } from "@angular/router";import { GundamDetailComponent } from "./component/detail/gundam-detail.component";import { GundamHostComponent } from "./component/host/gundam-host.component";const routes: Route[] = [ { path: "", component: GundamHostComponent }, { path: "detail/:gundam", component: GundamDetailComponent }];@NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [RouterModule]})export class AppRoutingModule {}我个人比较偷懒，就先抽取到这一步。现在连主页面和详情页面都被分开了，项目的耦合度又进一步降低。相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：Postman模拟发送token如何在项目中使用js中存储键值

这篇文章主要介绍了Angular实现的table表格排序功能,结合完整实例形式分析了AngularJS表格排序所涉及的事件响应、元素遍历、属性修改等相关操作技巧,需要的朋友可以参考下本文实例讲述了Angular实现的table表格排序功能。分享给大家供大家参考，具体如下：先来看看效果图：完整代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>www.gxlcms.com Angular表格排序</title> <style> table{ border: 1px solid; text-align: center; width: 40%; height: 400px; } tr,td{ border: 1px solid; } tr:nth-child(2n){ background: gainsboro; } </style> <script type="text/javascript" src="js/angular.min.js" ></script> <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script> <script> var app=angular.module("MyApp",[]); app.controller("demoC",["$scope",function($scope){ $scope.shop=[{ state1:false,id:9001,name:"iphoneX",username:"张三",tel:13525565588,price:8699,city:"北京",time:new Date("11-23 10:00:00"),state:"已发货"}, {state1:false,id:3007,name:"iphone6",username:"王红",tel:18524565588,price:5635,city:"郑州",time:new Date("11-23 11:38:20"),state:"已发货"}, {state1:false,id:5312,name:"iphone7",username:"赵小龙",tel:17545585598,price:6180,city:"北京",time:new Date("11-23 9:17:00"),state:"未发货"}, {state1:false,id:2132,name:"iphone8",username:"赵强",tel:17625565618,price:7190,city:"上海",time:new Date("11-23 10:40:00"),state:"未发货"} ]; $scope.ckAll=function(){ for(var i in $scope.shop){ $scope.shop[i].state1=$scope.ckall; } } $scope.del=function(){ for(var i=0; i<$scope.shop.length; i++){ if($scope.shop[i].state=="已发货"&&$scope.shop[i].state){ $scope.shop.splice(i,1); i--; } } } $scope.add=function(){ var sname=$scope.sname; var susername=$scope.susername; var stel=$scope.stel; var sprice=$scope.sprice; var scity=$scope.scity; if(sname==undefined || sname==""){ alert("用户名不能为空"); $("#s").css("border-color","red"); }else if(susername==undefined || susername==""){ alert("商品名不能为空"); $("#y").css("border-color","red"); }else if(stel==undefined || stel==""){ alert("手机号不能为空"); $("#t").css("border-color","red"); }else if(sprice==undefined || sprice==""){ alert("价格不能为空"); $("#p").css("border-color","red"); }else if(scity==undefined || scity==""){ alert("城市必须选择"); } else{ $scope.shop.push({name:sname,username:susername,tel:stel,price:sprice,city:scity}) $scope.toto=false; } } }]) </script> </head> <body ng-app="MyApp" ng-controller="demoC"> <button ng-click="toto=true" style="background-color: greenyellow;">新增订单</button> <button ng-click="del()" style="background-color: greenyellow;">批量删除</button> <input type="text" placeholder="按商品名称查询" ng-model="selname" /> <input type="text" placeholder="按手机号查询" ng-model="seltel"/> <select ng-model="selstate"> <option value="">按状态查询</option> <option value="已发货">已发货</option> <option value="未发货">未发货</option> </select> <table cellpadding="0px" cellspacing="0px"> <tr style="background-color: gray;"> <td><input type="checkbox" ng-model="ckall" ng-click="ckAll()"></td> <td>id<button ng-click="px="id";flag=!flag" style="background-color: greenyellow;">排序</button></td> <td>商品名</td> <td>用户名</td> <td>手机号</td> <td>价格<button ng-click="px="price";flag=!flag" style="background-color: greenyellow;">排序</button></td> <td>城市</td> <td>下单时间<button ng-click="px="time";flag=!flag" style="background-color: greenyellow;">排序</button></td> <td>状态</td> </tr> <tr ng-repeat="s in shop | filter:{name:selname} | filter:{tel:seltel} | filter:{state:selstate} | orderBy:px:flag "> <td><input type="checkbox" ng-model="s.state1"></td> <td>{{s.id}}</td> <td>{{s.name}}</td> <td>{{s.username}}</td> <td>{{s.tel}}</td> <td>{{s.price | currency:"￥"}}</td> <td>{{s.city}}</td> <td>{{s.time | date : "MM-HH hh:dd:ss"}}</td> <td><span ng-show="s.state=="已发货"" style="color: greenyellow;">{{s.state}}</span> <span ng-show="s.state=="未发货"" style="color: yellow;"><a href="#" rel="external nofollow" ng-click="s.state="已发货"">{{s.state}}</a></span></td> </tr> </table> <p style="margin-top: 50px; margin-left: 100px;"> <form ng-show="toto"> 商品名：<input type="text" / ng-model="sname" id="s"><br /><br /> 用户名：<input type="text" ng-model="susername"id="y"/><br /><br /> 手机号：<input type="text" ng-model="stel" id="t"/><br /><br /> 价格为：<input type="text" ng-model="sprice" id="p"/><br /><br /> 城市：<select ng-model="scity"> <option value="">--选择城市--</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="郑州">郑州</option> </select><br /><br /> <button ng-click="add()">保存</button> </form> </p> </body></html>上面是我整理给大家的，希望今后会对大家有帮助。相关文章：在vue中常用组件和框架结构（详细教程）在fastclick代码中如何解决tap“点透”在anime.js中如何实现动画效果的复选框在Parcel.js + Vue 2.x中如何做到极速零配置打包使用Vue时浏览器后退无法触发beforeRouteLeave的问题在vue + element中如何实现表格分页在微信小程序中如何实现录音与播放录音功能Nuxt.js框架（详细教程）在JS+CSS中如何实现滚动数字时钟

本篇文章主要介绍了angularjs实现时间轴效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧一 引入包引入angular-timeline包。下载地址：angular-timeline.zip在index.html中引入<link href="lib/angular-timeline/dist/angular-timeline.css" rel="external nofollow" rel="stylesheet"><script src="lib/angular-timeline/dist/angular-timeline.js"></script>app.js中引用，不引用就没有效果。二 改写css根据需求改写css,核心部分的改写。可以写在style.css中，也可以新建一个css文件，但是一定要在index.html中引用。/* 时间轴 */.timeline-event { margin-bottom: 0px !important;}timeline-badge.infos { background-color: #47d09e !important;}.timeline:before { width: 1px !important; left: 24px !important; margin-top: 30px !important; background-color: #47d09e !important;}timeline-badge { left: 16px !important; width: 15px !important; height: 15px !important; top: 15px !important; box-shadow: none !important;}timeline-panel { float: left !important; width: 85% !important; padding: 13px 0px 6px 0px !important; margin-left: 39px !important; background: none !important; border: none !important; box-shadow: none !important;}timeline-panel:before { visibility: hidden !important;}timeline-panel:after { visibility: hidden !important; display: none !important;}timeline-panel .time { font-size: 14px; font-family: "PingFangSC-Regular";}timeline-panel .detail { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; margin-top: 10px;}timeline-panel .detail .linename { font-size: 16px; max-width: 80%; color: #1c1c1c; display: inline-block; font-family: "PingFangSC-Medium";}timeline-panel .detail .linelevel { position: absolute; right: 18%; border-radius: 4px; color: white; padding: 1px 5px 1px 5px; font-size: 11px;}timeline-panel .detail .linelevel-g { background-color: #f27373;}timeline-panel .detail .linelevel-p { background-color: #e29431;}timeline-panel .detail .linenum { float: right; font-size: 14px; color: #323232;}三 页面准备工作做完了，下面是页面的编写。<!--html页面--><ion-view view-title="{{title}}"> <ion-content scroll="true"> <timeline> <timeline-event ng-repeat="event in teamDataList" side="right"> <timeline-badge class="infos"> </timeline-badge> <timeline-panel class="infos"> <span class="time"> {{event.hour}} </span> <p class="detail" ng-repeat="item in event.data"> <span class="linename">{{item.customerName}}</span> <p style="float: right;"> <span class="linenum"> {{item.reserveNumber}}人 </span> </p> </p> </timeline-panel> </timeline-event> </timeline> </ion-content></ion-view>//controllerangular.module("studyApp.controllers") .controller("TimeLineCtrl", function ($scope, $rootScope, $location) { $scope.title = "时间轴"; makeData(); function makeData() { $scope.teamDataList=[ { hour:"12:00", data:[ { customerName:"中国国旅（江苏）国际旅行社有限公司", reserveNumber:"12", id:"aaaabbb12112" }, { customerName:"江苏2", reserveNumber:"122", id:"aaaabbb12112" } ] }, { hour:"13:00", data:[{ customerName:"江苏2", reserveNumber:"112", id:"aaaabbb12112" }] }, { hour:"14:00", data:[{ customerName:"江苏3", reserveNumber:"12", id:"aaaabbb12112" }] }, { hour:"13:00", data:[{ customerName:"江苏2", reserveNumber:"112", id:"aaaabbb12112" }] }, { hour:"14:00", data:[{ customerName:"江苏3", reserveNumber:"12", id:"aaaabbb12112" }] } ]; } });四 效果图上面是我整理给大家的，希望今后会对大家有帮助。相关文章：使用JS如何实现去除重复json使用js+cookie如何实现购物车功能在jQuery中如何使用Validate插件使用axios如何实现上传图片带有进度条功能

if the long side is X and the other is Ythen X*Y=280 the cost =6*X*2+6*Y+12*Y=12X+18Y=12*280/Y+18Ywe can get the Ymin=187feet

AngularJS为我们提供了自定义指令的功能，通过此功能，我们可以自定义一些标签，为我们自己的开发来提供帮助。下面的内容我将给大家分享关于AngularJs通过directive和restrict来设置自定义指令的方法。一、AngularJs自定义指令directive的restrict属性说明：今天公用的html部分：<h1 zym-blog></h1>JavaScript部分：var m = angular.module("app", []);m.directive("zymBlog", [function(){ return { restrict : "AEC", template : "<p>hello world</p>", replace : true };}]);通过directive设置自定义指令，第一个参数是指令名称，第二个参数是数组，包含一个回调函数，函数的返回值是一个json对象，其中：restrict表示指令的形式：A是属性、E是元素、C是class类，为了避免和style中的class类混淆，不推荐使用C。template是模板内容，表示使用这个自定义属性的标签中要插入的内容。replace的值默认是false，如果是true，说明要用templace中的标签替换html代码中使用这个自定义指令的标签。注意，如果使用replace，那么template中必须包含html元素，不能只是几个文字，否则angular会报错。下面再来看一个属性，templateUrl和template不能同时出现，templateUrl是引用的模板地址：var m = angular.module("app", []);m.directive("zymBlog", [function(){ return { restrict : "AEC", templateUrl : "./46-1.html", replace : true };}]);注意，因为这里使用了replace，所以templateUrl对应的模板内容中必须包含html标签元素。二、自定义指令的标准命名规范：directive指令名称用驼峰命名法，例如【zymBlog】，那么在html代码中进行调用时，需要在大写字母之前加一个横杠，例如【zym-blog】。三、自定义指令template函数式操作：template不仅可以是一个字符串，也可以是一个函数，例如：var m = angular.module("app", []);m.directive("zymBlog", [function(){ return { restrict : "AEC", template : function(){ return "<p>赵一鸣个人技术博客</p>"; }, replace : true };}]);四、自定义指令transclude属性：有一种情况，在html中使用了自定义指令，但是标签内部原来就有内容，这样的话，自定义指令里边的内容会把标签原来的内容替换掉，所以需要一个添加一个属性来解决这个问题（ng-transclude）：html部分：<h1 zym-blog>赵一鸣博客http://www.zymseo.com</h1>js部分：var m = angular.module("app", []);m.directive("zymBlog", [function(){ return { restrict : "AEC", template : function(){ return "<p>赵一鸣AngularJs学习笔记<span ng-transclude></span></p>"; }, replace : true, transclude : true };}]);设置ng-transclude的值为true之后，还必须在自定义指令的内部再加入一个标签，并且制定ng-transclude，这样是把原来html标签里边的内容放到这个标签里边！

刚刚试了一下 在组建的 less里面 直接写body{}设置样式 我这不起作用 ng4我在 .ts ngOnInit(){ document.body.style.background="#c00"}这样是可以的

循环的时候直接用就可以了

jQuery是dom驱动，AngularJS是数据驱动。不要先设计页面，然后再使用DOM操作来改变它的展现，不要用AngularJS来加强jQuery。

角度变化或角度变分，要看上下文

角度变形误差

使用Jquery结合AngulraJs使用的时候，在render完table后，执行一段js脚本，把JqTable应用到该table上，能够捕获到AngularJs渲染完成页面的事件。要达到这个目的，需要为当前的app自定义directive:app.directive("onFinishRenderFilters", function ($timeout) {return {restrict: "A",link: function(scope, element, attr) {if (scope.$last === true) {$timeout(function() {scope.$emit("ngRepeatFinished");});}}};});然后，在需要监控的地方，加上该directive:<tr ng-repeat="user in users" on-finish-render-filters><td>{{user.Id}}</td><td>{{user.Name}}</td><td>{{user.Salary}}</td></tr>最后，补充上需要render完成之后的Js脚本:$scope.$on("ngRepeatFinished", function (ngRepeatFinishedEvent) {//下面是在table render完成后执行的jsvar table = $("#leaderBoard").dataTable({bJQueryUI: true,"sScrollX": "100%",});});

使用Jquery结合AngulraJs使用的时候，在render完table后，执行一段js脚本，把JqTable应用到该table上，能够捕获到AngularJs渲染完成页面的事件。要达到这个目的，需要为当前的app自定义directive:app.directive("onFinishRenderFilters",function($timeout){return{restrict:"A",link:function(scope,element,attr){if(scope.$last===true){$timeout(function(){scope.$emit("ngRepeatFinished");});}}};});然后，在需要监控的地方，加上该directive:{{user.Id}}{{user.Name}}{{user.Salary}}最后，补充上需要render完成之后的Js脚本:$scope.$on("ngRepeatFinished",function(ngRepeatFinishedEvent){//下面是在tablerender完成后执行的jsvartable=$("#leaderBoard").dataTable({bJQueryUI:true,"sScrollX":"100%",});});

还是onchange事件啊

使用Jquery结合AngulraJs使用的时候，在render完table后，执行一段js脚本，把JqTable应用到该table上，能够捕获到AngularJs渲染完成页面的事件。要达到这个目的，需要为当前的app自定义directive:app.directive("onFinishRenderFilters", function ($timeout) { return { restrict: "A", link: function(scope, element, attr) { if (scope.$last === true) { $timeout(function() { scope.$emit("ngRepeatFinished"); }); } } };});然后，在需要监控的地方，加上该directive:<tr ng-repeat="user in users" on-finish-render-filters> <td>{{user.Id}}</td> <td>{{user.Name}}</td> <td>{{user.Salary}}</td></tr>最后，补充上需要render完成之后的Js脚本:$scope.$on("ngRepeatFinished", function (ngRepeatFinishedEvent) { //下面是在table render完成后执行的js var table = $("#leaderBoard").dataTable({ bJQueryUI: true, "sScrollX": "100%", });});

使用Jquery结合AngulraJs使用的时候，在render完table后，执行一段js脚本，把JqTable应用到该table上，能够捕获到AngularJs渲染完成页面的事件。x0dx0a要达到这个目的，需要为当前的app自定义directive:x0dx0aapp.directive("onFinishRenderFilters", function ($timeout) {x0dx0areturn {x0dx0arestrict: "A",x0dx0alink: function(scope, element, attr) {x0dx0aif (scope.$last === true) {x0dx0a$timeout(function() {x0dx0ascope.$emit("ngRepeatFinished");x0dx0a});x0dx0a}x0dx0a}x0dx0a};x0dx0a});x0dx0a然后，在需要监控的地方，加上该directive:x0dx0ax0dx0a{{user.Id}}x0dx0a{{user.Name}}x0dx0a{{user.Salary}}x0dx0ax0dx0a最后，补充上需要render完成之后的Js脚本:x0dx0a$scope.$on("ngRepeatFinished", function (ngRepeatFinishedEvent) {x0dx0a//下面是在table render完成后执行的jsx0dx0avar table = $("#leaderBoard").dataTable({x0dx0abJQueryUI: true,x0dx0a"sScrollX": "100%",x0dx0a});x0dx0a});

你好!本题选a!就是r*(r+1)格中去掉第4行第7列的格子后还有几格,所以共有:r*(r+1)-(r+r+1)+1=r^2+r-2r-1+1=r^2-r.

2015年发表的两篇红小豆文章。 Kang, Y., Satyawan, D., Shim, S. et al. Draft genome sequence of adzuki bean, Vigna angularis. Sci Rep 5, 8069 (2015). https://doi.org/10.1038/srep08069 单位：Seoul National University 和2014年绿豆那篇同一个团队，分析套路类似。 红豆 ( Vigna angularis var. angularis ) 是一种二倍体豆科作物 (2n = 2x = 22)，估计基因组大小为 538 Mb 1 。它是角豆亚属中的亚洲 豇豆 之一，属于豆科 2 的蝶形亚科。红豆因其甜味以及营养丰富的蛋白质和淀粉含量而在中国、日本和韩国等东亚国家广泛种植，作为传统甜点美食的原料。中国、日本、朝鲜半岛和台湾的红豆年种植面积估计分别为 670,000、120,000、30,000 和 20,000 公顷 3 。小豆野生种，如 V. angularis 变种 nipponensis 、 V. nakashimae 和 V. nepalensis 广泛分布于东亚和喜马拉雅山国家 2 。然而，考古证据表明东北亚有多个驯化起源。小豆V. angularis var. angularis是绿豆V. radiata 的近亲，适应亚热带和温带气候区。 Kai Yang,Zhixi Tian,Chunhai Chen, et al. Genome Sequencing of Adzuki Bean (Vigna angularis) Provides Insight into High Starch and Low Fat Accumulation and Domestication . DOI:10.1073/pnas.1420949112 单位：北京农学院教授万平，中国科学院遗传与发育生物学研究所研究员凌宏清和田志喜，深圳华大基因研究院 红豆 ( Vigna angularis var. angularis ) 约 12,000 年前在中国驯化 ( 1 ) 并在世界 30 多个国家种植，特别是在东亚 ( 2 , 3 )。红豆种子是蛋白质、淀粉、矿物质元素和维生素的重要来源 ( 4 , 5 )。由于其热量和脂肪含量低，蛋白质易消化，生物活性化合物丰富，红豆被称为“减肥豆”（ 6 , 7 ）。鉴于这些特性，红豆被广泛用于各种食品（例如，糕点、甜点、蛋糕、粥、红米、果冻、红豆牛奶、冰淇淋中的糊状物）至少为 10 亿人提供 ( 8 )。此外，红豆是一种传统药物，在中国已被用作利尿剂和解毒剂，并缓解水肿和脚气病的症状 ( 9 , 10 )。 小豆适应性广，对贫瘠土壤的耐受性强，是一种高价值轮作作物，有助于通过固氮改善土壤条件( 11 , 12 )。此外，红豆可以用作模型物种，特别是对于非油籽豆类，由于其生长期短且基因组小的特点。 流式分析基因组大小估计为 612 Mb，高于先前估计的 538 Mb 。22 k-mer 估计基因组大小为 591 Mb。 测序材料是 Gyeongwon，在韩国广泛种植的品种。 多种大小片段文库，ALLPATHS-LG + Newbler组装，3883个scaffold，N50=703kb，总长443Mb（75%）。通过从 Ks 频率图的峰值中寻找与菜豆Phaseolus vulgaris和绿豆V. radiata var. radiata的共线性区块，并提取保守基因组区块，用作superscaffold桥梁。基于共线性的scaffold策略将 N50提高到1.5Mb，最长从4.4Mb提高到11.1Mb。 通过GBS将133个F4群体（Gyeongwon和野生种IT178530杂交后代）来自构建遗传图谱，过滤后的 814 个 SNP用于构建11个连锁群，共158个scaffold锚定到11条假染色体上，大小为210Mb，N50=25Mb。 mRNA的花、荚、叶、根组织，Trinity从头组装，Maker流程。 CEGMA评估248个核心基因>86%，与大豆、绿豆、菜豆（P. vulgaris）的基因长度、CDS和内含子等元件比较。小豆的短基因（250bp）比例更高。26857个基因中15,976 个位于假染色体上。 小豆与拟南芥、水稻、大豆、蒺藜苜蓿（M. truncatula）的蛋白聚类分析：共有的 6,643 个基因簇，小豆特有1,163 个基因簇。 小豆与大豆、绿豆、菜豆的共线性分析。 在红豆基因组中总共鉴定了 2,669 个编码转录因子 (TF) 的基因。将相对 TF 丰度与其他植物基因组的丰度进行了比较，发现这些植物基因组中 TF 基因家族的总体比例相似。 基于同源性和结构的分析显示约 43.1% 的已测序小豆基因组为重复序列。 驯化特征：种子破碎、种子休眠最小化以及种子大小和数量增加。 新增测序材料，小豆野生近缘种V. nepalensis（AusTRCF85148）和V. angularis var. nipponensis（IT241912）。包括之前研究材料IT178530的reads。比对到小豆参考基因组上进行变异检测。 通过栽培和野生红豆的直系同源比较，我们计算了每个非同义位点的非同义替换数（Ka）与每个同义位点的同义替换数（Ks）的比值，以估计每个基因的选择压力。V. angularis var. nipponensis在 Ka/Ks 计算中显示出最少数量的多态性基因 (1,823)。我们在 Ka/Ks 值为 0.2 时观察到一个一致的峰值，表明栽培和三种野生红豆之间存在纯化选择（Ka/Ks < 1）。 三个材料的Ka/Ks 分布高度相似，一致显示三个峰（0.2、0.5 和 0.7 ~ 0.8）。在这两个比较中，分别在三个峰内共同发现了总共 307、152 和 75 个基因表明栽培和野生红豆之间对这些位点的选择压力不同。 尽管 Ka/Ks 小于 1 已被解释为纯化选择的特征 27 ，但每个峰中的基因子集可以作为解释野生和栽培小豆之间差异的候选基因。例如，在第二（0.4 0.6）和第三个峰（0.6 0.9）的病害相关基因的同源物如Vang03g15160、Vang02g14420、Vang0291s00070、Vang0229s00140、Vang02g144等野生豆类都可能具有不同的抗病性。使用 MISA 软件确定了简单序列重复 (SSR) 标记。总共检测到 143,113 个 SSR，三重复单元 SSR（基因分型的首选类型）的数量为 1,941。使用翻译基因组学方法 29 预测了这些 SSR 标记的相关 QTL 。翻译了大豆的 2,010 个 QTL 相关 SSR 标记的基因组位置通过 569 个直系同源块将小豆的基因组位置对应到到大豆相应的基因组位置，并将农业上重要的 QTL，如开花时间、成熟度、种子大小、产量和抗病性绘制到circos上。 抗病性 QTL 可能围绕 87 个编码核苷酸结合位点 (NBS) 和富含亮氨酸重复序列 (LRR) 域的基因，它们通常与抗病性相关。这些翻译的 QTL 的侧翼标记可用于育种计划。 使用菜豆P. vulgaris、绿豆V. radiata、野生小豆V. nakashimae、野生小豆V. nepalensis、小豆V. angularis var. 的60 个直系同源物构建进化树。 小豆形成了一个独特的进化枝（包括野生小豆）。栽培和野生小豆之间的最小物种形成时间为 0.05 MYA，这早于小豆种植的考古证据（约 5,000 年之前）。 Ks密度图显示这些物种具相同的单个古全基因组复制（~53.3 MYA），在红豆基因组中鉴定了 1,273 个串联复制基因，GO富集在防御反应，氧化还原和磷酸化，这与在其他植物基因组发现是一致的。 材料：中国品种“京农6号”，49份小豆重测序（11个野生，11个半野生，17个地方种，10个栽培种）。 90.88 Gb 高质量序列（168 × 小豆基因组覆盖率），Kmer评估542Mb， SOAPdenovo 组装 ，contig N50=38 kb ，scaffold N50=1.29 Mb，大小466.7 Mb（86.11%）。GC含量为34.8%，与其他已测序的豆科植物基因组相似。 使用来自栽培品种 Ass001 杂交的150 个F 2 个体，通过RAD-Seq构建了高密度单核苷酸多态性 (SNP) 遗传图谱。遗传图谱由覆盖 11 个连锁群的 1,571 个 SNP 组成，跨越 1,031.17 cM，每个scaffold平均有 4.33 个映射的 SNP，平均标记距离为 0.67 cM。总共长度有372.9 Mb 的scaffold通过使用这些SNP 分配给 11 个假染色体（79.9%）。 约44.51% (207.7 Mb) 的红豆基因组由重复 DNA 组成。高于苜蓿和莲花，低于大豆、鹰嘴豆和木豆，但与普通豆（菜豆）相似。与其他豆科植物基因组一致，大多数转座子是逆转录转座子（占基因组的 34.57%），而 DNA 转座子仅占基因组的 5.75%。使用MISA鉴定 16,230 个简单序列重复 (SSR)，设计了 9,038 个 SSR 引物对，通过分析 1,572 对引物发现其中 24.7% 表现出多态性，可作为遗传标记。 RNAseq数据包含 三个不同发育阶段（开始、发育和成熟种子）的根、茎、叶和种子，转录组组装由59,909个unitranscripts组成，其中97.4%被基因组组装覆盖，92.6%被捕获在一个超过90%的unitranscript长度的支架中，进一步证实了基因组组装的高质量。 结合从头基因预测、基于同源性的搜索和 RNA-Seq 来预测小豆基因组中的基因模型，共预测了 34,183 个蛋白质编码基因。 与其他六个已测序的豆科植物基因组相比，小豆基因组中预测基因的数量低于大豆、木豆和紫花苜蓿，但高于普通豆、鹰嘴豆和莲花。根据基因序列占全基因组的比例（基因总长度/基因组大小），红豆的比例（22.98%）高于除苜蓿外的其他豆科植物。 共76,211 个基因家族进行了聚类。发现5个豆科植物基因组共有12,582个基因家族（直系同源），而包含5,446个基因的827个基因家族是小豆特有的。功能主要富集在锌离子结合、蛋白水解、半胱氨酸型肽酶活性、双组分反应调节活性和有丝分裂等类别上。 红豆中的单拷贝基因直系同源物明显多于大豆，与木豆、鹰嘴豆和普通豆中的相似，而多拷贝直系同源物与此相反。红豆和大豆之间的这种差异很可能与大豆中额外的全基因组重复 (WGD) 相关。 通过与已知转录因子的序列比较和搜索已知的 DNA 结合域，总共鉴定了 属于 63 个家族的3,508 个红豆转录因子基因。这些基因占红豆总预测基因的10.26%，远低于普通豆、大豆和莲花中的比例，但与其他已测序豆类物种中的比例相似。 此外，还分析了小豆基因组中编码R蛋白的基因，并将其与其他豆科植物进行了比较。共检测到421个含有NBS或LRR结构域的基因，显著低于大豆和普通豆。然而，红豆基因组中的 CC_NBS 基因明显多于大豆。这些信息应该有助于确定导致植物病害和抗病育种的基因。 小豆豆味很低，含有易消化的蛋白质和丰富的生物活性化合物。因此分析了小豆等已测序豆科植物中与黄酮类生物合成、脂氧合酶（LOX）和胰蛋白酶抑制剂相关的基因，未观察到基因数比（基因组中基因数/总基因数）的显著差。但是，当检查导致大豆中豆腥味的LOX基因表达时，发现它们在小豆中的转录量明显低于大豆中的转录量，这些结果解释了小豆的低豆味。 豆科植物凝集素广泛分布于豆科植物中，是一种蛋白质毒性因子，与红细胞表面的糖蛋白相互作用，使红细胞凝集，是抑制动物生长、影响营养价值和营养的主要抗营养因子。大豆中的凝集素含量高，而红豆中的凝集素含量低。我们发现小豆中豆科植物凝集素基因的基因数量比显著低于除鹰嘴豆以外的其他已测序豆科植物物种。相对应的，小豆中的凝集素基因表达量显著低于大豆，尤其是Le1（大豆 (gmx:100818710)中一种重要的凝集素基因）。表明Le1可能在大豆种子凝集素积累中起主要作用。 分析七种豆科植物和拟南芥中的基因家族扩展和收缩。8 个物种的所有 26,120 个基因家族中，在从普通豆形成后的 1400 万年期间，红豆中分别有5.39%（1,407）和 7.83%（2,046）的基因大幅扩增和收缩，而大豆比普通豆和小豆具有更多的扩张基因家族，表明大豆在基因家族中具有普遍的扩张性，与其较大的基因数量一致。红豆扩张基因家族中的基因GO功能富集在锌离子结合、蛋白水解、半胱氨酸型肽酶活性、内肽酶活性、内肽酶抑制剂活性、脂质结合和脂质转运；收缩基因家族富集在在蛋白丝氨酸/苏氨酸激酶活性、蛋白激酶活性、蛋白酪氨酸激酶活性和防御反应。 通过直系同源搜索，在小豆基因组中检测到总共 1,501 个重复的共线性区块，基因数从 6 到 103 不等，平均为 11.7。四重简并第三密码子转换位点（4DTv）的核苷酸多样性在小豆基因组中显示出一个清晰的峰（4DTvu223c0.36），与凤蝶科的全基因组重复（WGD）事件一致。我们没有确定在大豆中发现的最近 WGD (4DTvu223c0.056) 的峰值，表明小豆与大多数已测序的豆类一样，没有这种甘氨酸特异性事件。进一步的系统发育分析表明，小豆从 19.0-32.5万年前与木豆分歧，与大豆在 16.9-29.0万年前，与菜豆在~5.6-15.0万年前。共线性分析表明，与其他豆科植物相比，小豆与普通豆具有更高的保守性。小豆和普通豆的大部分染色体能够比对（例如，小豆2号染色体和普通豆7号染色体，小豆5号和普通豆5号染色体，小豆1号和普通豆3号染色体，以及小豆4号和3号染色体菜豆染色体9）。然而，红豆的一些染色体与普通豆的不止一条染色体匹配，表明物种形成后两个基因组中发生了染色体重排。 对红豆和大豆也进行了共线性比较。结果表明，每条红豆染色体都与大豆的几条染色体相匹配，表明物种形成后发生了更多的排列，这可能是最近大豆独立WGD的结果。 豆科植物是第二重要的作物科，根据种子中的储存化合物分为油类和非油类。红豆是典型的无油豆类，而大豆属于油类。与大豆相比，小豆种子含有更多的淀粉（57.06% vs. 25.3%）和更少的粗脂肪（0.59% vs. 22.5%）。为了研究这种差异背后的基础，我们分析了与淀粉和油生物合成相关的基因。 使用水稻中的淀粉生物合成基因作为查询序列，我们在红豆和大豆基因组中进行了直系同源搜索。红豆中发现的淀粉生物合成基因少于大豆（27 vs. 46），但χ 2检验结果表明，淀粉生物合成基因的比例（淀粉合成基因的数量） /总基因数）在这两个基因组之间没有显著差异。在 2013 年和 2014 年收集了两个生物学重复的两个物种的三个种子发育阶段（开始、发育和成熟种子）检查了这些基因的转录活性。发现小豆种子成熟期淀粉生物合成基因的总转录量和单个淀粉合成基因的平均转录量均显著高于大豆。但在种子发育的两个早期阶段没有观察到显著差异。另外，淀粉合成基因的转录在小豆连续增加，特别是在成熟种子的阶段，而这些基因在大豆中的发育和成熟阶段却降低了。 随后，我们在小豆和大豆基因组中寻找与质体中脂肪酸合成、油的合成和储存以及脂肪酸降解相关的基因。尽管在大豆中发现的基因多于红豆，但基因拷贝数相对于两个基因组的总基因数没有显着差异。在质体中有关的脂肪酸合成的基因的转录和油的合成和储存均明显高于大豆高于小豆。我们还发现两类基因表现出差异表达模式。与质体中脂肪酸合成相关的基因在红豆和大豆的早期发育阶段都表现出较高的转录水平，而油合成和储存基因的表达在大豆中保持不变，但在后期在红豆中表达减少。 基于这些结果，推测大豆和小豆之间淀粉和油脂合成相关基因的转录量是导致两个物种淀粉和脂肪含量差异的原因。未来对不同物种的详细比较基因组分析将有助于回答潜在的机制。 半野生红豆的遗传基础存在争议，尚不清楚半野生红豆是与栽培种或野生红豆密切相关还是属于地方品种。 49个种质基因组的测序深度5.3×—27.34×。共鉴定了 5,539,411 个 SNP。 邻接法构树，11 个野生种质清楚地聚集在一个组中，而其余 39 个种质，包括半野生种质、地方品种和改良品种，则被分成另一个组。11 个半野生种质分布在地方品种和改良品种之间。 结果表明，半野生红豆与栽培种红豆的关系比野生型小。主成分分析表明，半野生红豆与地方品种和改良品种的关系比野生红豆更密切。群体结构显示出三种类型被分成三组时，K=3没有明显的混合。基于所有这些综合分析，半野生红豆似乎是一种独特的生态型，作为栽培种的祖先 ，而不是从古老的栽培品种和野生品种与栽培品种之间杂交的衍生物中逃脱。因此，我们在以下选择分析中将半野生红豆归类为地方品种。 地方品种和栽培品种之间检测到的选择压力明显低于野生和栽培品种之间的选择压力，地方种和栽培种之间的选择压明显低于野生和栽培种之间的选择压，如红豆 1 号染色体的Fst值（上图 D）。结果表明，从野生种质到栽培品种的驯化是彻底和连续的。选择区域中的基因主要富集在植物与病原体相互作用、植物激素信号转导、氨基苯甲酸降解、细胞周期和叶酸生物合成的 KEGG 途径中。 获得了高质量的小豆基因组序列草图，其中86%以上的基因组被组装，大约80%的序列被分配到染色体上。总共预测了 34,183 个蛋白质编码基因。基因组重复分析显示，与大豆不同，红豆基因组缺乏最近的全基因组重复事件。与其他已测序的豆科植物基因组相比，红豆基因组与普通豆的同线性度高于大豆、木豆、紫花苜蓿、鹰嘴豆和莲花。更有趣的是，发现与大豆相比，红豆种子的低脂肪和高淀粉含量不是由基因拷贝数变异引起的，而是由基因表达量引起的。此外，还通过种群分析发现半野生红豆是一种初步的地方品种，其中有11个野生、11个半野生种质、17个地方品种和11个改良品种，并在驯化中检测到强烈的选择信号。

基于 AngularJS 的拖拽指令支持 GPU 加速支持边界限制支持设置拖拽把柄移动端与 PC 端通用使用支持使用 script 标签或者 webpack、requirejs、seajs 调用：script调用script src="lib/angular.js"></script><script src="dist/angular-drag.js"></script><script> var app = angular.module("app", ["angular-drag"]);</script>webpack安装npm install angular-drag调用require("angular-drag");var app = angular.module("app", ["angular-drag"]);angular-drag 依赖 angular 与 jquery 两个全局模块指令drag 被拖拽的元素drag-handle 触发拖拽的把柄（可选）示例简单的可拖拽元素<div drag class="example"> hello world</div>自定义拖拽的把柄<div drag class="example"> <div drag-handle></div> <p>hello world</p></div>

s=rθ：s是弧长，r是圆半径，θ是圆心角；v=rw：v是线速度，w是角速度，r是圆半径；a=rα：a是平动加速度，α是角加速度,r是圆半径；τ=Fr：τ是力矩，F是外力，r是力到转轴的距离；Fe=mv^2/r：Fe是向心力，m是作圆周运动质点的质量，v是线速度，r是圆半径；τ=Iα：转动定律，表示合外力矩τ等于物体的转动惯量I与角加速度α的乘积；L=Iw：角动量（动量矩）定义：角动量L=转动惯量I与角速度w的乘积。

linear: 线性的; bent: 弯曲的; triangular pyramidal: 三角锥体; tetrahedral: 四面体应该是结构化学内的词汇，希望能帮到你~

角度变形误差

你好，长方体用cuboid这个单词就可以了，希望可以帮到你O(∩_∩)O

在生成DOM后扫描并生成angularJS肯定是在DOM节点树生成后开始管理节点的，生成后寻找ng-app标记，然后其下属所有节点均由ng来管理。使用compile可以改变原始的dom,在ng创建原始dom实例以及创建scope实例之前.ng-repeat就是一个最好的例子,它就在是compile函数阶段改变原始的dom生成多个原始dom节点,然后每个又生成element实例.

一个是形容词，一个是名词。rectangular (adj.) 矩形的；成直角的rectangle (n.) 矩形；长方形

处理 401 的，先抓到 401，然后通过事件机制处理$httpProvider.interceptors.push(function($rootScope, $q) { return { "request": function(config) { // console.log("request:" + config); return config || $q.when(config); }, "requestError": function(rejection) { // console.log("requestError:" + rejection); return rejection; }, //success -> don"t intercept "response": function(response) { // console.log("response:" + response); return response || $q.when(response); }, //error -> if 401 save the request and broadcast an event "responseError": function(response) { console.log("responseError:" + response); if (response.status === 401) { var deferred = $q.defer(), req = { config: response.config, deferred: deferred }; $rootScope.requests401.push(req); $rootScope.$broadcast("event:loginRequired"); return deferred.promise; } return $q.reject(response); } }; });

1.引入中文国际化文件angular-locale_zh-cn.js 然后大部分控件就可以显示中文了。2. 还不够，有些按钮（today,clear，close）还不能显示中文， 2.1)需要修改angular-locale_zh-cn.js ，对DATETIME_FORMATS增加三个中文键值对： "DATETIME_FORMATS": { "TODAY":"u4ecau5929", "CLEAR":"u6e05u7a7a", "CLOSE":"u5173u95ed", 2.2) 还不行，today,clear，close等按钮还不能国际化,还需修改ui-bootstrap-tpls-0.13.0.js 主要修改的ui-bootstrap-tpls-0.13.0.js文件中指令datepickerPopup， 你可以参照我的github fork的分支作的修改: 3.对于第2步修改，你觉得麻烦的话，我可以教你一个省事的法子，这基于你对angular 指令定义要有较好的理解， 具体做法是，在datepicker-popup指令定义的地方，增加属性current-text,clear-text, close-text的定义 例如：current-text="今天" <div class="col-md-6"> <p class="input-group"> <input type="date" class="form-control" current-text="今天" datepicker-popup ng-model="dt" is-open="opened" min-date="minDate" max-date=""2015-06-22"" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> </div> ------------------------------------------------------------------------------------------------------------------------------------------------------ 2.2具体修改以下部分： 修改 ui-bootstrap-tpls-0.13.0.js的指令datepickerPopup 指令datepickerPopup的定义依赖增加$locale，并新加以下片段 scope["currentText"]=$locale.DATETIME_FORMATS.TODAY||scope["currentText"]; scope["clearText"]=$locale.DATETIME_FORMATS.CLEAR||scope["clearText"]; scope["closeText"]=$locale.DATETIME_FORMATS.CLOSE||scope["closeText"];

params是使用‘GET"方法时传的参数，data是"post"方法时传的参数

现在Angular版本很多，不提2.0 。从1.3.0到1.3.15，以及现在的1.4.0和1.4.2。 这些版本有哪些显著区别，有哪些关键版本，正式环境应该用哪些版本还有就是考虑到一些第三方库，如ui-router，ui-bootstrap等时。

我们会关注两种提交表单的方式： 旧方法：jQuery和PHP提交表单 新方法：AngularJS和PHP提交表单首先看一下我们的表单，超级简单：形式要求 实现页面无刷新表单处理 输入姓名和超级英雄别名 如果有错误，显示错误提示 如果输入有误，将输入变成红色 如果所有内容ok，显示成功提示文档结构在我们的展示中，仅需两个文件 index.html process.php表单处理让我们新建一个PHP来处理表单。该页面非常小并且使用POST方式提交数据。处理表单：这对我们来说并不是那么重要的。你可以使用其他你喜欢的语言来处理你的表单。 // process.php<?php$errors = array(); // array to hold validation errors$data = array(); // array to pass back data// validate the variables ====================================================== if (empty($_POST["name"])) $errors["name"] = "Name is required."; if (empty($_POST["superheroAlias"])) $errors["superheroAlias"] = "Superhero alias is required.";// return a response =========================================================== // response if there are errors if ( ! empty($errors)) { // if there are items in our errors array, return those errors $data["success"] = false; $data["errors"] = $errors; } else { // if there are no errors, return a message $data["success"] = true; $data["message"] = "Success!"; } // return all our data to an AJAX call echo json_encode($data);这是一个非常简单的表单处理脚本。我们仅检查数据是否存在，如果存在，则不做任何处理和操做；如果不存在，则需要向$errors数组中添加一条信息。为了返回我们的数据用于AJAX调用，我们需要使用echo和json_encode。这就是我们PHP表单处理所有需要做的操作。使用普通的jQuery AJAX或者Angular处理表单也是这样的。 展示表单让我们创建一个HTML来展示我们的表单 <!-- index.html --><!doctype html><html><head> <title>Angular Forms</title> <!-- LOAD BOOTSTRAP CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <!-- LOAD JQUERY --> <!-- when building an angular app, you generally DO NOT want to use jquery --> <!-- we are breaking this rule here because jQuery"s $.param will help us send data to our PHP script so that PHP can recognize it --> <!-- this is jQuery"s only use. avoid it in Angular apps and if anyone has tips on how to send data to a PHP script w/o jQuery, please state it in the comments --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- PROCESS FORM WITH AJAX (OLD) --> <script> <!-- WE WILL PROCESS OUR FORM HERE --> </script></head><body><div class="container"><div class="col-md-6 col-md-offset-3"> <!-- PAGE TITLE --> <div class="page-header"> <h1><span class="glyphicon glyphicon-tower"></span> Submitting Forms with Angular</h1> </div> <!-- SHOW ERROR/SUCCESS MESSAGES --> <div id="messages"></div> <!-- FORM --> <form> <!-- NAME --> <div id="name-group" class="form-group"> <label>Name</label> <input type="text" name="name" class="form-control" placeholder="Bruce Wayne"> <span class="help-block"></span> </div> <!-- SUPERHERO NAME --> <div id="superhero-group" class="form-group"> <label>Superhero Alias</label> <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader"> <span class="help-block"></span> </div> <!-- SUBMIT BUTTON --> <button type="submit" class="btn btn-success btn-lg btn-block"> <span class="glyphicon glyphicon-flash"></span> Submit! </button> </form></div></div></body></html>现在，我们有了表单。我们另外还使用了Bootstrap来使表单看起来不是那么丑。使用Bootstrap语法规则，每个input下含有一个spot来展示我们文本的错误信息。使用jQuery提交表单现在，让我们来使用jQuery处理表单提交。我会将所有的代码添加到空的<script>标签中 <!-- index.html -->... <!-- PROCESS FORM WITH AJAX (OLD) --> <script> $(document).ready(function() { // process the form $("form").submit(function(event) { // remove the past errors $("#name-group").removeClass("has-error"); $("#name-group .help-block").empty(); $("#superhero-group").removeClass("has-error"); $("#superhero-group .help-block").empty(); // remove success messages $("#messages").removeClass("alert alert-success").empty(); // get the form data var formData = { "name" : $("input[name=name]").val(), "superheroAlias" : $("input[name=superheroAlias]").val() }; // process the form $.ajax({ type : "POST", url : "process.php", data : formData, dataType : "json", success : function(data) { // log data to the console so we can see console.log(data); // if validation fails // add the error class to show a red input // add the error message to the help block under the input if ( ! data.success) { if (data.errors.name) { $("#name-group").addClass("has-error"); $("#name-group .help-block").html(data.errors.name); } if (data.errors.superheroAlias) { $("#superhero-group").addClass("has-error"); $("#superhero-group .help-block").html(data.errors.superheroAlias); } } else { // if validation is good add success message $("#messages").addClass("alert alert-success").append("<p>" + data.message + "</p>"); } } }); // stop the form from submitting and refreshing event.preventDefault(); }); }); </script>...这里处理表单有不少的代码。我们有获取表单中变量的代码，有使用AJAX将数据发送至我们的表单的代码，有检查是否有错和显示成功提示的代码。除此之外，我们希望每次表单提交之后，过去的错误信息都会被清除。确实是不少代码。现在，如果表单中含有错误，则：如果提交成功：现在，让我们看使用Angular来提交相同的表单。记住，我们不需要更改任何关于我们的PHP如何处理表单的内容，我们的应用依然会具备相同的功能（在同一个地方展示错误和成功信息）。使用Angular提交表单我们准备在之前使用的<script>标签中设置我们的Angular应用。所以删除里面的内容，我们就可以开始了。设置一个Angular应用步骤为： 1. 加载Angular 2. 设置module 3. 这是controller 4. 将module和controller应用于HTML 5. 设置双向变量绑定 6. 这是错误和信息看起来好像是很多内容，但是最终，我们会用非常少的代码，并且看起来会非常简洁。另外，创建带有更多输入更大的表单，也会更容易。Angular 组件和控制器首先，加载Angular并且新建组件和控制器 <!-- index.html -->... <!-- LOAD JQUERY --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- LOAD ANGULAR --> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <!-- PROCESS FORM WITH AJAX (NEW) --> <script> // define angular module/app var formApp = angular.module("formApp", []); // create angular controller and pass in $scope and $http function formController($scope, $http) { } </script></head><!-- apply the module and controller to our body so angular is applied to that --><body ng-app="formApp" ng-controller="formController">...现在，我们有了Angular应用的基础。我们已经加载了Angular，创建了组件模块和控制器，并且将其应用于我们的网站。接下来，我将展示双向绑定是如何工作的。双向数据绑定这是Angular的核心思想之一，也是功能最强大的内容之一。在Angular文档中，我们看到：“在Angular网页应用中的数据绑定，是模型和视图层之间的数据自动同步。”这意味着，我们需要在表单中抓取数据，使用$("input[name=name]").val()并不是必需的。我们在Angular中将数据和变量绑定在一起，无论是javascript也好，view也罢，只要有改变，两者皆变。为了演示数据绑定，我们需要获取表单的input来自动填充变量formData。让我们回到应用于页面的Angular控制器中。我们在过一下$scope和$http。$scope：控制器和视图层之间的粘合剂。基本上，变量使用$scope从我们的控制器和视图层之间传递和往来。具体详细的定义，请参见文档。$http：Angular服务来帮助我们处理POST请求。更多信息，请参见文档。使用数据绑定获取变量好了，闲话少说。我们将这些讨论应用到表单中去。方法比上面讨论的要简单。我们想Angular控制器和视图中分别添加一行。 <!-- index.html -->... <!-- PROCESS FORM WITH AJAX (NEW) --> <script> // define angular module/app var formApp = angular.module("formApp", []); // create angular controller and pass in $scope and $http function formController($scope, $http) { // create a blank object to hold our form information // $scope will allow this to pass between controller and view $scope.formData = {}; }...现在，我们已经建立了一个formData对象。让我们用表单数据来填充它。在显示调用每个输入和获得val()之前，我们用ng-model绑定一个特殊的输入到变量。<!-- index.html -->... <!-- FORM --> <form> <!-- NAME --> <div id="name-group" class="form-group"> <label>Name</label> <input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name"> <span class="help-block"></span> </div> <!-- SUPERHERO NAME --> <div id="superhero-group" class="form-group"> <label>Superhero Alias</label> <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ng-model="formData.superheroAlias"> <span class="help-block"></span> </div> <!-- SUBMIT BUTTON --> <button type="submit" class="btn btn-success btn-lg btn-block"> <span class="glyphicon glyphicon-flash"></span> Submit! </button> </form> <!-- SHOW DATA FROM INPUTS AS THEY ARE BEING TYPED --> <pre> {{ formData }} </pre>...现在，既然Angular已经将每个输入绑到了formData。 当你输入每个输入框，你可以看到formData对象被填充了！有没有很酷！你不必在view中使用$scope。一切被认为是嵌入到$scope中的。处理表单在我们的旧表单中，我们使用jQuery提交表单，像这样$("form").submit()。现在我们使用Angular称作ng-submit的特性。要想完成这个，我们需要添加一个控制器函数来处理表单，然后告诉我们form使用这个控制器函数：<!-- index.html -->... <!-- PROCESS FORM WITH AJAX (NEW) --> <script> // define angular module/app var formApp = angular.module("formApp", []); // create angular controller and pass in $scope and $http function formController($scope, $http) { // create a blank object to hold our form information // $scope will allow this to pass between controller and view $scope.formData = {}; // process the form $scope.processForm = function() { }; }... <!-- FORM --> <form ng-submit="processForm()">...现在我们的form知道提交时使用控制器函数了。既然已经到位了，然我们用$http来处理表单吧。处理表单的语法看起来跟原始方式很像。好处是我们不需要手动抓取表单数据，或者注入，隐藏，添加类显示错误或成功信息。<!-- index.html -->...// process the form$scope.processForm = function() { $http({ method : "POST", url : "process.php", data : $.param($scope.formData), // pass in data as strings headers : { "Content-Type": "application/x-www-form-urlencoded" } // set the headers so angular passing info as form data (not request payload) }) .success(function(data) { console.log(data); if (!data.success) { // if not successful, bind errors to error variables $scope.errorName = data.errors.name; $scope.errorSuperhero = data.errors.superheroAlias; } else { // if successful, bind success message to message $scope.message = data.message; } });};...这就是我们的表单！没有添加或移除类。我们需要每次提交表单时都清楚错误。我们只需绑定变量和需要用到的视图。这非常棒，因为处理器用来处理数据，而视图用来显示数据.jQuery POST vs Angular POST有时能看到用POST方式提交在服务器中看不到数据，这是因为jQuery和Angular的序列化和发送数据的方式不同。这归结于你所使用的服务器语言和它理解Angular提交的数据的能力。上面的代码是应用于PHP服务器的，jQuery对于$.param函数则是必需的。虽然实现上文中提到的内容有非常多不使用jQuery的方法，但在本实例中，使用jQuery的唯一原因就是，它更简单。

基于 AngularJS 的拖拽指令 支持 GPU 加速 支持边界限制 支持设置拖拽把柄 移动端与 PC 端通用 使用 支持使用 script 标签或者 webpack、requirejs、seajs 调用： script 调用 script src="lib/angular.js"></script> <script src="dist/angular-drag.js"></script> <script> var app = angular.module("app", ["angular-drag"]); </script> webpack 安装 npm install angular-drag 调用 require("angular-drag"); var app = angular.module("app", ["angular-drag"]); angular-drag 依赖 angular 与 jquery 两个全局模块 指令 drag 被拖拽的元素 drag-handle 触发拖拽的把柄（可选） 示例 简单的可拖拽元素 <div drag class="example"> hello world </div> 自定义拖拽的把柄 <div drag class="example"> <div drag-handle></div> <p>hello world</p> </div>

作为一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。其强大的兼容性，独特的链式语法和短小清晰的多功能接口为我们平常的开发工作带来了不少的帮助。在今年的3月16，我们也迎来了jQuery 3.2.0（jQuery 3.2.0 Is Out!）。此版本包括一些错误修复，改进和一些弃用，如果从 jQuery 3.0+升级，应该不会存在兼容性问题。如果尚未升级到 jQuery 3+，请去查阅“3.0升级指南”。这次更新中值得关注的更新：1.支持自定义CSS属性添加2.弃用jQuery.holdReady3.弃用jQuery.nodeName4.弃用jQuery.inArray5.修复了.width()和.height()中存在的一个bug 。例如,transform: scale(2x)时，元素的高宽值不应该翻倍。6.支持将

使用开发工具打开目录打开index.html,在<body>的最下面添加angular.js的引用<script src="node_modules/angular/angular.js"></script>打开app.js将window对象换成angular对象，代码结构如下：(function (angular) { "use strict";})(angular);创建一个模块：var myApp = angular.module("MyTodoMvc", []);创建一个Controller myApp.controller("MainController", ["$scope", function ($scope) { };暴露text到页面$scope.text = "";暴露todos到页面 $scope.todos = [ { id: 1, text: "学习", completed: false }, { id: 2, text: "睡觉", completed: false }, { id: 3, text: "敲代码", completed: true } ];

$(window).scroll(function() { if ($(window).scrollTop() > 100) { $("#back-to-top").fadeIn(1500); } else { $("#back-to-top").fadeOut(1500); } });

比如你想从 testA 跳转到 testB页面，并传递数据； 首先写好路由，再testB加上params，作为传递参数 ng-click ="goTestB()" 然后在你的controller.js上，写上

angular 相对门槛高一点点 会的人少用的人就少了

AngularJS诞生于2009年，后来被谷歌收购。AngularJS有着诸多特性，最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。优点：我所知道的优点有：1. 模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；2. 是一个比较完善的前端MV*框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；3. 补充：Angular支持单元测试和e2e-testing。缺点：1. 验证功能错误信息显示比较薄弱，需要写很多模板标签，没有jQuery Validate方便，所以我们自己封装了验证的错误信息提示；2. ngView只能有一个，不能嵌套多个视图，虽然有解决，但是貌似ui-router 对于URL的控制不是很灵活，必须是嵌套式的（也许我没有深入了解或者新版本有改进）；3. 对于特别复杂的应用场景，貌似性能有点问题，特别是在Windows下使用chrome浏览器，不知道是内存泄漏了还是什么其他问题，没有找到好的解决方案，奇怪的是在IE10下反而很快，对此还在观察中；对于以上的优缺点作为编程的外行，我所知道的也就这么多，有不妥的说法欢迎指正。

未来的发展趋势是前端后端只靠json数据来进行通信：后端只处理和发送一段json数据到前端，然后计算和模板渲染都在前端进行。而前端的改动后，形成json数据然后传回到后端。未来趋势就是：后台程序再也不做模板的任何处理x0dx0ax0dx0aAngularJS x0dx0a的作用简单说就是就是把后台的json值直接用html进行渲染，然后html的操作又直接在形成json传回后台。x0dx0ax0dx0a未来的后台MVC，试图不再是模板了，而是一段结构整齐标准的JSON，而这个JSON作为前台的model直接在AngularJS直接使用。x0dx0ax0dx0a或者说后台的试图是前台的模型，而整个前台就是后台的视图。后台程序再也不做模板的任何处理了。x0dx0ax0dx0aAngular是框架的一种，不学也能开发前端。学backbone或者ember也能开发前端。没有js的mvc，就光弄个jquery，也能开发前端。x0dx0ax0dx0a那到底要不要学？个人觉得就是要看发展趋势。angular是否简化的前端开发，是否符合未来前端的开发趋势。以现在的js的发展程度来看，angular x0dx0a是符合发展趋势的，第一，解耦前端，第二，可以模块化，第三可测试，第四天生支持json，第五依赖注入等等等，还有一些其他特性使得angular跟随甚至是推动了前端的开发趋势。x0dx0ax0dx0a所以说angular学习是有好处的：x0dx0a1.了解前端的开发趋势x0dx0a2.学习MV*的设计方法x0dx0a3.学习模块化编程x0dx0a4.学习如何测试模块x0dx0a5.使用angular简化开发流程x0dx0a6.随着google的大力支持和逐渐流行，公司开始使用angular，有些岗位需要有angular的知识才能工作。

由于目前最新的Angular router版本号是3.3.0，而其他的模块版本号是2.2.0，并不一致，所以Angular团队计划将他们同步，发布的下一个主版本是Angular 4而不是3。并且以后的产品将不会叫做AngularJS、Angular 2、2.x 或者4.x，而是直接叫做Angular，版本号仍然是次要信息。Angular 4的第一个测试版本 (4.0.0-beta.0)目前已经发布，为了在2017年3月1日发布稳定版4.0.0，后续还将有6个其他的测试迭代版本和3个发布候选版。同时，2.3.X版本将只有patch版本发布。

scripts下面是一些预定义的项目命令:start 是运行项目的意思, 执行npm start即可, 或者直接执行ng serve也可以.npm build / ng build 是执行构建…….不一一介绍了.然后看下dependencies:我们使用的是angular 5.2.0, 前面的^符号表示, 我们使用的版本号是大于等于5.2.0的但是肯定会小于6.最下面是devDependencies, 里面都是开发时用的工具库, 可以看到angular cli就在里面.2、新建完成项目以后打开angular.json,查看项目信息

就是angular的事件对象,一般用于绑定事件,例子如下1,前端html页面绑定click事件,<input type="checkbox"ng-click="updateSpecAttr($event,s.text,o.optionName)"/>2,调用前端mvc中的controller层中的updatespecatrr方法,参数传到这里$scope.updateSpecAttr = function($event, name, value){var obj = $scope.searchJsonByKey($scope.goods.goodsDesc.specificationItems,"attributeName", name);3,这里是后端代码的一部分,也是理解的重点,这里的if中的就是前面传过来的对象,判断上面checkbox是否选中,if($event.target.checked){ }综上所述.我个人的理解就是,便于绑定事件在后端的延续性操作

未来的发展趋势是前端后端只靠json数据来进行通信：后端只处理和发送一段json数据到前端，然后计算和模板渲染都在前端进行。而前端的改动后，形成json数据然后传回到后端。未来趋势就是：后台程序再也不做模板的任何处理AngularJS 的作用简单说就是就是把后台的json值直接用html进行渲染，然后html的操作又直接在形成json传回后台。未来的后台MVC，试图不再是模板了，而是一段结构整齐标准的JSON，而这个JSON作为前台的model直接在AngularJS直接使用。或者说后台的试图是前台的模型，而整个前台就是后台的视图。后台程序再也不做模板的任何处理了。Angular是框架的一种，不学也能开发前端。学backbone或者ember也能开发前端。没有js的mvc，就光弄个jquery，也能开发前端。那到底要不要学？个人觉得就是要看发展趋势。angular是否简化的前端开发，是否符合未来前端的开发趋势。以现在的js的发展程度来看，angular 是符合发展趋势的，第一，解耦前端，第二，可以模块化，第三可测试，第四天生支持json，第五依赖注入等等等，还有一些其他特性使得angular跟随甚至是推动了前端的开发趋势。所以说angular学习是有好处的：1.了解前端的开发趋势2.学习MV*的设计方法3.学习模块化编程4.学习如何测试模块5.使用angular简化开发流程6.随着google的大力支持和逐渐流行，公司开始使用angular，有些岗位需要有angular的知识才能工作。

选择 Vue 而不选择 Angular，有下面几个原因，当然不是对每个人都适合： 在 API 与设计两方面上 Vue.js 都比 Angular 简单得多，因此你可以快速地掌握它的全部特性并投入开发。 Vue.js 是一个更加灵活开放的解决方案。

waiting 时间太长－－－－ 查看waiting 的意思，以及TTFB， TTFB ，是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。 或者<img ng-src="{{shopGood.image_url || "./img/notShow.jpg"}} " alt="餐厅图片" onerror="javascript:this.src="./img/notShow.jpg"”/> 24 表单当中type=“text”,数字相加时 只能放在js当 中，不能放在ng-bind中，parseFloat()，不支持函数， 如果利用＋将字符串转换为数字，则不管用。。。。<span>{{(+ shopGood.ori_price) + (+shopGood.add_price)}}</span> 依赖注入时的语法错误，名称不对 26.angularjs中的表单type=“number”会自动把字符串转换为数字？ 对 27.finally(function (){ dialog.hidePreloader(); }); 缺少注入依赖 Failed to load template: template/modal/backdrop.html angular-bootstrap中忘记导入ui-bootstrap-tpls.js 路由错误导致 30.gulpfile中无watch监听会有很严重的缓存问题（不能及时更新） Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:modulerr] Failed to instantiate module ui-router due to: Error: [$injector:nomod] Module "ui-router" is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 错误：/ angular.module("app", [ "ui-router" u274c －－> ui.router ] ).config( require("./app/config.js") ) / Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: TypeError: Cannot read property "otherwise" of undefined module.exports = [ "$stateProvider", "$urlRouterProvider", //缺少 function($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise("/main"); //表示路由引擎匹配不到路径时，就跳该路径 $stateProvider.state("main",{ url : "/main", abstract : true, templateUrl : "main.html" }) } ]; 34.一直报错找不到相对页面 404 gulpfile 里缺少对html视图的自动化，将html页面的模板都压缩在tempaltes.js中，然后相对应的config中的路由根据此去查找 缺少了 require("../views/templates");

1.安装@angular/material、@angular/cdk cnpm install --save @angular/material @angular/cdk 2.app.module.ts导入模块 3.在当前组件引入 html css 1.Context Variables 使用*cdkVirtualFor，我们有一些上下文变量:index, count, first, last, even, odd. 2.视图回收 为了提高渲染性能， *cdkVirtualFor 会缓存那些曾经创建过但不再需要的视图。当要创建一个新视图时，会转而复用一个已缓存的视图。可以通过 templateCacheSize 属性来调整视图缓存的大小。把这个大小设置为 0 会禁用缓存。如果你的模板在内存方面很昂贵，你可能会希望减小这个数字，以免在模板缓存上花费太多内存。 3.固定超过滚动视图的item个数 minBufferPx maxBufferPx 当所有条目都是固定大小时，你可以使用 FixedSizeVirtualScrollStrategy。可以用 itemSize 指令轻松地将它添加到视口中。这种约束的优点是它可以提供更好的性能，因为在渲染条目时不需要进行测量。 固定大小的策略也支持设置一些缓冲区参数，用来决定渲染多少额外内容，也就是视口可见内容之外的部分。第一个参数是 minBufferPx。 minBufferPx 是视口必须渲染的最小内容缓冲区数量（以像素为单位）。如果视口检测到要缓冲的内容小于这个数量（未填满），就会立即渲染更多内容。 第二个参数是 maxBufferPx。它会告诉视口当检测到需要更多缓冲区的时候要渲染多少个备用缓冲区空间。 这两个缓冲区参数的作用可以用一个例子来说明。假设我们有以下参数：itemSize = 50、minBufferPx = 100、maxBufferPx = 250。当用户滚动浏览内容时，视口就会检测到只剩下 90px 的缓冲区。由于它小于 minBufferPx，所以视口必须渲染更多缓冲区。它必须渲染足够数量的缓冲区，直到其大于等于 maxBufferPx。在这种情况下，它渲染了4个条目（额外的 200px），使缓冲区总大小达到290px，略高于maxBufferPx 。 4.视口方向 虚拟滚动视口默认为垂直方向，也可以设置为 orientation="horizontal"。在改变方向时，要确保该条目是用 CSS 进行水平布局的。要做到这一点，你可能希望把 .cdk-virtual-scroll-content-wrapper 类作为 CSS 的目标，它是包含待渲染内容的包装元素。 5.数据 *cdkVirtualFor 接受来自 Array、Observable<Array> 或 DataSource 的数据。 数据源是一个抽象类，有两个方法： – connect(): is called by the Viewport to receive a stream that emits the data array. – disconnect(): will be invoked when the Viewport is destroyed. 例子： 6.trackBy 像 *ngFor 的 trackBy 一样，这里也可以指定 trackBy 函数，工作方式也都一样。传给这个 trackBy 的 index 是在数据源中的索引，而不是在要渲染的这部分数据中的索引。 用函数自己写排序功能： 7.滚动策略 为了确定整个内容的大小以及它在任何时刻需要实际渲染的内容，视口依赖于所提供的一个 VirtualScrollStrategy。提供它的最简单方式是在视口上使用 itemSize 指令（例如 <cdk-virtual-scroll-viewport itemSize="50">）。但是，也可以通过创建一个实现 VirtualScrollStrategy 接口的类来提供自定义策略，并在包含此视口的组件上把它提供为 VIRTUAL_SCROLL_STRATEGY。

查看angularjs源代码方法如下大部分JS框架的源代码都可以在Github中找到，angular.js也可以在里面查找，要想在Github中找到相应的源代码，步骤如下：在浏览器中访问github.com在右上角的搜索框中输入想要查找的源代码（输入angular.js），按回车搜索在查询结果中，一般来说第一个结果就是对应的源代码（angular.js）点进去后，可以在线查看，亦可以点击绿色下拉按钮“Clone or download”，用git复制地址同步源代码到本地，或者打包成zip压缩包下载都本地。

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。

前端开发中经常会遇到跨域的问题，特别是在开发环境，本地开发请求后台接口，因为前端服务和后台服务不是同一台电脑所以会出现跨域的现象，也就是遵循我们的同源策略，即协议，域名，端口不一致时就会出现跨域的现象， 此时在我们本地调试程序久需要惊醒代理配置，我用的angular框架做开发，所以本文围绕angular 如下图，我是用express配置了一个接口 然后在不做任何操作的情况下请求这个/auth的这个接口，接口的全称应该是192.168.1.109:8888/auth 结果会报错，如下图在项目的根目录新建JSON文件 配置好了后，npm start启动项目，请求成功 如果想代理多个路径，可以换一种方式配置，加了个context参数 此配置可以代理接口地址为“/auth”和“/api”开头路径的服务，以上方法是用json文件配置代理的，还可以用ES6模块化的方式配置 同样在项目的根目录新建一个proxy.config,js文件，此文件是js文件 和json文件同样配置,此时不在赘述 这里插一句，如果要请求不跨域还可以修改接口的请求头，例如我express写的接口，所以我会在请求前做相应的参数设置 如果要需要进行其他参数的配置可以参照 webpack 官方文档

查看angular.js的文件

现在我使用angular5开发了一个工程。现在业务需求，希望程序能够以app的形式发布到市场上。为了方便就，直接将现有的程序使用cordova进行封装。 我的操作系统版本是：mac os High Sierra 10.13.1 我安装的androidstudio的版本是：android-studio-ide-171.4443003-mac.dmg 首先安装jdk。 然后在androidstudio里面安装android的sdk。注意cordova支持的版本号。具体查看： https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#requirements-and-support 最后在.bash_profile文件里面配置JAVA_HOME。最后效果是首先安装cordova 然后创建一个工程： 其中hello是工程文件夹的名字，com.example.hello是android需要的id，HelloWorld是应用的名字。 进入这个工程，添加需要平台 检测环境是不是配置对了 在检测cordova需要的环境是不是安装，之后出现这样的提示。 Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio 这是因为在android studio2.3.1 gradle的位置变了，导致找不到了。 这个时候需要手动安装了。 这样android的环境就配置好了。 将angular工程中所有的文件合并或者拷贝到cordova工程中。合并package.json文件的时候要小心，不要遗漏了什么。 我的package.json文件太长了，就不往上传了。借用一下别人的图片。 使用 ng serve 运行一下工程，发现报错： Cannot read property "config" of null TypeError: Cannot read property "config" of null @angular/cli/tasks/serve.js @angular/cli/commands/serve.js 那是因为angular工程里面的一个隐藏文件.angular-cli没有拷贝到cordova里面去。拷过去之后，再次运行就好了。 在index.html文件里面添加 <script type=”text/javascript” src=”cordova.js”></script> 将index.html里面的base修改成： <base href="."> 安装插件 cordova plugin add cordova-plugin-device 将.angular-cli.json的outDir属性改为“www”. "outDir": "www" 打开android模拟器，运行命令 就可以出现步骤二的结果了。 img的src所对应的图片没有加载出来。那是因为cordova把img的src转成： file:///assets/img/check-box-unchecked.png 在android手机里面没有找到这个图片，就报错了。 file:///assets/img/check-box-unchecked.png Failed to load resource: net::ERR_FILE_NOT_FOUND 可以使用插件： cordova-plugin-file 来解决问题 https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html https://medium.com/@nacojohn/convert-your-angular-project-to-mobile-app-using-cordova-f0384a7711a6 https://github.com/henotia/Angular5-Cordova

1.Angular2由Google主导，而Vue由个人主导。并不是说能力方面，但考虑到个人的经费和精力等多方面原因，团队项目要比个人项目在多方面因素上更为靠谱。2.Angular2旨在提供通用的【前】端方案，

angularjs怎样监听多选select-option表单域的值变化 今发现超级简单升级node.js行命令搞定省重新编译安装程 node模块叫n（名字够短）专门用管理node.js版本 首先安装n模块： npm install -g n 第二步： 升级node.js新稳定版 n stable 简单 n面跟...,

最关键的问题就是成本与时间！一个苹果IOS开发要学会ObjectC,一个Android开发要学会Java,我一个.NET程序员要学习这么多的语言，成本不小啊；企业的应用通常不复杂，说白了移动应用就是一个小型的企业展示网站（当然根据功能来），一个简单的应用你一下子收人家几万，甚至几十万。企业通常会频繁的更新与改版，这对Android与IOS开发与维护来说，简直就是一场灾难，本来收的钱就少，这一改就是动全身啊；基于AngularJs自己包装了若干的Directive，关于AngularJs的介绍我们会在接下来慢慢和大家分享。一个页面就可以展示出CRUD,一个页面就能把一个企业展示应用体现出来，又是MVVM的，又是模型双向绑定。一次开发多个版本享用，省去了学习java,oc,.net的成本，美工制作一次界面自适应各种屏幕浏览器。

前后端分离逐渐成为主流的开发方式，但同时也带来一些问题。在本地开发时，http请求通常需要从前端端口号转到后端端口号。处理跨域问题的方法有很多，如 CROS、 修改浏览器配置等，我比较喜欢proxy代理的方式。 假如Angular的请求为 http://localhost:4200/service/login ，经过proxy处理后，该请求变为 http://localhost:8080/login ，实现了自动跨域。 proxy配置项很多，可以参考 https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

很简单就看它的标签和引入的js文件angular使用必须使用ng-app这个绑定应用，如果在html中看到这个字符串，肯定就是angularJS

推荐网站：http://www.angularjs.cn/还有一个是慕课网，有angular的视频http://www.imooc.com/

　angular的$interval方法为 　　$interval(fn, delay, [count], [invokeApply], [Pass]);

前端框架 Angular 14 已正式发布了。 Angular 是一个前端开发框架，由谷歌公司开源。在 Angular 14 的网站中，Angular 新的标语是“现代 Web 开发平台”。 Angular 是一个基于 TypeScript 构建的开发平台。它包括： 借助 Angular，无论单人项目还是企业级应用，你都能获得平台带来的优势。 这次发布的 Angular 14 版本主要包括以下新特性： 更严格的类型化的表单 Angular 14 为 Angular Reactive Forms 表单中实现了更严格的类型。 类型化的表单能够确保表单控件、组和数组中的值在整个 API 中都是类型安全的 —— 以实现更安全的表单，这一点在深度嵌套的复杂案例中非常重要。 使用独立组件简化 Angular Angular 独立组件的目标是通过减少对 ng module 的需求来简化 Angular 应用的编写。在 v14 中，独立组件处于开发预览状态，可以尝试使用一下，但是因为其接口还不太稳定，后续可能还会有变动。 命令行工具 Angular CLI 支持自动补全 Angular v14 的新 ng completion 功能引入了实时预输入的自动补全功能。 为确保所有 Angular 开发者都知道这项特性，CLI 将提示开发者在 v14 中的第一个命令执行期间选择加入自动完成功能。开发者也可以手动运行 ng completion，CLI 会自动进行设置。 Angular DevTools 支持离线使用 调试工具 Angular DevTools 扩展现已支持离线使用。对于 Firefox 用户，可在 Mozilla 附加组件中找到该扩展。 实验性 ESM 应用程序构建 最后，Angular v14 引入了一个实验性的基于 esbuild 的构建系统 ng build，用于编译纯 ESM 输出。如需在应用程序中尝试此操作，请更新浏览器构建器 angular.json： 简化页面标题可访问性 另一个最佳实践是确保应用程序的页面标题唯一地传达页面的内容。可以在定义路由的时候，加上 title 属性，指定每个页面的标题名称。 更多内置的改进 Angular v14 包括对最新的TypeScript 4.7 版本的支持，现在默认目标是ES2020，这允许CLI在不降级的情况下发布更小的代码。 详细内容请参见其官方博客：https://blog.angular.io/angular-v14-is-now-available-391a6db736af

是安吉尔品牌。1988年，安吉尔研制出第一台净水器，开创了中国净饮水行业。1992年，安吉尔公司正式注册成立。1993年，安吉尔又成功研制出第一台饮水机，再一次推动净饮水行业发展。

三大主流框架相比之前的框架来说，可以说是革命性的，主要是引入 响应式 和 组件化 两大特性 快速对比： 共同特点除了两大特性响应式和组件化，还有比如路由等等 2013年，在Google工作的尤雨溪，受到 AngularJs启发，开发出了一款轻量级框架，最初命名为 Seed，12月更名为Vue，代表生机勃勃的绿色logo。用过的人会发现，其实vue2.6.x 语法跟Angularjs非常像，当然vue解决了angularjs 很多弊端 2014年1月 正式对外发布0.8.0版本 2015.10 发布1.0.0是第一个里程碑，随着vue-router、vuex、vue-cli 相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。 2016.10 发布2.0.0 第二个重要里程碑，吸收了React的虚拟Dom方案，还支持服务端渲染，也是从这个版本开始，火起来的。 2019.02 发布2.6.x 版本，承前启后的版本，在这之后就是3.x.x了 2020.09.18 正式发布v3.0.0，更小更快，对typescript 更好的支持 2013年 Facebook开源了React，7月对外发布v0.3.0 目前最新的版本是18.1.x Angular2.0之前其实叫AngularJS（1.0-1.8），Angular指的是Angular 2.0及之后版本 AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后被 Google 收购，那个时候angularjs版本更新很慢到2016年angularjs版本才是1.7.*，更新速度比较慢, 目前最新的是1.8.x版本 2016年09月发布 Angular2.0，彻底从底层重构了，现在已经是分开两个产品，Angular2.0以后更新速度就快了，每个6个月就会升级一个大版本,目前最新是v13.3.x了

打开新页面方法有很多，angular自带路由就可以实现，正常添加路由事件给a标签加上target="_blank"打开新页面，实在不会window.open都行，加参数可以去路由设置比如{ path: "template/:appid:tiitle:edit:cid", component: AppTemplateManageComponent, canActivate: [OutErrorDirective] }window.open可以看下面这个示例window.open("/contract-view/" + tId + ":" + uuid + ":" + title + ":" + 0 + ":" + cid);

您不能(至少目前)在 Angular 表达式中使用 parseInt，因为它们不是直接计算的.引用文档:Angular 不使用 JavaScript 的 eval() 来计算表达式.相反，Angular 的 $parse 服务处理这些表达式.Angular 表达式无法访问全局变量，例如window、document 或 location.这个限制是有意的.它防止意外访问全局状态 - 一个常见的来源细微的错误.所以你可以在你的控制器中定义一个 total() 方法，然后在表达式中使用它:

《Angular权威教程》（[美] Ari Lerner）电子书网盘下载免费在线阅读链接：https://pan.baidu.com/s/1K2Jh3b5zr-yzNrxwFbbN2g 密码：wjy7书名：Angular权威教程作者：[美] Ari Lerner译者：Nice Angular社区豆瓣评分：8.2出版社：人民邮电出版社出版年份：2017-4页数：512内容简介：本书堪称Angular领域的里程碑式著作，涵盖了关于Angular的几乎所有内容。对于没有经验的人，本书平实、通俗的讲解，递进、严密的组织，可以让人毫无压力地登堂入室，迅速领悟新一代Web应用开发的精髓。如果你有相关经验，那本书对Angular概念和技术细节的全面剖析，以及引人入胜、切中肯綮的讲解，将帮助你彻底掌握这个框架，在自己职业技术修炼之路上更进一步。作者简介：Ari Lerner全栈工程师，拥有多年Angular经验，自办并运营Angular电子报ng-newsletter.com，在著名硅谷工程师培训学校Hack Reactor担任AngularJS讲师。Fullstack.io创始人。Felipe CouryGistia Labs联合创始人兼CTO。Nate Murray全栈工程师，曾任职于IFTTT，拥有数据挖掘和增量Web服务等方面的背景。Carlos TabordaGistia Labs联合创始人兼主管。

我们在用angular-cli创建angular项目时，会默认生成一个environment文件 里面会有两个文件 这两个文件都有一个production参数，为是否是生产环境，想到这里就一目了然，我们打包后，生效的肯定是environment.prod.ts文件配置，值为true,实际我们在本地调试时，生效的是environment.ts文件，打包后会去自动替换成environment.prod.ts，其中的baseUrl参数是我们自定义添加的url地址，针对不同环境会自动调用对应的地址，我们本地环境中调试可以调用一下这个environmentts 启动服务后，我们请求下接口，发现默认的地址是 http://dev.test.com 我们需要打包，然后再看看这个baseUrl打印的是什么，打包的时候需要输入 ng build --prod -c production多环境的情况下，我们有多个url，让其自动切换，此时假如我还有个测试环境,那就需要再建一个environment.test.ts文件

angular.min.js 是压缩版的angular.js,主要是删除了注释，去除了所有的回车和空格，也对函数变量等做了缩写处理，在使用上没有任何区别，但是压缩版比较小，在正式环境中，越小的js文件，可以保证网站越快的被打开

run方法用于初始化全局的数据，仅对全局作用域起作用。举个栗子吧：<script type="text/javascript"> var m1 = angular.module("myApp",[]); m1.run(["$rootScope",function($rootScope){ $rootScope.name = "hello"; }]); console.log( m1 );</script>

过时了 现在用Angular 而不是 angularjs Angular2 以后都用脚手架了 并且用typescript写了

Npm 装过angular了，但是用ng命令提示未安装是设置错误造成的，解决方法为：1、在安装angular前，先安装Node.js。2、在电脑上找到【运行】功能并点击，打开运行面板，如图。3、在运行面板中，输入【cmd】，如图。4、打开命令提示符窗口，输入命令：npm install -g @angular/cli。5、按回车键，开始安装angular，需要等待一会，安装完成后会在最下面显示angular的版本信息。6、angular安装完成后，输入命令：ng help ，检查angular是否安装成功，出现如下图所示信息就说明angular安装成功了。

angular可以异步渲染亦可同步渲染。根据查询相关公开信息：同步是阻塞模式，异步是非阻塞模式，均可在angular中执行。

您好，Angular.js 优点：1. 模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；2. 是一个比较完善的前端MVC框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能；3. 自定义Directive，比JQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，我们可以通过阅读源代码来找到某些我们需要的东西，如：在directive使用 $parse；4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助，我们的产品 Worktile 让工作更简单 从上线到目前，UI变化很大，在摸索中迭代产品，但是js的代码基本上很少改动。缺点：1. 验证功能错误信息显示比较薄弱，需要写很多模板标签，没有JQuery Validate方便，所以我们自己封装了验证的错误信息提示，详细参考 why520crazy/w5c-validator-angular · GitHub ；2. ngView只能有一个，不能嵌套多个视图，虽然有 angular-ui/ui-router · GitHub 解决，但是貌似ui-router 对于URL的控制不是很灵活，必须是嵌套式的（也许我没有深入了解或者新版本有改进）；3. 对于特别复杂的应用场景，貌似性能有点问题，特别是在Windows下使用chrome浏览器，不知道是内存泄漏了还是什么其他问题，没有找到好的解决方案，奇怪的是在IE10下反而很快，对此还在观察中；4. 这次从1.0.X升级到1.2.X，貌似有比较大的调整，没有完美兼容低版本，升级之后可能会导致一个兼容性的BUG，具体详细信息参考官方文档 AngularJS ，对应的中文版本：AngularJS5. ng提倡在控制器里面不要有操作DOM的代码，对于一些JQuery 插件的使用，如果想不破坏代码的整洁性，需要写一些directive去封装一下JQ插件，但是现在有很多插件的版本已经支持Angular了，如：jQuery File Upload Demo6. Angular 太笨重了，没有让用户选择一个轻量级的版本，当然1.2.X后，Angular也在做一些更改，比如把route，animate等模块独立出去，让用户自己去选择。

使用npm命令安装。安装angular14是使用npm命令安装。在上一个Angular13的成功之后，Angular14终于面世了。基于类型脚本的web应用程序框架是谷歌下一个重要的发行版。