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