Angular2 为我们提供了名为Title的Service用于修改和获取页面标题，但是如果只是能够在每个页面的ngOnInit方法中为每个页面设置标题岂不是太low了，不符合Angular2高(zhuang)大(bi)的身影。我们想要的结果是在页面改变时能够动态地改变页面标题，如此最好的解决方案就是组合使用Router事件和Title Service。 Title Service 使用Service自然首先要将其引入，不过要注意Title Service并不在@angular/core中，而是在@angular/platform...
前言 众所周知Angular响应式表单相比较模板驱动表单更大操作性、更易测试性。因此，我更推荐这类表单创造方式。 当一个用于修改用户信息的表单，数据的来源总是来自远程；而对于一个 FormGroup 的创建总在 ngOnInit 中完成。因此，这里会有一个表单更新值的问题。 而通常我们会透过 FormGroup 下的三种方式 setValue、patchValue、reset 将值写入表单当中。 当然，或许我说的这三种方式时你压根就没有做过，那说明在表单上你依赖的...
本文实例为大家分享了Angular模板表单校验的方法，供大家参考，具体内容如下 1. 创建指令 ng g directive directives/mobileValidator 2. html <form #myForm="ngForm" (ngSubmit)="onSubmit2(myForm.value, myForm.valid)"><div><h3>登录</h3></div><div>用户名：<input ngModel required name="username" type="text" (input)="onMobileInput(myForm)"></div><div [hidden]="mobileValid || moblieUntouched"><div [hidden]="!m...
刚学习angularJS，于是练习写了一个类似于购物车的全选/取消全选的功能，主要实现的功能有： 1、勾选全选checkbox，列表数据全部被勾选，取消同理，用ng-model实现双向绑定； 2、选中列表中的所有checkbox，全选也会被勾选；（这里我想到的方法是给每一个对象增加checked字段，然后勾选触发echoChange（）函数，用了一个cc变量计算当前checked为true的个数，然后再判断被勾选个数与数组长度是否相等，相等则证明全部被勾选，于是全...
本文将介绍如何亲手来完成一个yeoman的generator，以实现快速构建最适合自己的项目。 本文将实现的generator起名为ngtimo，依照yeoman的命名规矩就叫做generator-ngtimo，是笔者这周末一晚上加一上午参考着yeoman官方给出的几个generator(generator-generator、generator-node)给强行催生出来的，目前也已经在github上托管并发布到npm。 实现效果 首先确保已经全局安装了yeoman，然后再全局安装generator-ngtimo: npm install -g g...
引言 模板驱动表单相比较响应式表单可以少更少的代码做同样的事情，可也损失了自由度与更易测试，当然很多人并不在乎啦。 所以我相信很多人在编写Angular不自由自主去更倾向于模板驱动表单的写法。 表单最核心的是校验体验，在Angular中简直就是发挥到了极致，比如：required、min、max、pattern 等，这些原本是HTML DOM元素中的表述，而Angular默认实现了一整套的校验指令，比如：required 对应 RequiredValidator。 然后很多时候...
AngularJS中对cookie的操作封装了一个单独的模块，模块名为ngCookies，若想使用需在页面中先引入angular-cookies.js： <script src="js/angular.min.js"></script> <script src="js/angular-cookies.js"></script>然后將ngCookies模块注入到我们自定义的模块的依赖模块中： var app = angular.module("myApp",[ngCookies]);ngCookies模块中有两个cookies读写相关的服务：$cookies和$cookieStroe。无论使用哪种都要先将其注入到控制...
前言 前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。最近在学习Angular.js，将自己学习的一些经验技巧分享给大家，下面本文将给大家介绍关于Angular.js中数组操作的相关资料，话不多说了，来一起看看详细的介绍。 1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app 2:placeholder, 3:{}中加入代码“：true|false”,使用逗号隔开，可以...
本文介绍了angular中实现li或者某个元素点击变色的两种方法，分享给大家，希望对大家有帮助先说一种最直接了当的不需要js控制。 方法一：直接在用ng-class就可以控制：<p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华</p> <p ng-click="state=2;" ng-class="{active:state==2}">忧伤说笑</p> 在style里面设置如下：<style type="text/css">.active{color:red;} </style> 这样就会点哪个哪个变色了。 方法二：style同...
准备前提：已经搭建好angular-cli环境，还未搭建好的请参见//www.gxlcms.com/article/114254.htm 1 新建一个文件夹 该文件夹用来存放所有利用angular-cli搭建的web前端项目2 启动命令窗口，并进入该文件夹3 创建新项目 ng new 项目名称 注意：项目名称最好全部用字母3.1 到文件夹中去查看项目是否成功创建4 通过文本编辑器打开src文件夹下的index.xml文件 三少使用sublime打开的效果如下4.1 代码详解这就是一个html文件 我们的应用...
前言 相信大家在一开始用angular做项目的时候，一定碰到过$scope.$apply()方法，表面上看，这像是一个帮助你进行数据更新的方法，那么，它为何存在，我们又该如何使用它呢。下面话不多说，来一起看看详细的介绍吧。 JavaScript执行顺序 JavaScript单线程操作，代码按照代码片段的顺序来之行，每个代码块从运行到结束都不会被打断，这也是为什么会发生浏览器阻塞的情况，往往是有一部分在运行，而导致其他所有的代码段冻结。 每当有...
最近在做项目时，遇到了需要用到多选按钮选中触发事件的功能，因此我查找了一下AngularJS的提供的指令，但是没有发现相应的指令。而一个看起来很像的指令就是ng-checked，但是这个指令是用来代替标签里面checked属性的，所以也用不了。因此我就自己动手试着写一个这样的指令，相应的代码如下： <form name="test_form" ng-controller="TestCtrl"> <input type="checkbox" name="a" ng-model="a" id="check" ng-checking="say()"/> ...
前言 本文主要给大家介绍的是关于利用angular.js + require.js构建模块化单页面应用的方法，分享出来供大家参考学习，需要的朋友们下面来一起看看详细的介绍吧。 AngularJS描述: angularjs是可以用来构建WEB应用的，WEB应用中的一种端对端的完整解决方案。通过开发者呈现一个更高层次的抽象来简化应用的开发。最适合的就是用它来构建一个CRUD应用，它提供了非常方便的且统一高效的解决方案，其数据绑定、基本模版标识符、表单验证、...
本文介绍了angular动态删除ng-repaeat添加的dom节点的方法，分享给大家供大家参考，具体如下：通过点击删除按钮删除数据库信息以及当前行html代码如下: <div class="row"><div class="col-xs-12"><!-- PAGE CONTENT BEGINS --><div class="row"><div class="col-xs-12"><table id="simple-table" class="table table-bordered table-hover"><thead><tr><th>姓名</th><th>学历</th><th class="hidden-480">专业</th><th><i class="a...
前言 AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。 本文是接上篇，angular 实战部分，angular比较适合spa项目，这里不借助任何seed和构建工具，直接从零搭建，基本的angular项目结构大致包含如下几个部分：1）app.js 入口2）index.html html...