Angular
关注
分享
扫一扫
木生火
起舞弄清影，人间近黄昏;今夕是何年，点亮一盏灯
Email:2156858566@qq.com
展开
-
前端讲义60_AngularJS多个控制器
AngularJS的MVC架构更像是MVVM（Model,View,ViewModel）架构，控制器更像是ViewModel组件。前面我们已经实现了模块调用controller()方法就可一次注册一个控制器，传入的第二参数是一个函数，在该函数中可以声明一个$scope形参，这个就是应用程式的模型（model），设定$scope对象的属性，该属性和HTML中ng-model对应的变量就双向绑定了...原创 2019-06-07 10:25:33 · 168 阅读 · 0 评论 -
前端讲义59_AngularJS模块与控制器
我们知道在HTML中使用ng-app指令，即可定义一个Module（模块）。日常我们把应用拆分为一个个的小模块，模块之间相互依赖，这样各个功能可以非常方便重用和测试。模块有两种：匿名模块 <div ng-app>...</div> AngularJS可自动加载并创建AngularJS模块命名模块 <div ng-app=" HR_emp">......原创 2019-06-02 20:49:53 · 192 阅读 · 0 评论 -
前端讲义65_AngularJS表单相关指令应用
ng对input元素的type进行了扩展，一共提供了以下10中类型：text, number, url , email, radio, checkbox, hidden, button, submit, reset对表单内置4种CSS样式：ng-valid, ng-invalid, ng-pristine, ng-dirty对表单内置校验器：require, minlength, maxl...原创 2019-06-08 11:13:32 · 137 阅读 · 0 评论 -
前端讲义66_AngularJS表单：下拉列表的应用
表单里单/多选列表一般比较复杂，写个综合代码如下<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> ...原创 2019-06-08 17:31:16 · 129 阅读 · 0 评论 -
前端讲义67_AngularJS表单：动态生成列表项的应用
列表项的动态生成--使用ng-repeat指令<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> &...原创 2019-06-08 17:34:21 · 207 阅读 · 0 评论 -
前端讲义68_AngularJS表单：动态生成列表项的应用2
ng-options指令也可以动态生成列表项，选中的值是一个对象看看下面代码演示<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">...原创 2019-06-08 17:49:52 · 154 阅读 · 0 评论 -
前端讲义69_AngularJS 服务(Service)
AngularJS服务是一个函数或对象，内建了30 多个服务，常见内置服务，如下：$http用于注入封装的Ajax操作进行异步数据请求等等。$rootElement 根元素的访问$rootScope 根作用域的访问$window用于注入原生JS中的window对象。$document用于注入原生JS中的document文档对象。$cacheFactory 提供键/值对放置到对象缓存$...原创 2019-06-08 22:51:39 · 189 阅读 · 0 评论 -
前端讲义70_AngularJS服务$http简介
AngularJS $http 是一个用于读取web服务器上数据的服务$http服务是只能接受一个对象为参数的函数，这个参数用来生成HTTP请求的配置内容，函数返回一个promise对象，低版本具有success和error两个方法,高版本的then()方法。版本v1.5 中$http 的 success 和 error 方法已废弃，使用 then（）方法替代。一，AngularJS1.5...原创 2019-06-09 10:52:55 · 201 阅读 · 0 评论 -
前端讲义71_AngularJS服务：JS对象转化为查询字符串演示
Account为JS对象,如下:{userID: 'C10094207',userPass:'msh!123456'}转换成URL查询字符串userID=C10094207&userPass=msh!123456AngularJS代码如下：<script >var app = angular.module("mshApp", []);ap...原创 2019-06-09 12:20:01 · 197 阅读 · 0 评论 -
前端讲义53_AngularJS安装
AngularJS最实用的特性:双向数据绑定到HTML元素下载 https://www.angularjs.net.cn/download/<head><meta charset="utf-8"><script src="angular/angular.min.js"></script></head>MVC三层架构M...转载 2019-05-19 23:03:15 · 131 阅读 · 0 评论 -
前端讲义54_AngularJS的基本设计
ng-app指令 加入body标签中，这个设计意味所有处于<body>…</body>元素内，可使用AngularJS指令，比如，下面AngularJS指令含义ng-init指令 定义了初始值ng-model指令 绑定 HTML 元素 到应用程序数据{{}} 输出表达式代码举例<!DOCTYPE html><html>...原创 2019-05-22 23:04:42 · 256 阅读 · 0 评论 -
前端讲义58_5分钟精通AngularJS的MVC基本概念
Angular的MVC基本概念模型(model) ：应用的所需数据--- angular变量($scope.XX)控制器(controller)：应用的行为(业务控制逻辑)--- -angular函数(function)视图(view)：应用的界面(显示给用户看到的) ---Html+Angular指令双向绑定：控制器是Javascript代码设计的，视图模板是用HTML代码设计的，...原创 2019-05-28 00:46:19 · 154 阅读 · 0 评论 -
前端讲义61_AngularJS的$rootScope全局对象是各个 controller 中 $scope对象的桥梁
$scope是一个指向应用模型的对象，用在 HTML (视图) 和 JavaScript (控制器)之间监控表达式和传递事件。前面了解js，其中有全局变量与局部变量，全局变量可以在方法或者闭包内引入，而局部变量只能在其定义的方法内使用，其他方法不能引用到的。$scope跟变量性质一样。angular中的$scope根据需求，可定义成一个变量或者是一个对象，如下：var app = an...原创 2019-06-07 13:35:34 · 421 阅读 · 0 评论 -
前端讲义62_AngularJS的$watch方法
$watch（）方法可以监听$scope作用域内属性的改变，代码如下：<body ng-app="empApp"><div ng-controller="AddCtrl"> 代理人工号：<input type="text" ng-model="empid"><p></div> <div ng-control...原创 2019-06-07 17:55:44 · 246 阅读 · 0 评论 -
前端讲义63_AngularJS 内置过滤器应用
1、limitTo（限制数组长度或字符串长度）：截取数组或者字符串的长度，如果值为负数，从数组或者字符串的尾部开始截取。 //截取数组arr的前四位，以数组的形式返回 <li>{{arr|limitTo:'4'}}</li>//截取数组arr的最后四位，以数组的形式返回 <li>{{arr|limitTo:'-4'}}</li&...原创 2019-06-07 20:56:59 · 179 阅读 · 0 评论 -
前端讲义64_AngularJS鼠标与键盘事件有关指令
ngMousedown 触发条件：鼠标按下，左右中间按下都会触发ngMouseup 触发条件：鼠标按下弹起，左右中间按下弹起都会触发ngMouseenter 触发条件：鼠标进入ngMouseleave 触发条件：鼠标离开ngMousemove 触发条件：鼠标移动ngMouseover 触发条件：鼠标进入ngClick 触发条件：单击 适用标签：所有ngDblclick ...原创 2019-06-07 23:21:53 · 420 阅读 · 0 评论 -
前端讲义57_AngularJS数组循环
ng-repeat 指令会重复一个 HTML 元素，对于集合中（数组中）的每项会克隆一次HTML元素。效果如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>AngularJS循环取出数组值</title><script src="an...原创 2019-05-24 06:01:47 · 249 阅读 · 0 评论 -
前端讲义56_AngularJS的数组（含二维演示）
一维数组与二维数组的，代码案例<!DOCTYPE html><html><head><meta charset="utf-8"><title>AngularJS 数组 </title><script src="angular/angular-1.6.2.min.js"></script>...原创 2019-05-23 21:20:08 · 237 阅读 · 0 评论 -
前端讲义55_AngularJS对象
AngularJS表达式支持对象,数组等复合类型<!DOCTYPE html><html><head><meta charset="utf-8"><title>AngularJS 对象 </title><script src="angular/angular-1.6.2.min.js"></s...原创 2019-05-23 20:46:37 · 137 阅读 · 0 评论 -
前端讲义72_AngularJS服务$http应用演示
本案例演示$http服务功能：1，文本框内输入博主名称 2，然后选择博主专栏3，传递给远程服务处理 ，4服务器返回处理结果，界面如下：HTML模板部分<div ng-app="mshApp" ng-controller="mshCtr"><form id="userForm"> 优快云博主:<input type="text" name=...原创 2019-06-09 23:14:54 · 140 阅读 · 0 评论