ANGULAR - 技术教程文章
AngularJs+bootstrap搭载前台框架——准备工作【图】
1.关于什么是AngularJs以及什么是bootstrap我就不多说了，简单说下，AngularJs是一个比较强大前台MVC框架，bootstrap是Twitter推出的一个用于前端开发的开源工具包，可以迅速搭建web前台，可以去官网看看（AngularJs：http://angularjs.org/ ，bootstrap：http://twitter.github.io/bootstrap/）。2.github上有一个比较好的纯净AngularJs app的种子，可以去github下载，地址：https://github.com/glitchtank/angular-seed-master。...
【10】AngularJS SQL
AngularJS SQL 使用 PHP 从 MySQL 中获取数据<div ng-app="myApp" ng-controller="customersCtrl"><table><tr ng-repeat="x in names"><td>{{ x.Name}}</td><td>{{ x.Country}}</td></tr></table></div><script>var app = angular.module(‘myApp‘,[]);app.controller(‘customersCtrl‘,function($scope, $http){ $http.get("test.php").success(function(response){$scope.names = response.records;});});</script> ASP.NET...
浅谈web三大框架优缺点及适用场景之Angular框架【代码】
Angular是一个大而全的框架，它提供了开发一个完整应用所需的所有要素。同时，作为背后的开发公司，Google有一个适用于Angular框架的Material Design UI库。我们结合Angular框架及UI库就能完成大部分的前端开发工作。Angular 官方还提供了开发应用所需的脚手架，包含测试、运行服务、打包等部分。前端开发人员使用官方的命令行工具就可以快速生成Angular应用：ng new my-dream-app。在这个官方生成的项目里，可以直接运行和构建Ang...
angularjs路由【代码】
需要引入angular.js，angular-ui-router.min.js <ul><li><a href="#home">首页</a></li><li><a href="#aboutUs">关于我们</a></li><li><a href="#contactUs">联系我们</a></li></ul><div ui-view></div>var app = angular.module("instruction", [‘ui.router‘])app.config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider) {$urlRouterProvider.otherwise("/home");$stateProvider.s...
快速搭建angularjs测试环境以及可能遇到的问题
视频教程参考慕课网的大漠教程的第一章 http://www.imooc.com/learn/156先安装nodeJs，nodejs.org官网上直接下载，一直next，finish在npm的安装路径下打开命令行工具cmdnpm 我的安装路径C:\Users\tchlu\AppData\Roaming\npmnpm install -g gruntnpm install -g http-servernpm install -g bower然后依次安装测试相关工具karma jasmine protractor 问题来了bower 下载包要安装git ,git要配全局环境fatal: unable to connect to gith...
Angular material mat-icon 资源参考_Action
ul,li>ol {margin-bottom: 0}dt {font-weight: 700}dd {margin: 0 1.5em 1.5em}img {height: auto;max-width: 100%}table {margin: 0 0 1.5em;width: 100%}button,input[type=button],input[type=reset],input[type=submit] {border: 1px solid;border-color: #ccc #ccc #bbb;border-radius: 3px;background: #e6e6e6;box-shadow: inset 0 1px 0 rgba(255,255,255,.5),inset 0 15px 17px rgba(255,255,255,.5),inset 0 -5px 12px r...
1.搭建Angular2项目
简述:搭建angular2的开发环境,网上已经有许多教程,不过都是window系统下的教程,我本人使用的是linux系统,搭建环境的过程也稍微比前者麻烦了一点.1. pakeage.json配置文件:是用来声明项目中使用的模块,在部署环境时,只要在pakeage所在的目录执行npm install命令就可以安装所有需要的模块了. 新建一个文件夹作为项目的根目录,整个项目的文件都存放在这个文件夹下面.在根目录下创建一个package.json的配置文件,该...
angularjs中避免被转义，HTMl标识能被识别，可以正常链接，下载！
http://www.cnblogs.com/sxz2008/p/6434036.html如果希望正常解析html代码，如下：var app = angular.module(‘main.app‘, [‘bw.paging‘, ‘cbc.datePicker‘, ‘angular-popups‘]).filter( ‘to_trusted‘, [‘$sce‘, function ($sce) { return function (text) { return $sce.trustAsHtml(text); } }] );注意加下划线部分<div class="bdall br4 w484 pull-left ml4 pall6" ng-bind-html="selectedmessages....
如何解决AngularJS在网页中换行的问题
我们经常会遇到想要在网页中的文本进行换行的问题，普通的js加个<br/>就行，但是AngularJS却不能显示，所以针对AngularJS我的解决方法如下：JS代码： $scope.trustAsHtml = $sce.trustAsHtml; $scope.text="hello<br/>xiaomi";HTML代码： <div ng-model="text" ng-bind-html="trustAsHtml(text)">原文：http://www.cnblogs.com/zhangmei/p/5786999.html
angular HttpClient post put patch del 方法（2）-Promise 服务【代码】【图】
前做了在一个页面的CRUD的方法，现实中webapi模块往往是单独写服务的，所以修改了一下原来的设计和结构，还是需要很多知识的。2017.11.15增加patch方法 ，改进服务程序优化写法2017.11.27增加Promise返回值处理,服务器返回错误信息后的处理.因为所有的CRUD方法 都写在服务中，所以后台的代码就简单多了，回调还需要详细信息什么的，总之已经能运行正常了： 1 import { Component, OnInit } from ‘@angular/core‘;2 import { Pati...
[AngularJS] angular-formly: Default Options【代码】
angular-formly allows you to keep your forms as DRY as possible. TheoptionsTypes property is one way of composing your field configurations to keep your forms light-weight and DRY. /* global angular */ (function() {‘use strict‘;var app = angular.module(‘formlyExample‘, [‘formly‘, ‘formlyBootstrap‘]);app.run(function(formlyConfig) {formlyConfig.setType({name: ‘ipAddress‘,defaultOptions: {...
Angular2 Hello World 之 2.0.0-beta.14【代码】【图】
公司现在采用angualrjs开发一些web应用，采用的是angular1，现在angular2已经差不多了，听说最近rc6已经出来了……其实感觉好慢啊！之前也做过一些anglar2的例子，但是没有记录下来，现在重新拾起来还费了半天劲儿！弄了半天总是报错，按着文件对比了半天也没有找打是哪里写错了……哎！最后发现是版本的问题，这次想把它记录下来，方便之后查看。 环境：Visual Studio 2015 Update 3+Asp.net core templates 一、创建一个 ...
Angularjs
app.directive("itemPopover",function($timeout){ return { restrict : "A", link : function(scope,element,attrs){ element.popover(); var createText = "<div class=‘hover‘ sadsdas style=‘position:absolute;top:50%;left:125px;width:400px;z-index:9999999;font-size:26px;color:#fff;text-align:center;‘>请输入文本</div>"; var con = angular.el...
Angularjs[26] - 自定义指令（2）（templateUrl）【代码】【图】
templateUrl: 加载模板所要使用的 URL。可以加载当前模板内对应的 text／ng-template script id。在使用 chrome 浏览器时，“同源策略”会阻止 chorme 从 file:// 中加载模板，并显示一个“ Access-Control-Allow-Origin ”不允许源为 null，可以把项目放在服务器上加载，或者给 chorme 设置一个标志位，命令为：chorme-allow-file-access-from-files。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title...
angular
AngularJS 重新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线，它非但不畏缩不前，反而正面出击，提出了有效的解决方案。很多前端应用的开发框架，比如Backbone、EmberJS等，都要求开发者继承此框架特有的一些JavaScript对象。这种方式有其长处，但它不必要地污染了开发者自己代码的对象空间，还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式，因为网络最初的设计无法提供 我们今天所需的交互...
ng-init 指令初始化 AngularJS 应用程序变量
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href=""></head><body><div ng-app="" ng-init="firstName=‘sdiven‘"><p>姓名为:<span ng-bind="firstName"></span></p></div></body><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></html>本文出自 “素颜” 博客，请务必保留此出...
AngularJS开发指南4：指令的详解【代码】
指令是我们用来扩展浏览器能力的技术之一。在DOM编译期间，和HTML元素关联着的指令会被检测到，并且被执行。这使得指令可以为DOM指定行为，或者改变它。AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得HTML可以转变成“特定领域语言(DSL)”。指令可以做为HTML中的元素名，属性名，类名，或者注释。下面是一些等效调用myDir指令的例子：<span my-dir="exp"></span> <span class="my-dir: exp;"></span> <my-...
Angular5学习笔记 - 配置Http（七）【代码】【图】
一、引入Http模块编辑\src\app\app.module.ts文件import { HttpModule } from ‘@angular/http‘;/* 注册模块 */imports: [HttpModule,],二、编辑列表画面编辑\src\app\components\users\list\list.component.html文件，这里用到了ng-zorro组件库相关配置看看下节内容。<nz-table #nzTable [nzDataSource]="data" [nzPageSize]="10"><thead nz-thead><tr><th nz-th><span>姓名</span></th><th nz-th><span>年龄</span></th><th nz-...
【vscode插件开发】vscode->angular组件跳转、数据监听流程【图】
前言： 最近开发vscode的时候发现了一个很神奇的事情，vscode到angular的整个通信流程应该是 vscode请求数据-> 拿到数据发送给angular->angular监听数据并渲染页面，但是最神奇的事情来了！！！就是在我vscode像angular发送数据的时候数据竟然丢失了！！！！ 如图可以看到，我在向angular发送数据前的时候，workitem.priority里还是有值的，但是在angular刚监听的时候，message.data里的priority就为undefined了，令我百思不得...
（转载）关于My97 datepicker与Angular ng-model绑定问题解决。【代码】
转载自 http://zerosoft.blog.51cto.com/679447/1611403<input type="text" ng-model="d" onClick="WdatePicker()" />{{d}} 在使用上述代码在angularjs中获取d的值得时候是获取不到值的，应该选完日期之后获取触发change方法，代码变更如下 ：<input type="text" ng-model="d" onClick="WdatePicker({onpicked: function(){$(this).trigger(‘change‘)}})" /> {{d}} 原文：http://www.cnblogs.com/jj-notes/p/6513376.html
初探AngularJs框架（一）【图】
一、需要准备的环境 Nodejs：https://nodejs.org/en/download/ Python：https://www.python.org/downloads/release/python-370/ 下载安装版本，不需要用户自己手动配置环境变量，环境安装完成后如下图（使用python - version）： 安装Angular CLI，直接运行如下命令： npm install -g @angular/cli 如果使用npm安装失败，可以使用淘宝的镜像，先使用npm安装cnpm，再安装AngularCLI，使用如下命令： npm...
从flask视角理解angular（二）Blueprint VS Component【代码】
Component类似flask app下面的每个blueprint。 import ‘rxjs/add/operator/switchMap‘; import { Component, OnInit } from ‘@angular/core‘; import { ActivatedRoute, ParamMap } from ‘@angular/router‘; import { Location } from ‘@angular/common‘;import { Hero } from ‘./hero‘; import { HeroService } from ‘./hero.service‘; @Component({selector: ‘hero-detail‘,templ...
angular访问后台服务及监控会话超时的封装实现
angular本身自带访问组件http和httpclient，组件本身都是异步模式访问。本文只列举了对http组件的封装同时也一同处理会话超时监控。 实现思路概述：1、将请求入参和出参统一约定2、封装方法将请求参数、数据处理方法、数据呈现方法、访问错误处理方法封装在一起，业务调用通过服务调用该封装方法，同时把请求参数、数据处理方法、数据呈现方法、访问错误处理方法传过来即可3、在每次请求交互时，都会记录当前请求时间。系统工作台...
场景下开发-angular 高级组件-显示更多列表【代码】
code1.factory(‘commonfn‘,function($state,$ionicHistory,$ionicScrollDelegate,$cordovaToast,$rootScope,$ionicPopup){ // commonfn.init($scope)return{init: function($scope){ // 安卓手机的返回键$scope.showOutConfirm = function(){if (typeof ($cordovaToast) == ‘object‘) {if (!$rootScope.canExit) {$cordovaToast.showWithOptions({message : "再点一次退出程序",duration : 2000,position : "bot...
Angular JS的依赖注入【代码】【图】
依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式。这减轻一个组成部分，从定位的依赖，依赖配置。这有助于使组件可重用，维护和测试。AngularJS提供了一个至高无上的依赖注入机制。它提供了一个可注入彼此依赖下列核心组件。值工厂服务提供者常值值值是简单的JavaScript对象，它是用来将值传递过程中的配置相位控制器。//define a module var mainApp = angular.module("mainApp", []); //create...
Angular01 通过angular-cli来搭建web前端项目【图】
准备前提：已经搭建好angular-cli环境，还未搭建好的请参见三少的博客（开发基础分类）1 新建一个文件夹 该文件夹用来存放所有利用angular-cli搭建的web前端项目 2 启动命令窗口，并进入该文件夹 3 创建新项目ng new 项目名称 注意：项目名称最好全部用字母 3.1 到文件夹中去查看项目是否成功创建 4 通过文本编辑器打开src文件夹下的index.xml文件 三少使用sublime打开的效果如下 4.1 代码详解 ...
angular的bootstrap方法【代码】
使用 angular 写程序的开发都知道，要想使用 angular 应用能够运行，需要在页面中 “登录” 它，我们常用的方法是这样的：<!DOCTYPE html><html ng-app=‘myApp‘><head><meta charset=‘utf-8‘><script src=‘angular.js‘></script></head><body><div id=‘text‘ ng-controller=‘myCtrl‘></div><script>var app = angular.module("myApp",[]);app.controller("myCtrl",function($scope){console.log(1);})</script></body></...
angularjs探秘<三> 控制器controller及angular项目结构【代码】【图】
先来看一个例子<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><title>angularJS</title><!--angular引用--><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script><!-- 控制器js --><script src="MyApp.js"></script></head><body ng-app="AppModule"><div ng-controller="SayHello"><span ng-bind="name"></span><span ng-bind="say"></span></div><div ...
AngularJS之控制器【代码】
控制器在Angularjs中的作用是增强视图，它实际就是一个函数，用来向视图中的作用域添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。当我们在页面上创建一个控制器时，Angularjs会生成并传递一个$scope给这个控制器，由于Angularjs会自动实例化控制器，所以我们只需要写构造函数即可。下面的例子展示了控制器初始化：function my Controller($scope){$scope.msg="hello,world!"; }上面这个创建控制器的方...
较完整的angularjs+bootstrap应用程序接口controller
define(["app"],function(app){ return app.controller("transactionsFundController", function($scope,$compile,$location) { $scope.transactionsFund={};//定义对象 $scope.transactionsFundList=[];//定义对象数组 $scope.pages = 1; //默认查询总页数 $scope.size = 0; //默认每页显示条数 $scope.total = 0; //清空模态框 $(".modal").on("hidden.bs.modal",functio...