ANGULAR - 技术教程文章
angularjs学习笔记--组件、$http、$q、module【代码】
1-组件 创建组件，使用angularjs模块的conponent()方法，component(name,options);使用编译器注册组件定义，表示应用程序中的一个独立的UI组件。组件定义通常仅由模板和控制器组成。name为组件名，options为组件定义对象，其属性包括：controller（应该与新创建的作用域相关联的控制器构造函数或作为字符串传递的注册控制器的名称）、controllerAs（用于在组件范围内引用控制器的标识符名称）、template（html模板作为一个字符串...
【AngularJs】---$sce 输出Html【代码】
【问题描述】angular js的强大之处之一就是他的数据双向绑定功能----->ng-bind和针对form的ng-model但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签angularJs输出html的时候，浏览器并不解析这些html标签我们用ng-bind-html这样的指令来绑定，浏览器中显示的还是html代码【解决办法---$sce】通过使用$ sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”咱们还可以这样用...
Angular实战记录【代码】
当ngModel双向绑定非基本数据类型值时子组件中ngModel绑定的值改变时，通过onChangeCallback 传回父组件时，有两种情况：基本数据类型：string/number 等变量，父组件中会跟着变化非基本数据类型：{}/[]/Date/... 父组件中不会检测到变化解决方法：创建一个新对象传回：this.onChangeCallback(new Date(this.date));(顺便完善父子组件间双向数据绑定的实现)子组件ts：import { Component,forwardRef} from ‘@angular/core‘; impo...
angular.element方法汇总
转载 addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选clone()-创建一个匹配的元素集合的深度拷贝副本contents()-获得匹配元素集合中...
angular路由【代码】
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。 $routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数: 第一个参数是 URL 或者 URL 正则规则。 第二个参数是路由配置对象。$routeProvid...
.net core3.1+angular+is4 项目记录：部署篇【代码】
.net core3.1+angular+is4 项目记录：部署篇??项目本来年前就可以结束的，可是前几个月一直在忙别的事情所以就耽搁了。原本打算边做边写，后来感觉在做的过程中想怎么写容易分心，所以写完了再写，之后有空的话应该会补充几篇，如果没有的话。。就算了吧。毕竟毕业事情还是挺多的。文末给出源码。整体思路??整理代码（包含数据库字符串，代理头等），上传 github，准备阿里云服务器（安装 git，.net core sdk，nginx，数据库可选等...
--@angularJS--路由、模块、依赖注入
以下是演示angular路由切换的demo. 主页：index.html<!doctype html><html ng-app="bookStoreApp"><head> <meta charset="UTF-8"> <title>BookStore</title> <script src="framework/1.3.0.14/angular.js"></script> <script src="framework/1.3.0.14/angular-route.js"></script> <script src="framework/1.3.0.14/angular-animate.js"></script> <script src="js/app.js"></script> <script src="js/contro...
Angular Material的安装和使用【图】
一、安装 1.前期准备：npm(安装node即可)，angular cli脚手架 2.自建项目ng new may-app //my-app项目名字ng g c project //组件名project 3.安装angular material和angular cdk//npm方法npm install --save @angular/material @angular/cdk//yarn方法yarn add @angular/material @angular/cdk 4.常用项animations（非必备）//npm方法npm install --save @angular/animations//yarn方法yarn add @ang...
Angular随笔第二课【代码】【图】
一. 列表表格以及其它迭代型元素ng-repeat 可能是最有用的angular指令了，它可以根据集合中的项目一次创建一组元素的多份拷贝。不管在什么地方，只要你想创建一组事物的列表，你就可以使用这条指令。比方说：我们正在为老师们编写一套学生花名册系统，我们当然需要从服务器上获取学生信息，但是对于当前这个列子来说，我们还是把模型直接定义在javascript代码里面：var students =[{name: ‘Mary Contrary‘,id:‘1‘},{name: ‘J...
angular js 终极购物车(转)【代码】
转自CSDN:<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>购物车</title><script src="angularjs/angular.js"></script><style>.box{width: 100%;border-bottom: 1px solid silver;}.box1{width: 100%;margin-top: 5px;}.box1 button{width: 100px;height: 40px;background: crimson;color: white;text-align: center;line-height: 40px;float: right;border: 0;border-radius: 13px;}table{width: 100%;}t...
AngularJS Select(选择框)【代码】
1. AngularJS 可以使用数组或对象创建一个下拉列表选项。使用 ng-options 指令来创建一个下拉列表，列表项通过对象和数组循环输出，代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular-1.3.15.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义，在这个div内运行--><select ng-init="sel...
angularjs1-过滤器【代码】
<!DOCTYPE html><html><body><header><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script src="angular.min.js"></script></header><div ng-app="myApp"><div ng-controller="firstController"><p>在输入框中尝试输入：</p><p>姓名：<input type="text" ng-model="firstName"></p>{{firstName | uppercase }}{{lastName}}{{price | currency}}<br><br><br><br>{{json | json }}<br><br><br>{{ 13043759...
AngularJs(三) deployd 服务的使用【代码】【图】
使用服务建立数据 在AngularJS（二）中，我搭建好了deployd服务，现在启动服务，创建正在的数据（开始是使用模拟数据），使用cmd命令 一、开启Mongodb数据。 贴图： 二：测试是否正常开启，使用mongo命令。在ＣＭＤ中输入： Ｍｏｎｇｏｄｂ默认建立的数据时test,说明mongodb已经开启。 三、 使用我们搭建好的deployd 服务建立数据，首先是开启...
Angularjs启动应用【代码】
要启动一个angular应用，可以使用ng-app指令，也可以调用bootstrap方法手动启动。 一个angular应用中，可以有多个angular.module。应该有且只有一个angular.module的名称与ng-app的值一致，否则就没有意义了。angular.module(‘M1‘,[]); angular.module(‘M2‘,[]); ...... angular.module(‘Mn‘,[]);angular.module(‘app‘,[‘M1‘,‘M2‘,...,‘Mn‘]); M1,M2,...,Mn可能是不同的业务模块，可以单独作为一个angular.module，最...
angular学习(二):Controller定义总结
上文中总结完了ng-view的应用,将运维后台分开界面到2个,进行到 逻辑Controller处理中,本文将总结一下在项目中Controller都用到了哪些知识:$scope:作用域对象,仅仅是代表本Controller对象，本作用域的不论什么对象都用$scope来声明。$rootScope：代表整个页面作用域，能够在随意子$scope之间传递全局对象 $http：用来发送http请求的对象.设置headervar module =angular.module('index'); //设置httpheader module.config(functi...
将BootstrapJS和AngularJS结合使用以及为什么不用jQuery【图】
原文网址链接：http://ourjs.com/detail/54e18c51232227083e000034Bootstrap 和 Angular 都是人们大量使用的工具。在很多项目中，它们需要一起使用。为什么不呢？他们已经改变了CSS和JS的开发方式，让前端既成为令人难以置信的工具。但是，把它们放在一起使用还有一些问题，特别是当你试图在Angular的项目中引入Bootstrap JavaScript组件时，会是一个问题。当建立了Angular的项目，##你不应该添加完整的jQuery库##。 jQlite已经包...
angular指令
AngularJS通过使用指令来扩展HTML、为应用程序添加新的功能；允许用户自定义新的指令。AngularJS是扩展了HTML属性，使用格式如下ng-**。AngularJS的指令有ng-app、ng-init、ng-model等，在接下来会一一解释。数据绑定：ng-model和{{}}“”{{}}“”是AngularJS数据绑定的表达式，数据绑定同步了AngularJS表达式和AngularJS数据；如下例子：<div ng-app="" ng-init="quantity=2;price=5"><h2>the sum is:</h2>number:<input type="nu...
mvc4中使用angularjs实现一个投票系统【代码】【图】
数据库是用EF操作，数据表都很简单中，从代码中也能猜出表的结构，所以关于数据库表就不列出了投票系统实现还是比较简单，投票部分使用ajax实现，评论部分是使用angularjs实现，并且页面每隔几秒（可以自己间隔时间)就从服务器异步获取评论数据，并通过angularjs的双向绑定功能自动更新数据（这部分其实完全可以使用websocket - singarlR完成，将更加简洁).评论是按分页显示，所以还使用到了pagedList组件，具体可以看我以前部分。...
angular和vue的差别
一angular是mvvm框架, 而vue是一个渐进式的框架, 相当于view层, 都有双向数据绑定, 但是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于ES5的getter和setter来实现,而angular是有自己实现一套模板编译规则,vue比angular更轻量, 性能上更高效, 比angular更容易上手, 学习成本低,vue需要一个el对象进行实例化, 而angular是整个html页面下的,单页面应用, 而vue可以有过个vue实例。 代码区别参考：https://blog.csd...
实践中学习AngularJS中的表单
表单是最常用的一种组建。在Angular.js中，其实并没有单独的为表单添加多少特殊功能。但是，利用Angular.js框架本身的特点，可以更友好的呈现表单。下面将介绍几种常用的功能在Angular中是如何巧妙实现的。1.根据输入域数据实时更新输出数据下面代吗实现了一个简易的计算表单，它能将用户输入的数据进行处理，并且实时显示在表单输出域中：<div ng-app="" ng-init="quantity=1;price=5"> 数量： <input type="number" ng-model="qu...
angular $watch
在scope内置的所有函数中，用得最多的可能就是$watch 函数了，当你的数据模型中某一部分发生变化时，$watch函数可以向你发出通知。你可以监控单个对象的属性，也可以监控需要经过计算的结果（函数），实际上只要能够被当作属性访问到，或者可以当作一个JavaScript函数被计算出来，就可以被$watch 函数监控。它的函数签名为$watch(watchFn, watchAction, deepWatch)其中每个参数的详细含义如下。watchFn该参数是一个带有Angular表达...
AngularJS指令嵌套时变量执行顺序的问题解决办法【代码】
今天研究指令嵌套时，发现子指令的link函数先于父指令的link函数执行。这样和预想的顺序不一样。也就是说，如果子指令的某个scope变量依赖于父指令传来的参数时，可能一直是undefinded比如：APP.directive("子指令", function () { return { scope: { 变量A:"=父指令的参数" }, restrict: ‘A‘, replace: false, link: function (scope, elem, attr) { scope.变量...
Angular4入门笔记【代码】
AngularJS最大版本号只有1.x，2.x/4.x的版本号都是针对于全新的框架Angular。但不能说Angular和AngularJS一点关系都没有，你看名字这么像，是吧？！回忆一下AngularJS被人念念不忘的特性，双向数据绑定，MVC，指令，服务，过滤器，模块化，脏检查机制，依赖注入，Scope，路由，表单校验等等。看下AngularJS到Angular的过程中，哪些概念被保留下来，哪些被剔除了（所谓的取其精华，去其糟粕）。剔除的部分：ng-controller指令：控制...
Angularjs中文版本开发指南发布【图】
Angularjs中文版本开发指南发布2014-02-16 15:49 by 破狼, 29069 阅读, 9 评论, 收藏, 编辑从本人开始在写关于Angularjs的文章开始，也算是见证了Angularjs在国内慢慢的火起来，如今的Angularjs正式如日中天。想知道为什么Angularjs会这么火，请移步angularjs移除不必要的$watch.也是一次偶然的机会，在Angular.js中文社区群里相遇一群Angular的爱好者，在一次巧妙的交谈，大家对于Angular官方的Guide最新版本没有中文版本表示无助...
AngularJS 2.0 尝鲜【图】
Angular 2.0 目前还处在制定完善中，尚未正式发布。本文通过AngularJS官网的一个例子，介绍AngularJS的一些新特性、新写法（这些内容到正式发布时可能会有改动）。（1）创建一个Angular 2工程目录， 如创建一个文件夹并命名为angular2（2）从GitHub repository上clone一份项目种子，该种子提供了快速开发所需的资源，包括Angular 2及其依赖git clone https://github.com/angular/quickstart.git（3）在工程目录根路径下，创建两个文...
angularJs 学习笔记【图】
ng-app="" 定义了angularJS的使用范围eg:ng-model="变量" 定义变量名eg:ng-init 指令初始化AngularJs应用程序变量eg:ng-bind 指令把变量绑定到某个段落的innerHTMLeg: ng-repeat 指令会重复一个html元素eg:依次输出names数组中的值ng-disabled指令 直接绑定应用程序数据到html的disabled属性ng-show指令 隐藏或显示一个html元素 ng-show=ture 为可见 ng-show=false 为不可见ng-click指令 定义了AngularJs点击事件AngularJs 表...
angulart 常用
angular: 使用 echartsnpm install echarts --save // 安装declare const echarts: any; // 引入https://www.echartsjs.com/zh/index.html // 使用 angular 生成二维码# Angular 5/6/6.1/7/7.1/7.2/8 and Ionicnpm install angularx-qrcode --save# Or use yarnyarn add angularx-qrcode# Angular 4npm install angularx-qrcode@1.0.3 --saveimport { QRCodeModule } from ‘angularx-qrcode‘; //在Module中 引入， 放在import 中...
angularjs中使用轮播图指令swiper【代码】
我们在angualrjs移动开发中遇到轮播图的功能安装 swiper npm install --save swiper 或者 bower install --save swiper引入文件路径<link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css" /> <script src="../bower_components/swiper/dist/js/swiper.jquery.min.js"></script> 指令中的编写方式(function() {‘use strict‘;angular.module(‘campus.core‘) //对应项目的module 请换成自己的模...
angular
1,angular.js 自动加载 ng-app[不带属性]。如果np-app="starter"带属性，我们的声明，angular.module(‘starter.controllers‘, []).controller("delAdminCtrl", function($scope,baseHref,$modalInstance,$http,$window,$modal,items) {})var app=angular.module(‘start‘,[‘starter.controllers‘]);app. ng-controller="AppCtrl"原文：http://www.cnblogs.com/jayruan/p/5104206.html
Angular Component【代码】
Component 组件web component标准:自定义元素模板Shadow DOMHtml 导入Angular组件所有的Angular组件都可以独立存在任何Angular组件都可以作为根组件被引导、路由加载、在其他组件中使用组件不能被单独启动，必须包装到模块(NgModule)中,通过Bootstrap模块接口引导入口模块启动Angular应用组件是Angular最小逻辑单元，模块是组件的抽象创建Angular组件：从 @angular/core 中引入 Component 装饰器建立一个普通类，并用 @Component 修...