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 案例：　

　　　　　　<div ng-model="xi='hello'">
　　　　　　　　{{xi}}
　　　　　　</div>
　　　　2. 双向数据绑定最好的证明方式：　　　　　　
　　　　　　<input type="text" ng-model='name' value="{{name}}">
　　　　　　<p>{{name}}</p>

　　　　3. 声明 ng-app 的使用范围：

　　　　　　<body ng-app="myApp"></body>
　　　　4. 对  var lis=[10,20,30,40,50,60,70,80,90]  数据进行循环渲染：
　　　　　　<div ng-controller="li">
　　　　　　　　<div ng-repeat="(index,item) in lis">
　　　　　　　　　　<p>{{item.name}}</p>
　　　　　　　　</div>
　　　　　　</div>
 
　　module 讲解：
　　对于 ng-app 的定义：否则在 view 视图层，便不能使用 angular 的语法
　　var app=angular.module(" view中 ng-app的属性值",["依赖的模块"]);
　　app.controller(" view中 ng-controller 的属性值",function($scope,$http,$routeParams){
　　　　//$scope：写数据，用于向 view 传输　　数据格式 三种：字符串　　数组　　对象
　　　　$scope.lis=[10,20,30,40,50,60,70,80,90];
　　　　//$http：向服务器请求数据
　　　　$http.get("url地址").then(function(res){
　　　　　　console.log(res)　　//res 便是向服务器请求的数据
　　　　})
　　　　//$routeParams：获取 url 地址中的参数
　　　　console.log($routeParms);
　　})
　　
　　完整操作的案例：
　　

　　<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　　　<meta charset="UTF-8">
　　　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　　　<title>Document</title>
　　　　　　<script src="lib/angular.js"></script>
　　　　　　<script src="lib/angular-route.js"></script>
　　　　</head>
　　　　<body ng-app="myApp">
 
　　　　　　<!-- 通过 ajx 请求数据 -->
　　　　　　<div ng-controller="li">
　　　　　　　　<div ng-repeat="(index,item) in lis">
　　　　　　　　　　<p>{{item.name}}</p>
　　　　　　　　</div>
　　　　　　</div>
　　　　</body>
　　</html>
　　<script>
　　var app=angular.module("myApp",[]);
　　// 向服务器请求数据
　　app.controller("li",function($scope,$http){
　　　　$http.get("01.json").then(function(res){
　　　　　　console.log(res.data.sd);
　　　　　　$scope.lis=res.data.sd;
　　　　})
　　})
　　</script>
　　-------------------------------------------------------
　　01.json 文件　
　　{
　　"sd":[
　　　　　　{"name":"zhang","age":20},
　　　　　　{"name":"zhang","age":20},
　　　　　　{"name":"zhang","age":20},
　　　　　　{"name":"zhang","age":20},
　　　　　　{"name":"zhang","age":20},
　　　　　　{"name":"zhang","age":20},
　　　　　　{"name":"zhang","age":20},
　　　　　　{"name":"zhang","age":20}
　　　　]
　　}
　　
　　下面将页面的跳转方式，
　　路由：route 引入文件 angular-rotate.js 文件；
　　通过路径跳转到什么地方，与传统的 a 链接跳转有很大的区别 ，这种路由跳转是在一个页面上进行数据及模块的切换，并不是那种从一个页面跳到另一个页面；
　　angular-rotate.js 定义模式的依赖：ngRoute;
　　angular定义模块的方式：angular.module　　凡是 angular的 js 文件，我们都可以通过这种方式进行查看，定义模式的依赖
 
　　前端模块的定义：
　　　　ng-view 单页面的最大的容器，用来存放路由对应组件或页面；
 
