前言 有时不得不面对一些需要在组件中直接操作DOM的情况，如我们的组件中存在大量的CheckBox，我们想获取到被选中的CheckBox，然而这些CheckBox是通过循环产生的，我们无法给每一个CheckBox指定一个ID，这个时候可以通过操作DOM来实现。angular API中包含有viewChild，contentChild等修饰符，这些修饰符可以返回模板中的DOM元素。 指令中的DOM操作 @Directive({selector: p }) export class TodoDirective{constructor(el: Element...
TemplateRef在介绍 TemplateRef 前，我们先来了解一下 HTML 模板元素 - <template> 。模板元素是一种机制，允许包含加载页面时不渲染，但又可以随后通过 JavaScript 进行实例化的客户端内容。我们可以将模板视作为存储在页面上稍后使用的一小段内容。 在 HTML5 标准引入 template 模板元素之前，我们都是使用 <script> 标签进行客户端模板的定义，具体如下： <script id="tpl-mock" type="text/template"><span>I am span in mock ...
结构指令是什么？结构指令通过添加和删除 DOM 元素来更改 DOM 布局。Angular 中两个常见的结构指令是 *ngIf 和 *ngFor 。 了解 * 号语法* 号是语法糖，用于避免使用复杂的语法。我们以 *ngIf 指令为例：(图片来源：https://netbasal.com/) Angular 把 host (宿主元素) 包装在 template 标签里面Angular 将 ngIf 转换为属性绑定 - [ngIf]创建结构指令首先，让我们了解如何创建一个结构指令。 接下来我们将要实现一个简单的 ngIf 指令...
Angular指令 定义一个指令的方法非常简单，只需要调用`directive`方法即可: var app=angular.module(myapp,[]);app.directive(name,fn)1. 基础指令var app=angular.module(myapp,[]);app.run(function($templateCache){$templateCache.put(cache,<h3>模板内容来源于缓存</h3>)});app.directive(tsHello,function(){return{restrict:EAC,template:<h3>Hello,directive</h3>}})app.directive(tsTplfile,function(){return{restrict:E...
scope是什么？ 大家都知道在AngularJS 中作用域是一个指向应用模型的对象，它是表达式的执行环境。作用域有层次结构，这个层次和相应的 DOM 几乎是一样的。作用域能监控表达式和传递事件。 在 HTML 代码中，一旦一个 ng-app 指令被定义，那么一个作用域就产生了，由 ng-app 所生成的作用域比较特殊，它是一个根作用域（$rootScope），它是其他所有$Scope 的最顶层。 除了用 ng-app 指令可以产生一个作用域之外，其他的指令如 ng-co...
前言 最近在做一个项目改版，第一次在项目中真正使用Angular,和平时自己写写小demo,做做练习的感觉还是非常不同的，感觉非常的新鲜。有几个指令是经常用到的，这里由于这几个有点共性，所以一起介绍一下ng-if,ng-show/ng-hide,ng-switch 这几个指令。下面来看看详细的介绍： 共性 1.这里个指令都是Angular框架提供给我们的设置页面内容显示和隐藏的方法，使用起来非常方便，尤其是做业务逻辑。 2.都是通过一个表达式...
本文主要介绍的是Angular.JS内置服务$http对数据库的增删改操作的相关内容，分享出来供大家参考学习，下面来看看详细的介绍： 一、使用$http查询MySQL数据angular.module(app,[]) .controller(MyCtrl,function ($scope,$http) {$http.get(http://127.0.0.1:80/user/getUsers).success(function (resp) {console.log(resp);}).error()//jQuery/*$.get(url,function (data) {});*/ })对应的后台Java代码：public void getUsers(){Lis...
1.新建uiBootstrap.html页面，引入依赖的js和css类库 2.新建uiBootstrap.js文件，定义一个uiModule 模块，引入依赖的模块 /*** Created by zhong on 2015/9/7.*/ var uiModule = angular.module("uiModule",["ui.bootstrap","ui.router"]); });3.定义dialog弹出窗口的模板 4.定义一个 UiController，并声明一个用于打开dialog弹出框的函数openDialog uiModule.controller("UiController",function($scope,$modal){ //打开dialog的函...
本文实例讲述了AngularJS开发教程之控制器之间的通信方法。分享给大家供大家参考，具体如下： 一、指令与控制器之间通信，无非是以下几种方法： 基于scope继承的方式 基于event传播的方式 service的方式（单例模式） 二、基于scope继承的方式： 最简单的让控制器之间进行通信的方法是通过scope的继承。假设有两个控制器Parent、Child，Child 在 Parent 内，那Child 可以称为控制器Parent的子控制器，它将继承父控制器Parent的scope...
本文实例讲述了AngularJS入门教程之Helloworld示例。分享给大家供大家参考，具体如下： 什么是AngularJs？ angularjs是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用数据绑定和依赖注入，它使你不用再写大量的代码了。这些全都通过浏览器端的javascript实现，这也使得它能够完美地和任何服务器技术结合。 AngularJS简单的Hell...
本文实例讲述了AngularJS路由机制ngRoute。分享给大家供大家参考，具体如下： 引言 在我们介绍路由之前我们首先谈一下SPA，所以SPA就是我们现在经常说的单页应用single page APP，为了实现无刷新的视图切换我们之前的做法就是利用AJAX从后取出数据然后渲染在前台页面HTML中，但是AJAX有一个致命的缺点就是不能实现浏览器的后退按钮失效，为了解决这个问题我们通常使用hash，监听hashchange事件来进行视图切换，另一个方法是用HTML5...
本文实例讲述了AngularJS的MVC架构。分享给大家供大家参考，具体如下： MVC应用程序架构最早于1970年起源于Smalltalk语言，后来在桌面应用程序开发中使用较为广泛，如今在WEB开发中也非常流行。MVC的核心思想是將数据的管理（Model）、业务逻辑控制（Controller）和数据的展示（View）分离开来，使程序的逻辑性和可维护性更强。 对于AngularJS应用来说，视图（View）是DOM（文档对象模型），你可以理解为就是HTML页面。控制器（Con...
本文简单讲述了AngularJs环境搭建+创建应用的方法。分享给大家供大家参考，具体如下： 概述 AngularJS是Google工程师研发的一款JS框架，官方文档中对它的描述是，它是完全使用JavaScript编写的客户端技术，同其他历史悠久的Web技术（HTML，CSS等）配合使用，使得Web开发变得更简单、更高效。它是笔者用过的比较有特色的一款框架，以HTML作为模版语言并扩展HTML属性，使得应用组件开发保持高度的清晰和一致。本系列文章將以实际的案...
本文实例讲述了AngularJS表单校验用法。分享给大家供大家参考，具体如下： 表单数据的校验对于提高WEB安全性意义不大，因为服务器接收到的请求不一定来自我们的前端页面，有可能来自别的站点，黑客可以自己做一个表单，把数据提交到我们的服务器（即跨站伪造请求），这样就绕过了前端页面的校验。如果对HTTP协议比较熟，甚至还可以在程序中手动构造一段HTTP请求发到服务器，所以服务器端的数据校验绝对是必不可少的。 WEB前端数据校...
本文实例讲述了AngularJS多视图切换用法。分享给大家供大家参考，具体如下： 在AngularJS应用中，我们可以將html碎片写在一个单独的文件中，然后在其他页面中將该段碎片加载进来。如果有多个碎片文件，我们还可以在控制器中根据用户的操作动态的加载不同的碎片，从而达到切换视图的效果。 先来看看笔者写好的一个案例吧：这两首词实际上是两个html碎片，分别写在page1.html和page2.html。下面是这两个文件的内容： <!--page1.html内...