ANGULAR - 技术教程文章
一张图告诉你angular2所有知识点【图】
忙活了半年，从angular2.0到现在angular4.2。从没AOT到有AOT。我想说，angular2的学习曲线真的有点陡峭。只能说，angular2是一个比较完整的框架，框架就是这样，一大堆条条框框，一个项目大了，就是靠这些条条框框来保持秩序。关于之前的H5编辑器，很多人私信我，要么就是商业合作，要么就是要源码。我只想说，虽然那个编辑器是一个人搞的，但是，那时候我只是个打工的，也签了保密协议，爱莫能助。法律问题，本人不大懂，若是新写...
推荐10个很棒的AngularJS学习指南
AngularJS 是非常棒的JS框架，能够创建功能强大，动态功能的Web app。AngularJS自2009发布以来，已经广泛应用于Web 开发中。但是对想要学习Angular JS 的人而言，只有官方文档，那是万万不够的。大多数人更愿意看一些入门视频，或者是更易于理解学习的Demo程序。因此本文推荐了10个AngularJS学习指南，助你一臂之力。 1. Year of Moo超级赞的AngularJS学习指南，是由Year of Moo 创建的，包含AngularJS基本知识以及AngularJS 运行...
使用requirejs来管理angularJS依赖示例【图】
有关requirejs是什么在这里不做解释，只用纯代码实战让你感受requirejs依赖管理的强大。一、首先要先下载require.js,然后整一个入口文件main.js包括了对其他js的引用。//配置依赖 require.config({paths: {"angular":"angular"},shim:{"angular": {"deps":[],"exports": "angular"}}});//定义模块 define(['angular','controller'], function (angular) { angular.module('HelloModel', ['HelloCtrls']);return {angularModules...
[Angular] Separating Structural Styles From Theme Styles - Making Components Themeable【代码】
For the component‘s css file, we can improt two css files:common.cssdefault-theme.css@import "common.css"; @import "au-fa-input-default-theme.css"; In the default theme, it contains all the default theme related style.:host {border-color: lightgrey; }:host(.input-focus) {border-color: #4D90FE;-webkit-box-shadow: 0 0 5px #4D90FE;box-shadow: 0 0 5px #4D90FE; } In the common.css, it contains all t...
【经验】Angularjs 中使用 layDate 日期控件【代码】
layDate 控件地址：http://laydate.layui.com/前情：原来系统中使用的日期控件是UI bootstrap（地址：https://angular-ui.github.io/bootstrap/）里的。后来因为各种原因，要换掉UI bootstrap中的日期控件，改用layDate日期控件。解决思路：将layDate的初始化及相关代码定义在指令里。问题关键点：layDate操作的是Html元素的,怎么实现双向绑定，同步Angularjs模板值和Html的元素值。指令具体代码: 1/**2 * 使用示例3 ...
AngularJS +Kendo UI Grid template
var dataSource = new kendo.data.DataSource({ transport: { dataType: "json", read: inputUri + $stateParams.subjectID, }, pageSize: 10, }); $scope.mainGridOptions = { dataSource: dataSource, //height: 420, scrollable: false, sortable: true, filterable: true, //pageable: { // refresh: true, // ...
angular的仿百度搜索功能
尝试一下调用百度的搜索功能，这部分主要是练习$http。首先HTML部分：<div ng-app="myApp" ng-controller="Aaa""> <input type="text" ng-model="name" ng-keyup="change(name)" placeholder="请输入搜索内容">//内容的搜索框 <input type="button" ng-click="change(name)" value="搜索"> // 搜索按钮 <ul> <li ng-repeat="da in data">{{ da }}</li> //搜索到的内容 </ul></div>HTML布局完成，现在设置一下...
AngularJS Bootstrap【代码】
AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。Bootstrap你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码:<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：<link rel="stylesheet" href="//apps.bdimg.com/libs/boots...
angular1.5 组件学习 -- 2.2、组件间的交互：子向父【代码】
有父组件向子组件传递数据，那必然会有子组件向父组件返回数据。这时将使用事件绑定来调用父组件中的方法，告诉父组件：子组件有数据给你，接着。<!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>子组件向父组件发送数据</title><script src="angular.js"></script></head><body><father-component></father-component><script>angular.module(‘myApp‘,[]).component(‘fatherComponent‘, {...
angular自定义分页组件(实用)【代码】【图】
功能描述：分页，点击按钮或者下一页获取分页接口，同时active到对应页码。html模块：<page page-count="totalPage" on-click-page="reloadData(page)"></page>controller模块：var context = $scope;#scope.reloadData = reloadData;//(重要：需要与页面的事件进行绑定)function reloadData(page) { context.params.pageNumber = page || 1;//将参数变为点击的page，默认为1 getPackageList(context.params);//请求后端分页...
Angular 2 HTTP Requests with Promise【图】
第一步：模拟restful api，还是以英雄列表为例。（我用的是node+express模拟，禁用同源策略）没什么好说的直接上代码。var express = require(‘express‘); var app = express(); //设置跨域访问式一 app.all(‘*‘, function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); res.header("Access-Con...
AngularJS 表单
1、AngularJS表单是输入控件的集合。2、HTML控件，以下Html元素被称为HTML控件：input元素，select元素，button元素，textarea元素。3、HTML表单通常与THML控件同时存在。 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta name="viewport"content="width=device-width,initial-scale=1" /> <!--[if lt ...
angular 视频教程
在网上找了一些，视频教程。存在备用 angular 视频教程 百度云盘地址 1小时前 1小时前 30 6angular 4.0视频教程 链接:https://pan.baidu.com/s/1qXItn2kvue.js 视频教程 https://pan.baidu.com/s/1i5pH02preact.js 视频教程 https://pan.baidu.com/s/1nvEBRVrangular ui http://ui.dtmao.cc 文章来源：刘俊涛的博客地址：http://www.cnblogs.com/lovebing原文：http://www.cnblogs.com/lovebing/p/7802971.html
AngularJS anchorscroll example【代码】【图】
$anchorscroll service is used to jump to a specified element on the page$location service hash method appends hash fragments to the URL$anchorscroll() method reads the hash fragment in the URL and jumps to that element on the pageyOffset property specifies the vertical scroll-offsetExample : HtmlPage1.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp"><head><title></tit...
AngularJS入门【代码】
简介AngularJS是为了克服HTML在构建应用上的不足而设计的。通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sprou...
在AngularJS中同一个页面配置一个或者多个ng-app【代码】
在AngularJS学习中，对于ng-app初始化一个AngularJS程序属性的使用需要注意，在一个页面中AngularJS自动加载第一个ng-app，其他ng-app会忽略，如果需要加载其他ng-app程序，需要手动添加初始化过程。手动初始化其他ng-app的javaScript代码 angular.bootstrap(document.getElementById("id"),[‘id‘]);<div ng-app="myApp" ng-controller="myCtrl"><input type="text" ng-model="first"/><input type="text" ng-model="last"/><br/...
[AngularJS] Using $parse Service【代码】
$parse is useful when you want to parse an expression and the context is not defined yet. For example, I have a table component which allows user to pass in all the row items and define action for each row.<ttmd-tableitems="vm.invoices"headers="vm.headers"><ttmd-actions><ttmd-actionif="shouldPay"text="pay"on-click="vm.pay(payload)"></ttmd-action></ttmd-actions></ttmd-table> What I want is only if ...
[Angular 8] Take away: Tools for Fast Angular Applications【代码】【图】
Based on the talk from NG-CONF. Check it out by yourself, here is just my own take away :) Differential loading:The basic idea is that, Angular will build tow version of Javascript bundle. One is ES5 version to support all browsers, another one is ES2015 version, with latest JS features, it results out smaller bundler size, faster execution.Then for the browser, it will based on the script type to...
Angular和jQuery的ajax请求的区别【图】
最近项目中使用angular，结果发现后台没法获取参数，所以，稍微研究了一下两者在发送ajax时的区别。注意angular和jquery的ajax请求是不同的。在jquery中，官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8contentType (default: ‘application/x-www-form-urlencoded;charset=UTF-8‘)Type: StringWhen sending data to the server, use this content type. Default is "application/x-www-form-u...
angular基础【代码】
常用的设计原则和设计模式 1、设计原则（明确）① YANGI（You aren‘t gonna need it） 不写不需要的代码②KISS（Keep it simple and stupid） 代码越简单越好③DRY（Don‘t Repeat Yourself）封装代码④高内聚低耦合内聚：一个模块内部的不同部分之间的关系耦合：不同模块/组件的关系⑤SRP(single responsibility principle) 单一责任原则⑥OCP（open closed principle） 开闭原则对扩展开放 对修改关闭⑦LCP（least knownledge p...
数据的双向绑定 Angular JS【代码】
接触AngularJS许了，时常问自己一些问题，如果是我实现它，会在哪些方面选择跟它相同的道路，哪些方面不同。为此，记录了一些思考，给自己回顾，也供他人参考。初步大致有以下几个方面：数据双向绑定视图模型的继承关系模块和依赖注入的设计待定数据的双向绑定Angular实现了双向绑定机制。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。一个最简单的示例就是这样：<div ng-controller="Counte...
angularjs下拉框实现渲染html【代码】【图】
angualrjs处于安全的考虑，插值 指令会对相应字符串进行过滤，避免出现html攻击。但是在一些时候，我们需要渲染html，比如实现一个分级的下拉框，代码如下： 1 <body ng-app="app" ng-controller="controller">2 <select ng-model="value" ng-options="t.text for t in testList"></select>3 <script src="/bootstrap/bootstrap/dist/angular-bootstrap/angular.js"></script>4 <script type="text/javascript">5var app= angular....
angular内置方法---序列化、反序列化【代码】
toJson:将对象或者数组 序列化 为json格式的字符串fromJson：相反的过程 1 <!DOCTYPE html>2 <html ng-app="myApp">3 <head lang="en">4 <meta charset="UTF-8">5 <title></title>6 <script src="js/angular.js"></script>7 </head>8 <body>910 <div ng-controller="myCtrl"> 1112 </div> 1314 <script> 15var app = angular.module(‘myApp‘, [‘ng‘]); 1617 app.controller(‘myCtrl‘, function ($scope) { 1819//反序...
[Angular 2] 5. Inject Service with "Providers"【代码】
In this lesson, we’re going to take a look at how add a class to the providers property of a component creates an actual providers. We’ll learn what a provider specifically does and how we can provide different dependencies with the same token. import {Component} from‘angular2/core‘; import {TodoService} from‘./../services/TodoService‘;@Component({selector: ‘todos‘,providers: [TodoService]...
angularJS的插件使用【代码】
$uibModal&&$uibModalInstance$uibModal和$uibModalInstance是一款angularJS的弹窗控件，github地址 http://angular-ui.github.io/bootstrap/#/modal$uibModal:负责调出弹窗$uibModalInstance：弹窗实例例子如下：弹窗 template: 1<script type="text/ng-template" id="detailWin"> 2<div class="marketing-strategyList-win"> 3<div class="modal-header"> 4<h4 class="modal-title">{{modalTitle}}</h4> 5<div class="btn-close"...
AngularJs根据访问的页面动态加载Controller的解决方案【代码】
最近AngularJs很火....废话不多说了,如主题吧用Ng就是想做单页面应用(simple page application),就是希望站内所有的页面都是用Ng的Route,尽量不用location.href,但是这样的webapp好处是很多,但是美中不足的是当你的webapp随着时间的推移,用户变多,功能变得更丰富,controller也变得越来越多,你不得不把所有的controller当作全局模块进行加载,以使得在站内任何一个页面中按F5刷新后能route到任意一个其他页面,而不会发生找不到contro...
AngularJs解决表达式闪烁的问题（ng-cloak）【代码】
举例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>/*[ng-cloak] 属性选择器 匹配所有包含这个属性的元素*/.ng-cloak,[ng-cloak] {display: none;}</style></head><body ng-app><!-- 闪烁就是 表达式 在angularJS 还没识别之前 本来就是直接输出 然angular过了几百毫秒就识别了表达式 然后把大括号去掉 --><!-- 原因就是angularJS 的代码加载需要时间 --><!-- ng-cloak 这个类名或...
angular ui-bootstrap日期控件如何显示成中文
1.引入中文国际化文件angular-locale_zh-cn.js 下载地址（https://github.com/angular/angular.js/tree/master/src/ngLocale） 然后大部分控件就可以显示中文了。2. 还不够，有些按钮（today,clear，close）还不能显示中文， 2.1)需要修改angular-locale_zh-cn.js ，对DATETIME_FORMATS增加三个中文键值对： "DATETIME_FORMATS": { "TODAY":"\u4eca\u5929", "CLEAR":"\u6e05\u7a7a",...
AngularJs练习Demo17 ngRoute【代码】
1 <!DOCTYPE html>2 <html>3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5 <title></title>6 <meta charset="utf-8" />7 <script src="../Scripts/angular.min.js"></script>8 <script src="../Scripts/angular-route.min.js"></script>9 10 <script src="../Scripts/angular-animate.js"></script>11 <style type="text/css">12 <!--animate class样式的...
6、angular服务【代码】
服务可以理解为公共的方法，项目里面需要用到的公共方法都可以抽离为一个公共的方法使用服务类的定义通常紧跟在 “@Injectable()” 装饰器之后，依赖不一定是服务 —— 它还可能是函数或值。也就是说函数或值不需要@Injectable()装饰器下面给几个服务案例1、公共函数或值，目录：app->core->services->utils->app-common.function.tsexport function getRole():string {return sessionStorage.getItem(‘erp_role‘); }2、公共服务...