　　为了具有观赏性，以下案例截图
　　一种很简单的案例：
　　　　view 部分
　　　　

　　　　

　　　　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 语法的应用的更多相关文章

  1. angular2.0学习笔记4.npm常用指令记录及angular语法

    以下命令,都需要在命令行窗口中,先切入到项目文件夹目录,再执行 1.npm start 这个命令会在“监听”模式下运行TypeScript编译器,当代码变化时,它会自动重新编译. 同时,该命令还会在浏 ...

  2. Angular语法（三）——数据绑定

    绑定类型 绑定类型可以按照数据流的方向分为三类:从源到视图,从视图到源,以及双向序列 示例 <!-- Bind button disabled state to `isUnchanged` pr ...

  3. angular语法：Controller As

    这个东东我觉得很好哟. 数据可以在同一个页面的不同的controller之间自由穿梭... 当然, https://thinkster.io/a-better-way-to-learn-angular ...

  4. Angular语法（一）——展示数据

    双花括号{{}} 展示数据 title = 'Tour of Heroes'; myHero = 'Windstorm'; <h1>{{title}}</h1> <h2& ...

  5. Angular语法（二）——模板语法

    双花括号{{}} <img src="{{heroImageUrl}}" style="height:30px"> <!-- "Th ...

  6. Angular源码分析之$compile

    @(Angular) $compile,在Angular中即"编译"服务,它涉及到Angular应用的"编译"和"链接"两个阶段,根据从DO ...

  7. angular学习笔记02 angular指令大全

    第一步 先要引入angular, 第二步  在 html 标签中<html  ng-app>  加入ng-app(这是个必须的,不然会报错) 接下来就可以去使用angular的各种指令了. ...

  8. 微信小程序之初探（常见语法 VS vue）常见问题（点击不生效，数据绑定）

    最近在调研微信小程序开发,对于一个前端小白来说,在各种框架都还用不熟的情况下,再来开发小程序确实还是不容易. 小程序出来之初,听过演讲,看过一点点儿视频,感觉和angular语法有点相似(PS:那是也 ...

  9. 混合开发 Hybird Ionic Angular Cordova web 跨平台 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

随机推荐

  1. 前端技术之：如何Mock GraphQL接口数据

    // 第一步:引入所依赖的库const { makeExecutableSchema, addMockFunctionsToSchema } = require('graphql-tools');co ...

  2. 实现 RSA 算法之改进和优化（第三章）（老物）

    第三章 如何改进和优化RSA算法 这章呢,我想谈谈在实际应用出现的问题和理解. 由于近期要开始各种忙了,所以写完这章后我短时间内也不打算出什么资料了=- =(反正平时就没有出资料的习惯.) 在讲第一章 ...

  3. puppet之模板和类

    puppet之模板和类 不同节点布置资源 vim /etc/puppet/manifests/site.pp 1 import "nodes/*.pp" 建立节点文件 mkdir ...

  4. Source Insight 中调用Notepad++

    options>custom commands 指令为 "E:\Program Files (x86)\Notepad++\notepad++.exe" %f 其中%f表示S ...

  5. suse清除kthrotlds木马病毒

    一.服务器感染了kthrotlds挖矿病毒 [root@51yt bin]# cd /bin/ [root@51yt bin]# wget https://busybox.net/downloads/ ...

  6. [uboot] （第三章）uboot流程——uboot-spl代码流程（转）

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/ooonebook/article/det ...

  7. Synchronized 失效原因

    Synchronized 同步出现失效 Synchronized ,大家都知道这个是Java 提供的一种原子性内置锁,其实现原理是通过获取对象的监视器monitor进行来实现同步的,只有当线程获取到对 ...

  8. PS使用滤镜制作光晕效果

    滤镜制作光晕效果 新建图层,将背景色填充为黑色 滤镜->渲染->镜头光晕 调整好光晕大小 通过滤色(图层两字下面一点点的位置,有个下拉菜单,点开就在里面),去黑留白 如果觉得光线不够,可以 ...

  9. Docker报错解决

    今天我在学习docker的时候,用docker安装nginx的时候报了如下错误: 尝试了卸载docker重装,删除nginx,删除nginx镜像文件都没有用,最后发现还是Linux和docker版本兼 ...

  10. 34.ITerm配置使用——2019年12月24日

    2019年12月23日15:17:36 ITerm使用教程 1.快键键配置 设置方法 设置方法如下: (1)选择 Preference 进入偏好设置: (2)选择 Profiles > Keys ...