2019-11-23

JavaScript

5 分钟读完 (大约 812 个字) 0次访问

AngularJS v1.x使用总结

最近在改一个前后端分离的项目,前端用的Angular 1.4.5,后端用的java,由于AngularJs在4年前简单的使用过一次，大多都忘记了，这次拿到这个项目(前端被压缩过),第一眼就瞬间懵逼了,但是领导已经下了死命令了，也只得硬着头皮干，索性就把这次遇到的一些知识点记录一下。

控制器&作用域

ng-controller 指令指定使用的控制器，ng-app 指令初始化一个 AngularJS 应用程序,$scope作用域作为当前controller范围内的数据传输纽带，在controller中的$scope上添加相应的对象或者属性，在html即可使用

<div ng-app="myApp" ng-controller="myCtrl">

</div>

<script>
var app = angular.module('myApp', []); //定义一个模块
app.controller('myCtrl', function($scope) {
  
});
</script>

表达式

,AngularJS 表达式可包含文字、运算符、变量、对象，将表达式中的内容绑定到HTML中

div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

ng-model 指令

数据双向绑定,在界面或者js中改变绑定变量的值，另一边也会随之影响

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

<p>修改输入框的值，标题的名字也会相应修改。</p>

</body>
</html>

自定义指令

Angular可以使用directive 来自定义指令

angular.module("app").directive("pivottableViewPanel",
    function() {
        return {
            restrict: "AE",
            scope: {
                authType: "@",
                authId: "=",
                appChange(): "&"
            },
            templateUrl: "js/modules/apps/pivottable/tpls/pivottableViewPanel.html",
            link: function($scope, $element, $attr) {}
        }
    })

restrict 值可以是以下几种:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
templateUrl：指定组件引用的html，可以是html代码也可以是html路径；
scope：定义组件属性:
@:单项绑定的前缀标识符,例如:;
=:双向数据绑定前缀标识符,例如:;
<:单项绑定的前缀标识符，和=使用类似,例如:,但是不会影响父组件对象的值;
&:绑定函数方法的前缀标识符，例如：
我们定义好的组件有一下几种方式可以调用:
元素名:<pivottable-view-panel></pivottable-view-panel>;
属性：<div pivottable-view-panel></div>;
类名：<div class="pivottable-view-panel"></div>;

注解：;
这里需要注意的是，组件用驼峰命名法，Angular会自动将大写字母转为小写且在字母前以-隔开,在定义的scope中，如果对象属性只有值，默认组件属性是属性名转换后的名称,如果属性有值则使用属性值转换后的属性

scope: {
               authType: "@",
               authId: "=",
               appChange(): "&"
           }
		用的时候则是<xxx auth-id></xxx>
scope: {
               authType: "@",
               authId: "=curAuthId",
               appChange(): "&"
           }
		用的时候则是<xxx cur-auth-id></xxx>

自定义服务

Service是一个函数或对象，AngularJs自带了30多个服务，例如$http(向服务器请求数据)、$timeout(setTimeout),也可以自定义

1
2
3

angular.module("demo").service("dataSetService",function(){

});

使用的话需要在控制器中注入这个Service

1
2
3

angular.module("demo").controller('myCtrl', function($scope, dataSetService) {
    //使用dataSetService
});

依赖注入

Angular提供了依赖注入功能，在使用的时候，加入事先定义好的service/factory/provider即可在自动注入

["$q", "$timeout", "DataAjaxService"

1
2
3

function ($q, $timeout, dataAjaxService) {
   //此处即可使用$q
}]);

未完待续

# JavaScript

You forgot to set the qrcode for Alipay. Please set it in _config.yml.

You forgot to set the qrcode for Wechat. Please set it in _config.yml.

You forgot to set the business and currency_code for Paypal. Please set it in _config.yml.

You forgot to set the url Patreon. Please set it in _config.yml.

农民工学编程

大龄程序员

China,sichuan

文章

分类

标签

关注我