当前位置：首页 > 资讯 > 系统环境 > 服务器应用

关于AngularJS

时间：2018-12-25 22:45 作者：sidney_c 来源：sidney_c 阅读：380
扫一扫，手机访问

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

{{(5*(5-2))+""+

----基础----

1.表达式

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

例：<p>{{(5*(5-2))+""+"123"}}</p>

2. AngularJS 通过指令 ng-directives 扩展 HTML

ng-app
指令定义一个 AngularJS 应用程序。指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJS 应用都必需要要一个根元素。HTML 文档中只允许有一个 ng-app 指令，假如有多个 ng-app 指令，则只有第一个会被使用。
ng-model
指令把元素值（比方输入域的值）绑定到应用程序。
ng-bind
告诉 AngularJS 使用给定的变量或者表达式的值来替换 HTML 元素的内容。假如给定的变量或者表达式修改了，指定替换的 HTML 元素也会修改。
ng-init 指令: 用于对ng-model指定的值进行初始化操作

3.双向数据绑定

MVVM：模型的改变能影响视图view,视图的改变也能影响到模型
通过和ng-click来改变数据

4.板块（module）

通过板块对页面进行业务上的划分
将重复使用的指令或者者过滤器之类的代码做成板块，方便复用
板块是应用控制器的容器。
控制器通常属于一个板块。

创立一个板块

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

5.控制器（ng-controller）

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

创立一个控制器

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

可以以文件的形式存在

6.作用域 (Scope)

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

7.过滤器

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

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

8.自己设置过滤器

    var m1 = angular.module(‘myApp’,[]);//给字符串加“-”    m1.filter('addline',function(){            return function(str){                return "-"+str;            }        });        <p ng-init=“name=‘123’”>{{name  |    addline}}</p>//  -123

----指令----

1. ng-model 指令：

绑定 HTML 元素到应用程序数据。
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（见图表）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

2. ng-repeat 指令：

通过in的方式遍历每一项

例： <li ng-repeat="x in ['a','b','c']">{{x}}</li>

辅助功能:

$index ,  $first,  $middle,  $last, $even,  $odd ,  ng-repeat-start,  ng-repeat-end

3. 事件指令：

ng-click/dbclick/mousemove……
ng-copy
ng-cut
ng-paste
ng-change

4.绑定指令:

ng-bind
ng-bind-template（解析多个绑定的变量）
ng-bind-html(sanitize插件)
ng-cloak(解析之前是display:none,解析成功之后display:block)
ng-non-bindable(禁止解析)

4.样式相关指令：

ng-class（假如表达式中变量不为字符串，支持{{}}）
ng-style （表达式中变量需要加{{}}）
ng-href
ng-attr-*
ng-src

ng-show
ng-hide
ng-if(相似ng-show,dom操作除节点)

5.自己设置指令：

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中的服务指的是少量函数或者者对象，他们可以在整个应用中持有某些行为和状态。每一个服务都只有一个实例，无论从应用中何处访问该服务，指向的都是同一个对象。

1.服务与控制器

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

2. Angular内置服务

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

$timeout$interval$http$scope       $apply       $watch$location$log$filter

3.$http服务

$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(fn1).error(fn2)等价于$http({    //配置对象}).then(fn1,fn2)angular jsonp回调函数名肯定是JSON_CALLBACK

4.自己设置服务

创立自己设置服务有两种方法：

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

5.使用factory方式自己设置服务

App.factory（name,fn）

6.使用service方式自己设置服务

App.service（name,fn）

7.使用constant和value方式自己设置服务

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

Value方法调用格式：
App.value（name,value）

----插件----

ng-route

    引入对应版本的ng-route插件设置显示容器ng-view定义$routeProvider配置(config)    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(xx);}]);$cookieStore  有三个方法 ：1:get(key)     获取cookie2:put(key,value)   设置cookie3:remove(key)    移除cookie

全部评论(0)

上一篇：Docker命令-docker start/stop/stats/restart
下一篇：Anchor Boxes：物体检测的关键

动风网络

店铺

推荐商品