angularJS

foreveryyyyyyy

已于 2023-11-17 11:15:46 修改

阅读量163

点赞数

分类专栏： html 文章标签： javascript angularjs

于 2021-10-27 10:31:47 首次发布

本文链接：https://blog.csdn.net/sliencr/article/details/120987727

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

是一个javaScript框架，通过<script>标签添加到html页面。通过指令扩展html，通过表达式绑定数据至html
- angularJS指令：通过ng-directives扩展了html；ng-app指令定义一个AnjularJS应用程序；ng-model指令把元素值绑定到应用程序；ng-bind指令把应用程序数据绑定到html视图。anjularJS指令就是以ng做为前缀的html属性。
- angularJS表达式：anjularJS表达式写在{{}}内，将数据绑定到html，这与ng-bind很相似。可以包含文字、运算符和变量。
- angularJS应用：anjularJS模块（model）定义了anjularJS应用，ng-app指令指明了应用；anjularJS控制器（controller）用于控制anjularJS应用，ng-controller指明了控制器。
angularJS指令：
- ng-app指令定义一个AnjularJS应用程序；
- ng-model指令把元素值绑定到应用程序；
- ng-bind指令把应用程序数据绑定到html视图；
- ng-init指令初始化数据；
- ng-repeat指令重复一个html元素；就是一个anjularJS迭代器；
angularJS作用域：（scope）
- 是应用在HTML（视图）和javaScript（控制器）之间的纽带；是一个对象；可以应用在视图和控制器上。
anjularJS控制器：（ng-controller）:用于定义一个控制器。
anjularJS过滤器：过滤器使用一个管道字符（|）添加到表达式和指令中
- currency格式化数字为货币格式；
- lowercase格式化字符串为小写；
- uppercase格式化字符串为大写；
- orderby根据某个表达式排列数组；
anjularJS服务（service）
- $location：返回当前页面的url
依赖注入
- 依赖注入就是我们需要的东西不重要使用new等关键字来创建，而是第三档提供，我们只需要引用就可以使用；不需要的时候就不去引用。
- 作用：依赖注入解决组件之间的依赖关系、配置及生命周期管理，通过转移对象控制，解决类之间的耦合问题，对象与对象之间是松散耦合关系
- anjularJS的集中依赖注入机制，包含5个核心组件：value、factory、service、provider、constant
  - Value是一个简单的JavaScript对象，用于向控制器传递值；
  - Factory是一个函数返回值，在service和controller需要时创建；

			<html ng-app='factoryApp'>
			<head>验证anjularJS的依赖注入组件factory</head>
			<body>
			    <div ng-controller='factoryController'>
			        <span>{{a}}与{{b}}相乘结果为：{{result}}</span>
			    </div>
			    <script src="libs/angular.js"></script>
			    <script src="libs/i18n/angular-locale_zh-cn.js"></script>
			    <script>
			        var mainApp = angular.module('factoryApp', []);
			        //value组件，可以向控制器传递值
			        mainApp.value('defaultInput', 9);
			        //factory是一个函数返回值，服务于service和controller
			        mainApp.factory('mathService', function () {
			            var factory = {};
			            factory.multiply = function (a, b) {
			                return a * b;
			            }
			            return factory;
			        });
			        //依赖注入，传入defaultInput与factory中定义的mathService，后面可直接使用
			        mainApp.controller('factoryController', function ($scope, mathService, defaultInput) {
			            $scope.a = defaultInput;
			            $scope.b = defaultInput;
			            $scope.result = mathService.multiply($scope.a, $scope.b);
			        })
			    </script>
			</body>
			</html>

provider（提供者）可以创建一个service、factory，provider中提供了一个factory方法get()，用于返回value/service/factory。

			<html ng-app='providerApp'>
			<title>验证FJS的依赖注入组件provide</title>
			<body>
			    <div ng-controller='providerController'>
			        <p>计算两数相乘，请输入第一个数字：<input type="number" ng-model="firstNumber" /></p>
			        <p>计算两数相乘，请输入第二个数字：<input type="number" ng-model="secondNumber" /></p>
			        <button ng-click='mathSquare()'>计算</button>
			        <p>结果为：{{result}}</p>
			    </div>
			    <!-- 引入依赖 -->
			    <script src="libs/angular.js"></script>
			    <script src="libs/i18n/angular-locale_zh-cn.js"></script>
			    <script>
			        var mainApp = angular.module('providerApp', []);
			        //angularJS模块可以在被加载和执行之前对模块自身进行配置，就要用到config，只有提供者Provider和常量constant才能注入到config中
			        mainApp.config(function ($provide) {
			            //provider（提供者）可以创建一个service、factory，provider中提供了一个factory方法get()，用于返回value/service/factory
			            $provide.provider('mathService', function () {
			                this.$get = function () {
			                    var factory = {}
			                    factory.multiply = function (a, b) {
			                        return a * b;
			                    }
			                    return factory;
			                }
			            })
			        })
			        //依赖注入，provider中定义的mathService，后面可直接使用
			        mainApp.controller('providerController', function ($scope, mathService) {
			            $scope.firstNumber = 9;
			            $scope.secondNumber = 10;
			            $scope.result = mathService.multiply($scope.firstNumber, $scope.secondNumber);
			            $scope.mathSquare = function () {
			                $scope.result = mathService.multiply($scope.firstNumber, $scope.secondNumber);
			            }
			        })
			    </script>
			</body>
			</html>

constant（常量）用来在配置阶段传递数值，value可以修改，constant不可以修改。
service服务是一个单一的JavaScript，包含了一组函数对象来执行某些任务，使用service()函数，然后注入到控制器。

angularJS服务：angularJS可以创建自己的服务，也可以使用内建服务。

	<html ng-app='serviceApp'>
	<title>验证angularJS的依赖注入组件service</title>
	<body>
	    <div ng-controller='serviceController'>
	        <p>{{X}}的16进制是：{{Y}}</p>
	    </div>
	    <!-- 引入依赖 -->
	    <script src="libs/angular.js"></script>
	    <script src="libs/i18n/angular-locale_zh-cn.js"></script>
	    <script>
	        var myApp = angular.module('serviceApp', []);
	        //定义angularJS的自定义服务hexafy，得到某位数字的16进制
	        myApp.service('hexafy', function () {
	            this.myFunc = function (x) {
	                return x.toString(16);
	            }
	        })
	        myApp.controller('serviceController', function ($scope, hexafy) {
	            $scope.X = 255;
	            $scope.Y = hexafy.myFunc($scope.X)
	        })
	    </script>
	</body>
	</html>