如果我们具有下面的DOM结构：<div ng-controller="MyCtrl"> <loader>滑动加载</loader> </div> 同时我们的控制器具有如下的签名： var myModule = angular.module("MyModule", []); //首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 myModule.controller(MyCtrl, [$scope, function($scope){ $scope.loadData=function(){ console.log("加载数据中..."); } }])...
在一些使用angular框架的大型项目中，似乎有很多个controller，而每个controller都有自己的$scope. 1、$rootscope$rootScope顶级作用域，也叫根作用域，类似于window，window的属性在任何子作用域都可以访问。$rootScope则是所有controller进行数据沟通的中间域，即在$rootScope中的数据，在每个controller中都能通过$rootScope.xxx获取到。2、$scope(1)作用$scope 就在视图和控制器之间建立了一个桥梁,基于作用域视图在修改数据时...
本文呢主要给大家介绍的关于Angular2模块和组件的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： 一、初步了解模块和组件 之前给大家介绍了构建工程，这篇文章简单讲述一下Angular2中的模块和组件。app文件夹下有五个文件，其中，app.component.spec.ts应该是和模块测试有关的文件，目前不用管它。剩下的四个文件就是典型的模块+组件的文件组成模式。Angular2应用由模块和组件构成，每个模块这样明明name.module.t...
本文实例讲述了AngularJS获取json数据的方法。分享给大家供大家参考，具体如下： 学习了这么多天的AngularJS，今天想从实战的角度和大家分享一个简单的Demo--用户查询系统，以巩固之前所学知识。功能需求需要满足两点 1.查询所有用户信息，并在前端展示 2.根据id查询用户信息，展示在前端。Ok，需求很简单，那么我们就开始实现所提的功能需求。 代码框架 前端的代码通常包含三部分：html, css, 和JavaScript，我们使用html编写视图...
开发中遇到的问题 在开发中遇到一个这样的问题，代码不便透露，这里用简单的例子还原一下问题所在：有三个组件，第一个是用来展示Todo列表的组件TodoComponent，Todo是个类，包含id和name属性。 @Component({selector: todo-list,template: `<p *ngFor=let item of todos>{{ item.name }}</p>`, }) export class TodoComponent{@Input() todos: Todo[];public getTodos():Todo[]{return this.todos;} }第二个组件同样是一个Todo列表...
前言 有时不得不面对一些需要在组件中直接操作DOM的情况，如我们的组件中存在大量的CheckBox，我们想获取到被选中的CheckBox，然而这些CheckBox是通过循环产生的，我们无法给每一个CheckBox指定一个ID，这个时候可以通过操作DOM来实现。angular API中包含有viewChild，contentChild等修饰符，这些修饰符可以返回模板中的DOM元素。 指令中的DOM操作 @Directive({selector: p }) export class TodoDirective{constructor(el: Element...
前言 有时候需要根据URL来渲染不同组件，我所指的是在同一个URL地址中根据参数的变化显示不同的组件；这是利用Angular动态加载组件完成的，同时也会设法让这部分动态组件也支持AOT。 动态加载组件 下面以一个Step组件为示例，完成一个3个步骤的示例展示，并且可以通过URL userstep=step-one 的变化显示第N个步骤的内容。 1、resolveComponentFactory 首先，还是需要先创建动态加载组件模块。 import { Component, Input, ViewConta...
TemplateRef在介绍 TemplateRef 前，我们先来了解一下 HTML 模板元素 - <template> 。模板元素是一种机制，允许包含加载页面时不渲染，但又可以随后通过 JavaScript 进行实例化的客户端内容。我们可以将模板视作为存储在页面上稍后使用的一小段内容。 在 HTML5 标准引入 template 模板元素之前，我们都是使用 <script> 标签进行客户端模板的定义，具体如下： <script id="tpl-mock" type="text/template"><span>I am span in mock ...
本文实例讲述了AngularJS基于factory创建自定义服务的方法。分享给大家供大家参考，具体如下： 为什么要创建自定义服务？ 很简单，不想让控制器显得过于“臃肿”，而且服务可复用。针对性强，每个服务对应不同的功能。 这里介绍如何使用factory创建自定义服务，并且使用他。 例子1： <!--HTML--> <div ng-controller="showTheName"><h1 ng-bind="name"></h1> </div> /*js*/ var app = angular.module("routingDemoApp",[]); app.f...
今天学习angularjs自定义指令Directive。Directive是一个非常棒的功能。可以实现我们自义的的功能方法。 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Admin"。 在网页上放一个文本框和一个铵钮：<form id="form1" name="form1" ng-app="app" ng-controller="ctrl" novalidate><input id="Text1" type="text" ng-model="Account" is-Administrator/><br /><input id="ButtonVerify" type="button" value="Verify" ng...
$interval window.setInterval的Angular包装形式。Fn是每次延迟时间后被执行的函数。 间隔函数的返回值是一个承诺。这个承诺将在每个间隔刻度被通知，并且到达规定迭代次数后被取消，如果迭代次数未定义，则无限制的执行。通知的值将是运行的迭代次数。取消一个间隔，调用$intreval.cancel(promise)。 备注：当你执行完这项服务后应该把它销毁。特别是当controller或者directive元素被销毁时而$interval未被销毁。你应该考虑到在适...
结构指令是什么？结构指令通过添加和删除 DOM 元素来更改 DOM 布局。Angular 中两个常见的结构指令是 *ngIf 和 *ngFor 。 了解 * 号语法* 号是语法糖，用于避免使用复杂的语法。我们以 *ngIf 指令为例：(图片来源：https://netbasal.com/) Angular 把 host (宿主元素) 包装在 template 标签里面Angular 将 ngIf 转换为属性绑定 - [ngIf]创建结构指令首先，让我们了解如何创建一个结构指令。 接下来我们将要实现一个简单的 ngIf 指令...
前言 在开始本文之前，首先要说明我们使用的angular的版本是1.5.0，因为不同版本的表现结果不是那么相同。 首先我们应该了解到，在angular指令的选项中，有一项是transclude，这个选项有三种值：false，true，object；那这三种值分别表示什么，该如何选择？ 下面我们来详细的说明一下。 transclude字面意思就是嵌入，也就是说你需不需要将你的指令内部的元素（注意不是指令的模板）嵌入到你的模板中去，默认是false。如果你需要这种...
最近在学习angular(AngularJS 2)，根据教程使用angular-cli新建项目，然而在添加JQuery和Bootstrap第三方库时遇到了问题...初试我最初的想法是直接将相对路径写到index.html即可，如下： <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" /> <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"/> <script type="text/javascript" src=...
ui-route相比于angularjs的原生视图路由更好地支持了路由嵌套，状态转移等等。随着视图不断增加，打包的js体积也会越来越大，比如我在应用里面用到了wangeditor里面单独依赖的jquery就300多k。异步加载各个组件就很有必要。在这里我就以ui-route为框架来进行异步加载说明。 首先看一下路由加载文件 angular.module(webtrn-sns).config([$stateProvider, function ($stateProvider) {$stateProvider.state({name: home.message,url:...