计算机知识

当前位置:澳门新葡萄京 > 计算机知识 > AngularJS 表达式写在双大括号内

AngularJS 表达式写在双大括号内

来源:http://www.hhmtch.com 作者:澳门新葡萄京 时间:2020-02-08 05:13

图片 1

AngularJS 表达式写在双大括号内:{{ expression }},把数据绑定到 HTML,并在表达式书写的位置"输出"数据AngularJS 表达式 像 JavaScript 表达式一样,它们可以包含文字、运算符和变量。

例:<p>{{ "" "123"}}</p>

  • ng-app指令定义一个 AngularJS 应用程序。指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJS 应用都必须要要一个根元素。HTML 文档中只允许有一个 ng-app 指令,如果有多个 ng-app 指令,则只有第一个会被使用。
  • ng-model指令把元素值绑定到应用程序。
  • ng-bind告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。如果给定的变量或表达式修改了,指定替换的 HTML 元素也会修改。
  • ng-init 指令: 用于对ng-model指定的值进行初始化操作
  • MVVM:模型的改变能影响视图view,视图的改变也能影响到模型通过和ng-click来改变数据
  • 通过模块对页面进行业务上的划分
  • 将重复使用的指令或者过滤器之类的代码做成模块,方便复用
  • 模块是应用控制器的容器。
  • 控制器通常属于一个模块。
创建一个模块

语法: angular.module第二个参数是个数组,这个数组里的每一个元素,是我们当前模块依赖的其他模块注意: 即便我们不依赖其他的模块,也需要传递一个空数组,因为如是不传第二个参数的话,这个方法的作用就会变为获取一个名为"模块名"的模块对象angular.module,是获取一个名为myApp的模块对象。我们需要给ng-app指令一个属性值,这个值就是我们创建的模块名:告诉anuglar,现在由我们自己创建的这个模块来管理页面。

AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动。控制器采用ng-controller指令定义。控制器是一个包含属性/属性和JavaScript对象的功能。每个控制器接受$scope参数指定应用程序/模块,由控制器控制。

创建一个控制器

1. 函数式声明法 (1.3.0-beta.15之前的版本都可以用)2. module.controller(‘controllername’,[‘$scope’,function{}])

可以以文件的形式存在

scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。注意:scope的范围$rootScope 它可以作用在 ng-app 指令包含的所有 HTML 元素中作用域和根作用域相当于js当中的局部变量和全局变量变量优先级为就近原则

过滤器使用一个管道字符添加到表达式和指令中。

图片 2

示例: 1、搜索过滤列表 2、价格计算

 var m1 = angular.module(‘myApp’,[]);//给字符串加“-” m1.filter('addline',function(){ return function{ return "-" str; } }); <p ng-init=“name=‘123’”>{{name | addline}}</p>// -123
  • 绑定 HTML 元素 到应用程序数据。
  • 为应用程序数据提供类型验证(number、email、required)。
  • 为应用程序数据提供状态。
  • 为 HTML 元素提供 CSS 类。
  • 绑定 HTML 元素到 HTML 表单。

    图片 3

  • 通过in的方式遍历每一项
例: <li ng-repeat="x in ['a','b','c']">{{x}}</li>

辅助功能:

$index , $first, $middle, $last, $even, $odd , ng-repeat-start, ng-repeat-end
  • ng-click/dbclick/mousemove……
  • ng-copy
  • ng-cut
  • ng-paste
  • ng-change
  • ng-bind
  • ng-bind-template(解析多个绑定的变量)
  • ng-bind-html(sanitize插件)
  • ng-cloak(解析之前是display:none,解析成功之后display:block)
  • ng-non-bindable
  • ng-class(如果表达式中变量不为字符串,支持{{}})
  • ng-style (表达式中变量需要加{{}})
  • ng-href
  • ng-attr-*
  • ng-src
  • ng-show
  • ng-hide
  • ng-if(类似ng-show,dom操作除节点)

directive 函数用来添加自定义的指令使用驼峰法来命名一个指令, myDirective, 但在使用它时需要以 - 分割, my-directive:要调用自定义指令,HTML 元素上需要添加自定义指令名

<body ng-app="myApp"><my-directive></my-directive><script>var app = angular.module("myApp", []);app.directive("myDirective", function() { return { template : "<h1>我的自定义指令!</h1>" };});</script>

