angular 语法的应用

心已赠人 2021-12-07 09:41 231阅读 0赞

angular.js 一个js框架 ， 是三大主流框架之一：（ vue  react angular ）；

原先的开发：前端和后台，利用 Ajax 进行交互，

但是框架却提出了一种开发模式：mvc　　这中模式应用也是极其广，微信小程序，三大框架，等；

mvc　　m代表：module 仓库　　v代表：view 视图层　　c代表：controller 控制器；

也就是说，前台不用在像以前，从服务器拿数据了，从 module 中 拿这个数据，这个拿数据的方法叫控制器 controller ，将数据渲染到视图层，将数据渲染到视图层，view 这种流程叫 mvc

![1484020-20190627193431417-1335585286.png][]

但凡是牵扯到指令上的东西，都是变量；

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：把一个页面当多个页面来用，需要配合页面路由来使用；

![1484020-20190627195745846-691798847.png][]

\{ \{\}\}：将数据渲染到页面中来；

备注：在所有的框架中都是：指令中后面的值没有特殊情况下都是数据（变量）；

例如：ng-model="name"　　name 就是数据，别看它在字符串里面包着；

ng-model=" 'name' "　　这样的 name 才是字符串，不过这个情况出现的少，可以忽略；

几个案例：

1. ng-model 案例：

\{ \{xi\}\}

</div>

2. 双向数据绑定最好的证明方式：

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

4. 对  var lis=\[10,20,30,40,50,60,70,80,90\]  数据进行循环渲染：

</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>

<title>Document</title>

</head>

</div>

</body>

</html>

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\}

下面将页面的跳转方式，

路由：route 引入文件 angular-rotate.js 文件；

通过路径跳转到什么地方，与传统的 a 链接跳转有很大的区别 ，这种路由跳转是在一个页面上进行数据及模块的切换，并不是那种从一个页面跳到另一个页面；

angular-rotate.js 定义模式的依赖：ngRoute;

angular定义模块的方式：angular.module　　凡是 angular的 js 文件，我们都可以通过这种方式进行查看，定义模式的依赖

前端模块的定义：

ng-view 单页面的最大的容器，用来存放路由对应组件或页面；

为了具有观赏性，以下案例截图

一种很简单的案例：

view 部分

![1484020-20190627202522636-1267307249.png][]

js 部分

![1484020-20190627202603477-1206959966.png][]

![1484020-20190627203003564-27031722.png][]

上面的路径指的是 .when （）中的 第一个参数；

这个案例虽然简单，但是实际开发种用不上，所以，延伸出下一个案例：

view 还是不变

![1484020-20190627203510840-2032812582.png][]

js 部分

![1484020-20190627204326198-100070591.png][]

跳转zhang 页面的另一种写法

![1484020-20190628113146981-1057919839.png][]

shou.html　　可通过截图得知 shou.html 就是要往 ng-view 传入的内容 主要看 a 链接对传参的处理

![1484020-20190627203711061-1183572426.png][]

在 a 标签上 对 页面 zhang 的另一种 传参

![1484020-20190628113453127-702093607.png][]

a.js 用于对 shou.html 的数据传输

![1484020-20190627203837490-277967398.png][]

zhang.html　　可在其中看到 zhang.html 起到的作用，在同一个页面传输不同的数据

![1484020-20190627204056084-467095805.png][]

e.js 对 zhang.html 数据的处理

![1484020-20190627204148667-1225790718.png][]

转载于:https://www.cnblogs.com/shangjun6/p/11099531.html

[1484020-20190627193431417-1335585286.png]: /images/20211207/97bb44adaae943b396621b569a20e9e5.png
[1484020-20190627195745846-691798847.png]: /images/20211207/87daca38b5cb4f7d8807af9798ea7346.png
[1484020-20190627202522636-1267307249.png]: /images/20211207/51fbc1123a284e40ae18ce871587b093.png
[1484020-20190627202603477-1206959966.png]: /images/20211207/3fdcdea0217e4450be2c9de795af08d4.png
[1484020-20190627203003564-27031722.png]: /images/20211207/9e292398fa0e4bcdb6306ff261c7bdb3.png
[1484020-20190627203510840-2032812582.png]: /images/20211207/5720261d3f1540319a66073529389e78.png
[1484020-20190627204326198-100070591.png]: /images/20211207/a4e73bb6ebfa4a16837dfdb7bbd8a965.png
[1484020-20190628113146981-1057919839.png]: /images/20211207/414493576274436991bf49ef1ebcd1e2.png
[1484020-20190627203711061-1183572426.png]: /images/20211207/18cb53d1c5224388863fd618c925e5f9.png
[1484020-20190628113453127-702093607.png]: /images/20211207/12055831de2245caa2f9d92656c13487.png
[1484020-20190627203837490-277967398.png]: /images/20211207/f23381a258f54551b5119ab6231aab6f.png
[1484020-20190627204056084-467095805.png]: https://img2018.cnblogs.com/blog/1484020/201906/1484020-20190627204056084-467095805.png
[1484020-20190627204148667-1225790718.png]: https://img2018.cnblogs.com/blog/1484020/201906/1484020-20190627204148667-1225790718.png