$scope, Factory service provider

最新推荐文章于 2020-08-29 17:08:46 发布

原创最新推荐文章于 2020-08-29 17:08:46 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

angular 专栏收录该内容

11 篇文章

订阅专栏

本文通过一个具体的示例详细介绍了如何在AngularJS应用中使用依赖注入，包括工厂（factory）、服务（service）和提供者（provider）的概念及其实现方式。通过这个例子，读者可以了解到如何在控制器中注入这些依赖并获取相应的数据。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script>
          var app = angular.module("myApp",[]);
          app.controller("myCtrl",function($scope,$myFactory,myservice,myprovider){
               $scope.newname=$myFactory.name;
               $scope.newage=$myFactory.age;
               $scope.newaddress=$myFactory.addresss;

               $scope.name1=myservice.name;
               $scope.age1=myservice.age;
               $scope.address1=myservice.addresss;


               $scope.color1=myprovider.colorr;
               $scope.type1=myprovider.typee;
               $scope.privace1=myprovider.privace;


           })
           app.factory("$myFactory",function(){
               var stu={};
               stu.name="陈雪";
               stu.age=18;
               stu.addresss="海淀区";
               return stu;
           })
           app.service("myservice",function(){
               this.name="仝"
               this.age=18;
               this.addresss="北京"

           })

           app.provider("myprovider",function(){
               this.$get=function(){
                   var car={};
                   car.colorr="红色";
                   car.typee="超跑";
                   car.privace=643533213;

                   return car;
               }
           })

       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       姓名》{{newname}}        年龄>{{newage}}       地址》{{newaddress}}<br />
       姓名》{{name1}}        年龄>{{age1}}       地址》{{address1}}<br />
       类型》{{type1}}        颜色>{{color1}}       价格》{{pprivace1}}<br />
       <input type="number" ng-model="num1" />+<input type="number" ng-model="num2" />={{num1+num2}}
   </body>

</html>