[AngularJS 1] Introduction to AngularJS

introduction:this article is going to introduce AngularJS in generally. I will write it through five points.Number one is what is AngularJS.Number two is why use Angular.Number three is how angularJS works.Number four is about modules.Number five is…

AngularJS学习笔记二:AngularJS指令

AngularJS 指令: AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用指令: ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把应用程序数据绑定到 HTML 元素. ng-repeat 指令对于集合中(数组中)的每个项会克隆一次 HTML 元素. 1. ng-app 指令 ng-app 指令定义了 AngularJ…

AngularJS学习笔记2——AngularJS的初始化

本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> </body> </html…

[angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架

MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage 布局页的引用 <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script&g…

AngularJS学习之旅—AngularJS 模块(十五)

一.AngularJS 模块模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块通过 AngularJS 的 angular.module 函数来创建模块 <div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script> 2.添加控制器…

AngularJS学习之旅—AngularJS 控制器(六)

1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数创建. <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><…

AngularJS学习之旅—AngularJS 指令(三)

1.AngularJS 指令 AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.AngularJS 指令 1.AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 2.ng-app 指令初始化一个 AngularJS 应用程序. ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序的"所有者". 3.ng-…

AngularJS学习之旅—AngularJS 表达式(二)

1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙. AngularJS 将在表达式书写的位置"输出"数据. AngularJS 表达式很像 JavaScript 表达式:它们可以包含文字.运算符和变量. 实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }} eg: &l…

【AngularJS学习笔记】AngularJS表单验证

AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$valid 字段内容合法的 4.$invalid 字段内容非法的 5.$pristine 表单没有填写记录接下来通过一个完整的表单来…

AngularJS学习笔记(1) - AngularJS入门

什么是AngularJS? AngularJS是建立在jQuery的一个轻量级版本之上的MVC框架.MVC将业务逻辑代码和视图.模型相分离.AngularJS提供的所有功能都可以通过使用JavaScript和jQuery来实现. 为什么选择AngularJS? AngularJS框架强制正确实现MVC,并且可以很容易的正确实现. AngularJS HTML模板的声明风格,使得HTML的意图更加直接,并且使得HTML更容易维护. AngularJS的模型部分是基本的JavaScript对象,…

[后端人员耍前端系列]AngularJs篇：使用AngularJs打造一个简易权限系统

一.引言上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多说,直接进入主题. 二.整体架构设计介绍首先看下整个项目的架构设计图: 从上图可以看出整个项目的一个整体结构,接下来,我来详细介绍了项目的整体架构: 采用Asp.net Web API来实现REST 服务.这样的实现方式,已达到后端服务的公用.分别部署和更好地扩展.Web层依赖应用服务接口,并且使…

[Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作

写在前面前篇文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作.代码比较简单,这里只列举比较重要的代码片段.完整的代码将在文章下面提供链接. demo 数据来源通过webapi的方式提供.获取对产品的查询,分页,增加商品,删除,修改等操作. webapi public class ProductController : ApiController { private List<Product> ls…

【AngularJS】—— 1 初识AngularJs

怀着激动与忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习.这次正好学习AngularJS,直接复习一下前端的知识.目前这里还是弱点,慢慢深入的学习. AngularJS是Google的优秀的前端框架,目前已经应用于多个产品. 通过w3cschool.cc的学习,简单的了解了下它的使用方法,但是对于原理还没有理解. AngularJs相对于其他的框架来说,有一下的特性: 1 MVVM 2 模块化 3 自动化双向数…

【AngularJS】—— 2 初识AngularJs（续）

前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容. 本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括: 1 事件 2 模块 3 表单 4 数据验证 5 bootstrap CSS风格 6 include包含其他页面 7 应用程序 8 参考手册首先看一下html的事件关于html的事件,文中给出了三个例子,点击.隐藏.显示.使用方法基本相同: 先看一下点击的例子,点击按钮后,会触发ng-click内的方法,进行累计加一: <div…

【AngularJS】—— 6基于AngularJS的过滤与排序

阅读目录程序设计分析代码以及结果前面了解了AngularJS的使用方法,这里就简单的写个小程序,实现查询过滤以及排序的功能. 本程序中可以了解到: 1 angularjs的过滤器 2 ng-repeat的使用方法 3 控制器的使用 4 数据的绑定回到顶部程序设计分析首先,如果要是先查询过滤,就要使用到AngularJS中的过滤器filter 了. 直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果: {{ persons | filter:que…

[Angularjs]asp.net mvc+angularjs+web api单页应用

写在前面最近的工作一直在弄一些h5的单页应用,然后嵌入到app的webview中.之前一直在用angularjs+html+ashx的一套东西.实在是玩腻了.然后就尝试通过asp.net mvc的方式构建单页应用.用到的技术angularjs+webapi+mvc.在网上找到了一些相关的文章,关于anguar的位置也没有一个比较好的一个标准.这里也是抛砖引玉,希望通过讨论,得到一个更好的结构. 项目结构结构说明: _Layout.cshtml:该文件作为模板文件,这里将应用的js,及css文…

AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID

AngularJS项目开发技巧之获取模态对话框中的组件ID 需求出于项目开发需求,需要实现的业务逻辑是:药店端点击查看"已发货""已收货"订单详情时,模块弹出框中只应出现"取消"按钮.但现实的情况如下图所示. 模态框核心代码如下: <script type="text/ng-template" id="billDtlContent.html"> <div class="moda…

AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载

AngularJS项目开发技巧之图片预加载绪项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左所示,图片加载完毕如下图右所示. 问题分析尝试进行图片加载的优化工作. 经过与Ionic群内卖火柴朋友的聊天,获取到如下内容:手机端访问速度受服务端带宽的限制.一个接收一个传输,和两方都有关系.服务器对app影响是很大的.2M 一般是网站使用还可以 app会不乐观.增加服…

AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系

Angularjs中scope与rootscope区别及联系 scope是html和单个controller之间的桥梁,数据绑定就靠他了.rootscope是各个controller中scope的桥梁.用rootscope定义的值,可以在各个controller中使用.下面用实例详细的说明一下. 1.js代码 phonecatApp.controller('TestCtrl',['$scope','$rootScope', function($scope,$rootScope) { $rootS…

AngularJS进阶(十七)在AngularJS应用中实现微信认证授权遇到的坑

在AngularJS应用中集成微信认证授权遇到的坑注:请点击此处进行充电! 前言项目开发过程中,移动端新近增加了一个功能"微信授权登录",由于自己不是负责移动端开发的,但最后他人负责的部分未达到预期效果.不能准确实现微信授权登录.最后还得靠自己做进一步的优化工作,谁让自己是负责人呢?原来负责人就是负责最后把所有的BUG解决掉. 首先,熟悉一下微信授权部分的源代码,如下所示: /*-------------- 微信授权登陆 --------------*/ // 扩展 API 加载完…

AngularJS进阶(十四)AngularJS灵异代码事件

AngularJS灵异代码事件注:请点击此处进行充电! 事情原委 router_sys.js源代码如下: 自己在html路由跳转的代码如下: 但是在实际路由过程中,却路由到了下面的状态,相应的页面中去. 诡异的是在UC上第一次路由正常,第二次还是路由到下面的状态!路由命名是没有问题的,却执行到别路由中去了.费解! 驱除内鬼内鬼一时还真找不出来. 尝试通过编写点击事件在函数内路由至所需页面,结果还是不可达. <a class="btn btn-success btn-sm" i…

AngularJS进阶(十二)AngularJS常用知识汇总(不断更新中....)

AngularJS常用知识汇总(不断更新中....) 注:请点击此处进行充电! app.controller('editCtrl',['$http','$location','$rootScope','$scope','$state','$stateParams',]) function($http, $location, $rootScope, $scope, $state, $stateParams){ // 上边声明添加显示的依赖注入,是为了防止,压缩(如UglifyJS)时改变funct…

AngularJS学习之旅—AngularJS 表单(十六)

一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 1.数据绑定 <input type="text" ng-model="firstname"> 通过以上代码应用有了一个名为 firstname 的属性. 它通过 ng-model 指令来绑定到你的应用. firstname 属…

AngularJS学习之旅—AngularJS 事件(十四)

1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input,select,textarea,触发事件:失去焦点): ng-focus(适用标签 : a,input,select,textarea,触发事件:获取焦点): ng-change(适用标签 : a,input,select,textarea,触发事件:model更新): ng-keydown(适用标…

AngularJS学习之旅—AngularJS HTML DOM(十三)

1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. ng-show 指令:ng-show 指令隐藏或显示一个 HTML 元素. ng-hide 指令:ng-hide 指令用于隐藏或显示 HTML 元素. <!DOCTYPE html> <html> <head> <meta…

AngularJS学习之旅—AngularJS Table(十一)

1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/angular.min.js"></script> </head> <body> <div ng-app="myA…

AngularJS学习之旅—AngularJS Select(十)

1.AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. ng-option:创建一个下拉列表,列表项通过对象和数组循环输出 eg: <div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-…

AngularJS学习之旅—AngularJS Http(九)

1.AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. eg: // 简单的 GET 请求,可以改为 POST $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(response) { // 请求失败执行代码 }); //简便…

AngularJS学习之旅—AngularJS 服务(八)

1.AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务.2.什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 有个 $location 服务,它可以返回当前页面的 URL 地址. 注意 $location 服务是作为一个参数传递到 controller 中.如果要使用它,需要在 controller 中定义. var app = angular…

AngularJS学习之旅—AngularJS 过滤器(七)

1.AngularJS 过滤器过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器可用于转换数据: 过滤器描述 currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase 格式化字符串为小写. orderBy 根据某个表达式排列数组. uppercase 格式化字符串为大写. 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-…

【[AngularJS 1] Introduction to AngularJS】的更多相关文章