ANGULAR - 技术教程文章
AngularJS控制器【代码】
AngularJS 控制器 控制 AngularJS 应用程序的数据。AngularJS 控制器是常规的 JavaScript 对象。即指令ng-controller；例子：<div ng-app="myApp" ng-controller="personCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br><br> 姓名: {{fullName()}} </div><script>var app = angular.module(‘myApp‘, []); app.controller(‘personCtrl‘, function($scope) {$scope.fi...
Angular JS(一)【代码】
Angular JS就是俗称的Angular 1Angualr 开发的核心就是视图和业务操作数据分离开来。（一）Angular JS 指令简述Angular中把具有特殊作用的标签属性称为指令，这些指令全部以ng打头ng-app指令可以指定当前视图由哪个模块管理，即angular指令的覆盖范围。 <body ng-app="app"> <div>{{name}}</div><body><script> var app = angular.module("app",[ ]);</script> (二)控制器——创建与关联控制器是我们编写业务逻辑的入口，在这...
angular限制输入框整数和小数的指令【代码】
(function () {‘use strict‘;angular.module(‘common‘).directive(‘numFormat‘, function () {return {restrict: ‘A‘,require: ‘ngModel‘,scope: {isInt: ‘@‘,decimal: ‘@‘,},controller: [‘$scope‘, function ($scope) {}],link: function (scope, $element, $attr, ngModelCtrl) {function format() {if (ngModelCtrl.$modelValue === null) {ngModelCtrl.$setViewValue(null);ngModelCtrl.$render();} elseif (...
ionic之angular拦截器【代码】
ionic作为应用，肯定和服务器有数据交换，分散处理api太繁琐，所以一般用拦截器来集中处理。 主要由以下几个方面的应用： 服务器地址注入错误处理token注入日志处理无token时跳转至登录页面 ... 有四个方法 request: function(config) requestError: function(config) response: function(response) responseError: function(response) 基本看方法名称就知道其意义。具体的用法、写法请参考：http://my.oschina.net/ilivebox/blo...
AngularJs(五）从Controller控制器谈谈$scope作用域【代码】【图】
大纲 用于简单示例和简单应用的controller 应用多个controller应用的作用域问题controller继承作用域问题Controller的创建 AngularJs controller使用无处不在，在里代码演示比较简单的创建工作。<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="exampleApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>App</title><script src="angular.js"></script><li...
angular指令ng-class巧用【代码】
什么是ng-classng-class最大的妙用就是可以根据你的逻辑表达式。来添加或移除对应的classng-class是angular.js里面内置的一个指令。项目中，有时候，我们需要根据需求来切换不同的classfunction bb($scope){$scope.ss="className"; } <div class="{{ss}}"></div>这种方式是scope变量绑定方式，个人觉得妙用谈不上，还不如直接写class=什么的字符串方式，比较长用function bu($scope) { $scope.ss= true; }<div ng-class="{true: ...
AngularJs我的学习整理（不定时修改）【图】
最近一月份的日子，学习了AngularJs，还只是刚刚入门而已。了解了基本的语法规则以及很简单的应用。仔细想想，学习AngularJs的时间大概半个月的时间，每天花在AngularJs上两三个小时。在短短的学习入门时间，也想简简单单地做一个阶段性的总结。下一次的学习应该是进阶。计划准备在NodeJs入门之后进阶AngularJs和NodeJs。AngularJs是什么东东？AngularJS 使得开发现代的单一页面应用程序变得更加容易（单一页面应用程序SPAs：Singl...
[Angular] Component architecture and Reactive Forms【代码】【图】
It it recommeded that when deals with form component, we can create a container component to hold state, and then create a stateless component to enpower the form.For example:In the example has two components, one is container component ‘meal.component.ts‘, another is statless component ‘meal-form.component.ts‘. For the container component, it talks to service:import {Component} from ‘@angula...
AngularJS中处理多个promise【代码】
在使用AngularJS中处理promise的时候，有时会碰到需要处理多个promise的情况。最简单的处理就是每个promise都then。如下： var app = angular.module("app",[]);app.controller("AppCtrl", function($q. $timeout){var one = $q.defer();var two = $q.defer();var three = $q.defer();$timeout(function(){one.resolve("one done");}, Math.random() * 1000)$timeout(function(){two.resolve("two done");}, Math.random() * 1000)...
Angular CLI 升级 6.0 之后遇到的问题【代码】
Angular CLI 1.7.4 在使用 ng build --prod 会构建失败，而 ng build 是正常的。比较好的解决办法是使用 ng build --prod --extract-license=false 或者 ng build --prod --no-extract-license。最近将 Angular CLI 升级到 6.X 之后，直接 ng build 会报以下错误，ng serve 也是如此。95% emitting LicenseWebpackPlugin(node:6252) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open 'D:\X\proj...
angular+bootstrap分页指令案例【代码】【图】
AngularJS中不仅内置了许多指令，而且开发人员也可以通过自定义指令来完成特殊操作，指令创建成功后可以到处复用。Web应用中的分页处理最为常见，我们可以将分页模块编写成一个可以复用的Angular指令，在使用时无需考虑指令的内部实现细节，像使用普通HTML元素一样简单。1：index.html<!DOCTYPE html><html ng-app="myApp"><head><title>TODO supply a title</title><meta charset="UTF-8"><meta name="viewport" content="width=d...
-_-#【Angular】依赖注入【代码】【图】
AngularJS学习笔记var BoxCtrl = function($scope, $element) { } var str = BoxCtrl.toString().replace(/\s/g, ‘‘).split(‘){‘)[0].split(‘(‘)[1] var arr = str.split(‘,‘) if (~arr.indexOf(‘$scope‘)) {console.log(‘$scope‘) } if (~arr.indexOf(‘$element‘)) {console.log(‘$element‘) } 原文：http://www.cnblogs.com/jzm17173/p/4205991.html
AngularJS【图】
原文：http://www.cnblogs.com/aliwa/p/6368534.html
[转]如何将Angular localhost:4200 改为IP
本文转自：https://blog.csdn.net/ygznx/article/details/78249118ust specify the IP in --host option like ng serve --host 192.16.1.1Now you can visit http://192.16.1.1:4200 in your browser and it will work下面是一个例子：ng serve --host 192.168.1.102 --port 4201.原文：https://www.cnblogs.com/freeliver54/p/9660569.html
Angular2 初学小记
1.与Angular1的异同 几乎完全不同（什么鬼~ 1）保留一些特性 表达式仍旧用{{}}。 2）属性指令变为驼峰式 ng-if ---> ngIf 3）ng-repeat被ngFor代替 4）ng-model ------> [(ngModule)] 注意符号 5）Angular2中，自带原始指令要加哈希前缀 # 6）Angular2新增了对移动端的设计 7）Angular2摒弃了1中的核心：$scope 8）Angular2使用zone.js来检测变化。 9）新增组件类component 可以说是取代了1中的controller： temp...
angular路由
//个人中心路由;angular.module(‘userApp‘).config([‘$stateProvider‘, ‘$urlRouterProvider‘,function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise(‘/collectRecord‘); $stateProvider.state("collectRecord", { //收藏记录 url: "/collectRecord", templateUrl: "collectRecord.html", controller: ‘collectRecordController‘ }).state("pushRecord", {...
AngularJS 1.x系列：AngularJS简介及第一个应用（2）【代码】
1. 安装AngularJS1.1 AngularJS官网 Github源码：https://github.com/angular/angular.js 官网：https://angularjs.org/1.2 npm安装AngularJSnpm install angular 原文：http://www.cnblogs.com/libingql/p/6919257.html
poj 2836 Rectangular Covering(状压DP）【代码】
Rectangular CoveringTime Limit: 1000MS Memory Limit: 65536KTotal Submissions: 1716 Accepted: 468Descriptionn points are given on the Cartesian plane. Now you have to use some rectangles whose sides are parallel to the axes to cover them. Every point must be covered. And a point can be covered by several rectangles. Each rectangle should cover at leasttwo points including those that fall on its bor...
angularJs中的checkboxs
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/angular-1.3.0.js" ></script> </head> <body> <div ng-app="hd" ng-controller="ctrl"> 游戏：<input type="checkbox" ng-model="data.game" ng-true-value="1" ng-false-value="0"/> 电影：<input type="checkbox" ng-model="data.video" ng-true-value="1" ng-false-value="0"/> {{data}} <div ng...
Angular js 简介
---恢复内容开始---1:通过 <script> 标签添加一个anjular.js 文件到 HTML 页面 ，（建议把脚本放到body元素的底部） AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。 2：常用的 angular js 的Directives(指令) ng-app：指令定义一个angular js 的应用程序。如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。 ng-model: 指令吧元素自（比如输入域的值）绑...
学习angularjs时遇到 XX is not a function
出现这个问题是因为在 angularJs 1.3 中 为了让 根节点上（rootScope）不再被挂上许多冗余的内容，所以禁止了直接在根上注册controller。 第一：以后不能直接以 function XXXcontroller （）{ code......}这样的方式直接注册监听器了。以后必须angular.module(‘phonecatApp‘, []).controller(‘PhoneListCtrl‘,function($scope) {}这样来将controller注册到对应的模型上。 第二: 在 ng-aap 中指定相对应的模型。如 之前：<ht...
Angular 2/4 多语言 国际化支持【代码】【图】
ngx-translate 包使用 1. 安装npm @ngx-translate/core --save npm @ngx-translate/http-loader 2. app.module.tsimport { BrowserModule } from ‘@angular/platform-browser‘; import { NgModule } from ‘@angular/core‘; import { FormsModule } from ‘@angular/forms‘; import { HttpModule, Http } from ‘@angular/http‘; import { TranslateModule, TranslateLoader } from ‘@ngx-translate/core‘; import { Tran...
Angular中路由的嵌套-父子路由【代码】【图】
场景Angular介绍、安装Angular Cli、创建Angular项目入门教程：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017 Angular新建组件以及组件之间的调用：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997通过以上搭建起Angular项目。Angular中的路由配置、路由重定向、默认选中路由：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106182994注：博客： https://blog.csdn.n...
angular 依赖注入【代码】【图】
依赖注入 依赖注入(DI)是一个经典的设计模式, 主要是用来处理组件如何获得依赖的问题。关于DI，推荐阅读Martin Flower的文章（http://martinfowler.com/articles/injection.html ）。 Angular注入器会负责创建angular组件，解决组件之间的依赖以及依赖注入等职责。使用依赖注入 依赖注入在angular应用代码中使用很频繁。我们可以在定义组件或者在模块的run和config块中使用。 - 可在angular组件(控制器、服务、过滤器、指令...
AngularJs之五【代码】
一：angularJs的事件。1.ng-click指令定义了AngularJS点击事件。<div ng-app="myapp" ng-controller="myctrl"><button ng-click="count=count+1">点赞</button><h1><span style="color:‘red">?</span>{{count}}</h1> </div> <script type="text/javascript">angular.module(‘myapp‘,[]).controller(‘myctrl‘,function ($scope) {$scope.count=0;}) </script>2.angularJs的事件方法<div ng-app="mapp" ng-controller="mctrl">...
AngularJs动态添加元素和删除元素【代码】
动态添加元素和删除元素//通过$compile动态编译htmlvar html="<div ng-click=‘test()‘>我是后添加的</div>";var template = angular.element(html);var mobileDialogElement = $compile(template)($scope);angular.element("#"+id).append(mobileDialogElement); // remove移除创建的元素var closeMobileDialog = function () {if (mobileDialogElement) {mobileDialogElement.remove();} 原文：http://www.cnblogs.com/SPHmomo/...
【开源】使用Angular9和TypeScript开发RPG游戏(20200410版)【代码】
源代码地址通过对于斗罗大陆小说的游戏化过程，熟悉Angular的结构以及使用TypeScript的面向对象开发方法。Github项目源代码地址RPG系统构造ver0.03 2020/04/10人物和其他RPG游戏类似，游戏里面的人物角色大致有这样的一些属性：生命值，魔法值（魂力），攻击力，防御力，速度。RPG游戏中的角色随着等级的提高，这些属性都会提升，属性提升的快慢则取决于资质，同时，由于在实际战斗中，会出现各种增益和光环效果，这些值都是动态变...
[转载]AngularJS入门教程00：引导程序【代码】
我们现在开始准备编写AngularJS应用——phonecat。这一步骤（步骤0），您将会熟悉重要的源代码文件，学习启动包含AngularJS种子项目的开发环境，并在浏览器端运行应用。进入angular-phonecat目录，运行如下命令：git checkout -f step-0 该命令将重置phonecat项目的工作目录，建议您在每一学习步骤运行此命令，将命令中的数字改成您学习步骤对应的数字，该命令将清除您在工作目录内做的任何更改。运行以下命令：node scripts/web-s...
【angularJS】Filter 过滤器【代码】
当从后台获取到的数据呈现到视图上时，此时可能需要对数据进行相应的转换，此时我们可以通过过滤器在不同页面进行不同数据的格式抓换，在AngularJS中有常见默认的过滤器，当然若不满足所需，我们可以自定义过滤器。AngularJS 过滤器可以用来格式化数据，过滤器能够用在表达式和指令中。使用一个管道字符（|）添加到表达式和指令中。默认过滤器列举AngularJS中常见的过滤器，如下：过滤器名称描述例子 currency money格式化 {{ p.pr...
Angular5强势来袭
Angualr是一款来自谷歌的开源的web前端框架，诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。 根据项目数统计angular（1.x 、2.x 、4.x、angular5.x）是现在网上使用量最大的框架。Angular5新增了很多新特性。 2015之前Angular1.x得到了广泛的应用，开发单页面应用无人能敌。2015年底Angular 2.0 发布了，彻底的颠覆了之前的版本，学习Angular2.0相当于重新学...