angular
ng大法
_冷月心
[前端前端大前端]微信公众号作者,前端爱好者,日语爱好者,英语爱好者。
展开
-
Angular自定义指令入门
Angular指令--Hello World代码效果图代码<!DOCTYPE html><html lang="en" ng-app="app"><head> <meta charset="UTF-8"> <title>Angular指令--Hello World</title></head><...原创 2019-04-04 08:20:28 · 649 阅读 · 0 评论 -
Angular的模块化开发
Angular的模块化开发目录结构模板内容入口文件index.html效果图在线测试目录结构说明:模块化开发会用外链模板,需要跑在服务器环境上述结构WWW文件夹是项目根目录,子文件夹router-template里是各个抽离出去的模版和router-template同级的index.html是入口文件,它和模板里的index.html 不是一回事模板内容root.htm...原创 2019-04-16 10:00:15 · 1346 阅读 · 0 评论 -
Angular--factory
factory代码效果图说明代码<!DOCTYPE html><html lang="en" ng-app="app"><head> <meta charset="UTF-8"> <title>Angular--factory</title> <style> *{margin: 0;padding...原创 2019-04-03 14:48:37 · 1115 阅读 · 0 评论 -
service函数
文章目录代码效果图代码<!DOCTYPE html><html lang="en" ng-app="app"><head> <meta charset="UTF-8"> <title>service服务</title> <style> *{margin: 0;padding: 0...原创 2019-04-03 11:49:37 · 795 阅读 · 0 评论 -
Angular--tab栏切换
Angular--tab栏切换效果图代码新指令效果图代码<!DOCTYPE html><html lang="en" ng-app="myapp"><head> <meta charset="UTF-8"> <title>Angular---tab切换</title> <style> ...原创 2019-04-03 11:09:10 · 1607 阅读 · 0 评论 -
ng-show和ng-if的区别
ng-show和ng-if的区别简单比较代码代码解释简单比较共同点: 都是判断性的指令,里边可以是简单的表达式,返回结果是布尔类型的值不同点:ng-show是css层面的元素显示与隐藏,不会引发浏览器的回流,仅仅是视图的重绘;相反的,ng-if是dom层面的上下树,不仅仅是视图的重绘,还会引发浏览器的回流,所以会重新实例化控制器代码<!DOCTYPE html>&l...原创 2019-04-03 08:12:04 · 7062 阅读 · 0 评论 -
Angular路由
代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>AngularJS 路由实例</title><script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js">...原创 2019-04-11 20:26:43 · 282 阅读 · 0 评论 -
Angular--$http服务
Angular--$http服务代码stu.json代码<!DOCTYPE html><html lang="en" ng-app="app"><head> <meta charset="UTF-8"> <title>Angular-$http</title></head><body ng-...原创 2019-04-02 18:54:03 · 324 阅读 · 0 评论 -
Angular--ng-options
Angular--ng-options用途下拉菜单组成适用情形一,普通数组适用情形二(数组嵌套对象)适用情形三(普通对象)用途ng-options属性特别的好用,可以智能的从控制器中取值当前的值做选项,用在下拉菜单里边下拉菜单组成组成就两个东西,一个是显示的东西,叫label,一个是要提交的值,叫value以打折为例,呈递到界面的选项是五折六折七折,真正提交的是0.5,0.6,0....原创 2019-04-02 17:42:07 · 1166 阅读 · 0 评论 -
Angular---学生信息管理系统
文章目录代码添加效果图新指令在线演示代码<!DOCTYPE html><html lang="en" ng-app="app"><!-- 引入控制程序 --><head> <meta charset="UTF-8"> <title>对象数据绑定</title> <script type="tex...原创 2019-04-02 13:58:36 · 1043 阅读 · 0 评论 -
模拟微博发布
代码<!DOCTYPE html><html lang="en" ng-app="app"><!-- 引入控制程序 --><head> <meta charset="UTF-8"> <title>双向数据绑定--调色板</title> <script type="text/javascript" ...原创 2019-04-02 11:54:29 · 774 阅读 · 0 评论 -
Angular--小小调色板
Angular--小小调色板代码效果图说明在线演示代码<!DOCTYPE html><html lang="en" ng-app="app"><!-- 引入控制程序 --><head> <meta charset="UTF-8"> <title>双向数据绑定--调色板</title> <scri...原创 2019-04-02 09:47:16 · 525 阅读 · 0 评论 -
Angular引入控制器
Angular引入控制器代码效果图说明代码<!DOCTYPE html><html lang="en" ng-app="app"><!-- 引入控制程序 --><head> <meta charset="UTF-8"> <title>Angular控制器</title> <script type...原创 2019-04-02 08:48:57 · 437 阅读 · 0 评论 -
Angular 1.x HelloWorld
Angular 1.x HelloWorld官网 angularjs.org简介入门代码效果图代码解释官网 angularjs.org简介先来个官网的解释大概意思菜鸟教程的解释AngularJS 是一个 JavaScript 框架。它可通过 script 标签添加到 HTML 页面。AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。在an...原创 2019-04-02 08:54:59 · 384 阅读 · 0 评论 -
angular过滤器
angular过滤器基本过滤器自定义过滤器基本过滤器基本用法 {{data|format}},数据|格式代码<!DOCTYPE html><html lang="en" ng-app="myapp"><head> <meta charset="UTF-8"></head><body> ...原创 2019-04-11 10:15:54 · 710 阅读 · 0 评论 -
Angular ng-model指令详解
Angular ng-model指令详解声明将输入域的值与 AngularJS 创建的变量绑定双向数据绑定表单验证自定义类样式常用应用状态声明本文根据菜鸟教程整理http://www.runoob.com/angularjs/angularjs-model.html将输入域的值与 AngularJS 创建的变量绑定<!DOCTYPE html><html>...原创 2019-04-11 09:44:58 · 3685 阅读 · 0 评论 -
Angular路由之ui-router
Angular路由之ui-router说明官网hello world完整代码在线测试补充效果图说明上一篇介绍了angular自带的路由的使用,但实际上已经用的很少了,基本被第三方的ui-router取代。二者使用上区别不是很大,之所以前者被取代,是因为ui-router功能更为强大官网https://ui-router.github.io/hello world自认为最好的入...原创 2019-04-15 09:29:35 · 871 阅读 · 0 评论