该指令用于基于已有的 TemplateRef 对象，插入对应的内嵌视图。在应用 NgTemplateOutlet 指令时，我们可以通过 [ngTemplateOutletContext] 属性来设置 EmbeddedViewRef 的上下文对象。绑定的上下文应该是一个对象，此外可通过 let 语法来声明绑定上下文对象属性名。 友情提示：若 let 语法未绑定任何属性名，则上下文对象中 $implicit 属性，对应的值将作为默认值。NgTemplateOutlet 指令语法代码如下: <ng-container *ngTemplateO...
对于angular2中的Input和Output可以和AngularJS中指令作类比。 Input相当于指令的值绑定，无论是单向的(@)还是双向的(=)。都是将父作用域的值“输入”到子作用域中，然后子作用域进行相关处理。 Output相当于指令的方法绑定，子作用域触发事件执行响应函数，而响应函数方法体则位于父作用域中，相当于将事件“输出到”父作用域中，在父作用域中处理。 看个angular2示例吧，我们定义一个子组件，获取父作用域的数组值并以列表形式显...
NgIf 指令作用ngIf 指令用于根据表达式的值，在指定位置渲染 then 或 else 模板的内容。 then 模板除非绑定到不同的值，否则默认是 ngIf 指令关联的内联模板。else 模板除非绑定对应的值，否则默认是 null。NgIf 指令语法简单形式<!--语法糖--> <div *ngIf="condition">...</div> <!--Angular 2.x中使用template--> <ng-template [ngIf]="condition"><div>...</div></ng-template>使用else块<div *ngIf="condition; else elseBlock...
什么是路由？路由是AngularJS构建单页面应用的基础。 路由，就是网络数据或者请求进行分发的一个网络组件。路由就是一个用于请求URL分发和跳转的一个应用组件，Angular中通过$routeProvider路由服务提供者进行核心的配置处理。 ng路由ng 路由是 AngularJS 官方提供的一种简单的路由操作。 ng 路由主要分三个组成部分：路由指令、路由服务、路由服务提供者 路由指令:ng-viewngView指令主要用于将路由指向的页面渲染到当前页面的布局...
AngularJS 路由 是通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。因此在设置好路由规则后，为html页面的a标签设置href路由链接切换不同的视图。Angular1.6版本之前通常有href=“#...”或href=“#/...”这两种写法，结果这两种写法在Angular1.6中没有任何反应。结果查看了下浏览器地址栏，默认视图链接竟然显示“#!/..”,是的，中间多加了个！号。AngularJS升级到了1.6版本后，里面多了很多/#!/的改...
在项目开发中拿到的数据是这样的，要循环遍历出来。可是在ng2中好像不能直接遍历Objectdatas: any = [{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},{ num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"},{ num: 1, date: "2017-04-12", sellNum: "1231234...
要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递，同时使用$on来接收事件并作出响应。 broadcast译为广播，即上级传递下级。 示例代码： <script src="../angular.js"></script> <script> angular.module("app", []).controller("child", function($scope) {$scope.$on("parentChange", function(e, m) {$scope.change = "changed";$scope.child = m;})}).controller("parent", function($scope) {$sco...
在模板html标签中增加i18n<h1 i18n>Hello world!</h1>使用ng命令产生xlf格式的message.xlf文件 $ ng xi18n --output-path src/i18n命令执行后，生成 src/i18n/messages.xlf 文件 <?xml version="1.0" encoding="UTF-8" ?> <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"><file source-language="en" datatype="plaintext" original="ng2.template"><body><trans-unit id="5816217f424111ae4c91dd72ee1db0ae2...
1、定义 factory.js 文件 var appFactorys = angular.module(starter.factorys, []) appFactorys.factory(HouseFactory, function () { var houseList = [ { id: 0, title: 急售北二环 小区配套齐全 精装修, price: 88.0, describe: 2室1厅 120平米, img: img/ben.png }, { id: 1, title: 急售东二环 小区配套齐全 精装修, price: 88.0, describe: 2室1厅 120平米, img: img/max.png }, { id: 2, title: 急售南二环 小区配套齐全 ...
在使用Angular2+中，经常会想快速的去选择DOM上的某个元素，如果是刚上手Angular，有可能直接就使用原生DOM操作或者导入jQuery再进行DOM操作，既然都使用了Angular了，有没有更好的方法呢？答案是肯定的。 通过ElementRef先上代码： import {Component, ElementRef, OnInit} from @angular/core; @Component({selector: app-root,templateUrl: ./app.component.html,styleUrls: [./app.component.css] }) export class AppComponen...
【this详解】1、谁最终调用函数，this指向谁。 ① this指向的，永远只可能是对象！！！！！！ ② this指向谁，永远不取决于this写在哪！！而是取决于函数在哪调用。 ③ this指向的对象，我们称之为函数的上下文context，也叫函数的调用者 2、※※※※※this指向的规律(与函数调用的方式息息相关)：this指向的情况，取决于函数调用的方式有哪些： ① 通过函数名()直接调用：this指向window ② 通过对象.函...
bower安装和使用 入门级安装 直接上手 准备工作： 安装nodejs通过nodejs 安装cnpm详细过程 1.安装完nodejs 执行node -v 查看版本号 项目需求（建议）4.4.7 2.执行 cnpm -v (淘宝镜像) 查看版本号 3.执行全局命令：cnpm i -g bower 进行全局安装 4.在电脑本地磁盘自定义项目文件夹，通过CMD 执行 e: 、 cd webApp, （本例项目在e盘下的webApp目录） 5.进入项目目录 执行 bower init 初始化bower,（包括 name 描述 关键词 之后全是执...
在项目开发中我们经常会遇到图片轮播的功能点： 如果我们开发人员自己原生手写，将会花费很多的时间，最终得不偿失。 接下来就详细说说如何使用angular-ui发热图片轮播模块，并且将它写成一个指令（便于复用） 一如既往的我们项目中使用时requireJS进行js代码的编译 准备工作: 1):引入angularJS , ui-bootstrap-tpls-1.3.2(我使用的是1.3.2版本的) 第一步：自己写一个指令（命名为picchange） 说明：指令控制器中的代码都是angual...
准备工作： （1）一如既往的我还是使用了requireJS进行js代码的编译 （2）必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css.... 首先抛出几个问题： a）:何时回用到分页 (当后端返回的数据过多，一页装不满时，我们必须要采取分页的效果，给用户良好的视觉效果) b）:分页一般要传递哪些数据 （总的数据数量，每页固定显示多少条数据，当点击分页时候返回当前的页码.......这三条是必须的） 第一步：先完成指令的封...
本文主要给大家介绍了Angular.Js过滤器filter与自定义过滤器filter的相关内容，分享出来供大家参考学习，下面来看看详细的介绍： 一、AngularJS的filter过滤器：uppercase|lowercase:大小写转换过滤json:json格式过滤date:日期格式过滤number:数字格式过滤currency:货币格式过滤filter:查找limitTo：字符串对象截取orderBy:对象排序<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Angular基础</titl...