angular 语法的应用
angular.js 一个js框架 , 是三大主流框架之一:( vue react angular );
原先的开发:前端和后台,利用 Ajax 进行交互,
但是框架却提出了一种开发模式:mvc 这中模式应用也是极其广,微信小程序,三大框架,等;
mvc m代表:module 仓库 v代表:view 视图层 c代表:controller 控制器;
也就是说,前台不用在像以前,从服务器拿数据了,从 module 中 拿这个数据,这个拿数据的方法叫控制器 controller ,将数据渲染到视图层,将数据渲染到视图层,view 这种流程叫 mvc
但凡是牵扯到指令上的东西,都是变量;
angular 他的指令都是 ng 开头的
view 视图层:
ng-app:声明:angular 的应用程序 / 指定 angular 的应用范围,是标签上的属性,只有 ng-app 才能使用 angular 的指令;一般我们都直接加在 body 上,意思是 整个页面都可以使用 angular 语法
ng-model:将数据渲染到指定的应用程序中,标签上的属性,也就是我们可以直接在 view 直接对 angular 的变量进行定义,然后 通过 {{}} 来进行渲染;
ng-bind:将应用程序中的数据中绑定到指定的 html 视图中,就是将数据渲染到页面的一种方式;
ng-controller:这个就是我们所说的 c 控制器,控制器在使用前需要定义;
ng-repeat:对于页面最好的操作,莫过于循环,省时省事,框架给我们提供的好方法;
ng-view:把一个页面当多个页面来用,需要配合页面路由来使用;
{{}}:将数据渲染到页面中来;
备注:在所有的框架中都是:指令中后面的值没有特殊情况下都是数据(变量);
例如:ng-model="name" name 就是数据,别看它在字符串里面包着;
ng-model=" 'name' " 这样的 name 才是字符串,不过这个情况出现的少,可以忽略;
几个案例:
1. ng-model 案例:
3. 声明 ng-app 的使用范围:
//$scope:写数据,用于向 view 传输 数据格式 三种:字符串 数组 对象
$scope.lis=[10,20,30,40,50,60,70,80,90];

js 部分
上面的路径指的是 .when ()中的 第一个参数;
这个案例虽然简单,但是实际开发种用不上,所以,延伸出下一个案例:
view 还是不变
js 部分
跳转zhang 页面的另一种写法
shou.html 可通过截图得知 shou.html 就是要往 ng-view 传入的内容 主要看 a 链接对传参的处理
在 a 标签上 对 页面 zhang 的另一种 传参
a.js 用于对 shou.html 的数据传输
zhang.html 可在其中看到 zhang.html 起到的作用,在同一个页面传输不同的数据

e.js 对 zhang.html 数据的处理
angular 语法的应用的更多相关文章
- angular2.0学习笔记4.npm常用指令记录及angular语法
以下命令,都需要在命令行窗口中,先切入到项目文件夹目录,再执行 1.npm start 这个命令会在“监听”模式下运行TypeScript编译器,当代码变化时,它会自动重新编译. 同时,该命令还会在浏 ...
- Angular语法(三)——数据绑定
绑定类型 绑定类型可以按照数据流的方向分为三类:从源到视图,从视图到源,以及双向序列 示例 <!-- Bind button disabled state to `isUnchanged` pr ...
- angular语法:Controller As
这个东东我觉得很好哟. 数据可以在同一个页面的不同的controller之间自由穿梭... 当然, https://thinkster.io/a-better-way-to-learn-angular ...
- Angular语法(一)——展示数据
双花括号{{}} 展示数据 title = 'Tour of Heroes'; myHero = 'Windstorm'; <h1>{{title}}</h1> <h2& ...
- Angular语法(二)——模板语法
双花括号{{}} <img src="{{heroImageUrl}}" style="height:30px"> <!-- "Th ...
- Angular源码分析之$compile
@(Angular) $compile,在Angular中即"编译"服务,它涉及到Angular应用的"编译"和"链接"两个阶段,根据从DO ...
- angular学习笔记02 angular指令大全
第一步 先要引入angular, 第二步 在 html 标签中<html ng-app> 加入ng-app(这是个必须的,不然会报错) 接下来就可以去使用angular的各种指令了. ...
- 微信小程序之初探(常见语法 VS vue)常见问题(点击不生效,数据绑定)
最近在调研微信小程序开发,对于一个前端小白来说,在各种框架都还用不熟的情况下,再来开发小程序确实还是不容易. 小程序出来之初,听过演讲,看过一点点儿视频,感觉和angular语法有点相似(PS:那是也 ...
- 混合开发 Hybird Ionic Angular Cordova web 跨平台 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
随机推荐
- 前端技术之:如何Mock GraphQL接口数据
// 第一步:引入所依赖的库const { makeExecutableSchema, addMockFunctionsToSchema } = require('graphql-tools');co ...
- 实现 RSA 算法之改进和优化(第三章)(老物)
第三章 如何改进和优化RSA算法 这章呢,我想谈谈在实际应用出现的问题和理解. 由于近期要开始各种忙了,所以写完这章后我短时间内也不打算出什么资料了=- =(反正平时就没有出资料的习惯.) 在讲第一章 ...
- puppet之模板和类
puppet之模板和类 不同节点布置资源 vim /etc/puppet/manifests/site.pp 1 import "nodes/*.pp" 建立节点文件 mkdir ...
- Source Insight 中调用Notepad++
options>custom commands 指令为 "E:\Program Files (x86)\Notepad++\notepad++.exe" %f 其中%f表示S ...
- suse清除kthrotlds木马病毒
一.服务器感染了kthrotlds挖矿病毒 [root@51yt bin]# cd /bin/ [root@51yt bin]# wget https://busybox.net/downloads/ ...
- [uboot] (第三章)uboot流程——uboot-spl代码流程(转)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/ooonebook/article/det ...
- Synchronized 失效原因
Synchronized 同步出现失效 Synchronized ,大家都知道这个是Java 提供的一种原子性内置锁,其实现原理是通过获取对象的监视器monitor进行来实现同步的,只有当线程获取到对 ...
- PS使用滤镜制作光晕效果
滤镜制作光晕效果 新建图层,将背景色填充为黑色 滤镜->渲染->镜头光晕 调整好光晕大小 通过滤色(图层两字下面一点点的位置,有个下拉菜单,点开就在里面),去黑留白 如果觉得光线不够,可以 ...
- Docker报错解决
今天我在学习docker的时候,用docker安装nginx的时候报了如下错误: 尝试了卸载docker重装,删除nginx,删除nginx镜像文件都没有用,最后发现还是Linux和docker版本兼 ...
- 34.ITerm配置使用——2019年12月24日
2019年12月23日15:17:36 ITerm使用教程 1.快键键配置 设置方法 设置方法如下: (1)选择 Preference 进入偏好设置: (2)选择 Profiles > Keys ...