restrict 值:

  • E 作为元素名使用
  • A 作为属性使用
  • C 作为类名使用
  • M 作为注释使用区分大小写,可以组合使用的
  • restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
  • replace-
  • template
  • templateUrl

scope:

  • true:独立作用域 .表示每一条调用的指令都是一个单独的作用域-- 隔离作用域{} :

绑定策略

  • @ 绑定的普通字符串
  • = 等作用域下的变量数据
  • & 函数

controller:共享的数据link:(参数:scope,element,attr,reController)

Angularjs中的服务指的是一些函数或者对象,他们可以在整个应用中持有某些行为和状态。每一个服务都只有一个实例,无论从应用中何处访问该服务,指向的都是同一个对象。

在用angular进行开发的应用中,毫无疑问的会同时用到控制器和服务。控制器和服务满足了我们应用中某些方面的需求。下面的表可以概览控制器和服务器各自不同的职责。

图片 4

Angular提供了许多个内置服务,这些服务可以在控制器中直接调用,无需访问服务所涉及的底层代码,从而确保整个应用的结构不被污染,这些服务在任何地方调用的方法都是统一的。下面是常用的内置服务:

$timeout$interval$http$scope $apply $watch$location$log$filter
$http快捷方法与服务端交互

在angular中,页面与服务端交互的主要方式是调用$http服务模块,该模块的底层封装了javascript中的XMLHttpRequest对象,并接受一个对象作为参数,用于收集生成的HTTP请求的配置内容,同时返回一个promise对象,该对象拥有名为success和error的两个回调方法。根据类型的不同$http模块提供了不同的调用方式,通用格式如下:

$http.请求类型(url,[data],[config]).success(data,status,headers,config){//成功后的操作}.error(data,status,headers,config){//失败后的操作}请求类型包括POST、GET、JSONP、DELETE、PUT、HEAD

$http配置对象方式与服务端交互

在angular中,还可以将$http服务模板当成一个函数来使用,将构造XHR对象的所有配置项作为一个对象,并将对象定义为函数的形参,在调用时,只需将形参改对象中各属性值即可,调用格式如下:

$http({ method: url: data: params: (字符串或对象,追加到url后,作为发送数据的一部分) transformRequest:(对请求头和请求体进行序列化,生成数组发送给服务端) transformREsponse:(解析服务器发送来的被序列化的数据) cache: (是否对请求返回的数据进行缓存) timeout: $http({ //配置对象}).success.error等价于$http({ //配置对象}).thenangular jsonp回调函数名一定是JSON_CALLBACK

创建自定义服务有两种方法:

  • 1、使用内置的$provide服务
  • 2、调用模块当中的服务注册方法(factory,service,constant,value)

App.factory

App.service

Constant方法调用格式:App.constant(name,value)

Value方法调用格式:App.value(name,value)

  • ng-route
 引入对应版本的ng-route插件设置显示容器ng-view定义$routeProvider配置 when template templateUrl controller otherwise redirectTo
  • ng-sanitize
<ul> <li><a href=“#/”>默认项</a></li> <li><a href=“#/second”>第二项</a></li> <li><a href=“#/asdasdasd”>错误路由</a></li> </ul><div ng-view></div><script type="text/javascript"> angular.module('routingApp', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/', { template: '<h5>这是一个默认页面</h5>' }) .when('/second', { template: '<h5>这是第二个页面</h5>' }) .otherwise({redirectTo: '/'}); }]); </script>
  • ng-animate
Animation api自带的类.ng-enter.ng-enter-active.ng-leave.ng-leave-active

Angular 动画第三方库

  • ng-cookies
var myApp = angular.module("myApp", ["ngCookies"]);myApp.controller("NavCtr", ["$cookieStore", function NavCtr($cookieStore) { $cookieStore.put("AngularJs", "xcccc"); var xx = $cookieStore.get("AngularJs"); console.info;$cookieStore 有三个方法 :1:get 获取cookie2:put(key,value) 设置cookie3:remove 移除cookie

本文由澳门新葡萄京发布于计算机知识,转载请注明出处:AngularJS 表达式写在双大括号内

关键词: AngularJS

上一篇:编写一定的 php 代码并执行

下一篇:没有了