angularJs demo

你的名字 2022-07-14 02:55 174阅读 0赞

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    
    <script>
    
      var mainApp = angular.module('mainApp',[]);
    
    //  mainApp.config(function ($provide) {
    //    $provide.provider('MathService', function () {
    //      this.$get = function () {
    //        return getValue();
    //      }
    //    });
    //  });
    
      var getValue = function () {
        var factory = {};
    
        factory.multiply = function (a,b) {
          return a * b;
        };
    
        factory.addValue = function (a, b) {
          return a + b;
        };
    
        console.log(factory);
        return factory;
      };
    
      //给一个默认舒适值
      mainApp.value('defaultInput', 5);
    
      //建立一个工厂，为Service服务
      mainApp.factory('MathService', function () {
        return getValue();
      } );
    
    
      //建立一个服务，等待控制层的调用
      mainApp.service('CalcService', function (MathService) {
        this.square = function (a) {
          return MathService.multiply(a, a);
        };
        this.add = function (a) {
          return MathService.addValue(a , a);
        }
      });
    
      //控制器，为页面时间服务
      mainApp.controller('CalcController', function ($scope, CalcService, defaultInput) {
        $scope.number = defaultInput;
        $scope.result = CalcService.square($scope.number);
        $scope.result1 = CalcService.add($scope.number);
    
        $scope.square = function () {
          $scope.result = CalcService.square($scope.number);
          $scope.result1 = CalcService.add($scope.number);
        }
      });
    
    </script>
    
     <html>
    
    <head>
      <meta charset="utf-8">
      <title>AngularJS  依赖注入</title>
    </head>
    <body>
    <h2>AngularJS 简单应用</h2>
    
    <div ng-app = "mainApp" ng-controller = "CalcController">
      <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
      <button ng-click = "square()">X<sup>2</sup></button>
      <p>结果: {
        {result}}</p>
      <p>结果: {
        {result1}}</p>
    </div>
    
    
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关 AngularJs

AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。

我就是我/ 2022年08月07日 05:49/ 0 赞/ 198 阅读

相关 angularjs

大家都说angularjs的学习曲线很陡峭，自己也是深有体会，找一本好书学习是很关键的。目前angularjs有几本书，京东上面的评价都不错，我就说说自己的阅读经验最推荐

古城微笑少年丶/ 2022年07月15日 08:13/ 0 赞/ 216 阅读

相关 angularjs

大家都说angularjs的学习曲线很陡峭，自己也是深有体会，找一本好书学习是很关键的。目前angularjs有几本书，京东上面的评价都不错，我就说说自己的阅读经验最推荐

Bertha 。/ 2022年07月15日 08:13/ 0 赞/ 192 阅读

相关 angularJs demo

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></sc

你的名字/ 2022年07月14日 02:55/ 0 赞/ 175 阅读

相关【AngularJS】5.AngularJS 工具方法以及AngularJS中使用jQuery

1. Angularjs 工具方法，参考AngularJS API [https://docs.angularjs.org/api][https_docs.angularjs

叁歲伎倆/ 2022年06月18日 02:27/ 0 赞/ 265 阅读

相关 AngularJS------认识AngularJS

之前在C\中也经常使用MVC开发模式，对其的使用有一定的了解，但是现在需要学习AngularJS，这是纯前台的JS代码，那么为什么需要学习这个呢，就是想将验证这里全部在前台执行

拼搏现实的明天。/ 2022年05月31日 06:42/ 0 赞/ 244 阅读

相关 AngularJs

AnjularJs的四大特征 1、MVC模式 2、双向绑定 3、依赖注入 4、模块化设计下面我们就分别说说这四大特征： 1、MVC模式 Angular遵

刺骨的言语ヽ痛彻心扉/ 2022年05月25日 00:41/ 0 赞/ 223 阅读

相关 angularjs 的入门Demo

1.前提引入angular.min.js 入门 <html> <head> <title>angularjs入门demo</title> <script s

傷城~/ 2022年05月21日 13:13/ 0 赞/ 204 阅读

相关 AngularJS web 应用骨架 AngularJS Seed

AngularJS Seed 详细介绍 AngularJS Seed 是典型 AngularJS web 应用的应用骨架，可以快速启动你的 AngularJS webapp

不念不忘少年蓝@/ 2022年05月18日 20:14/ 0 赞/ 223 阅读

相关 AngularJS -AngularJS特性

转载博客：[https://www.cnblogs.com/stephenykk/p/3817063.html][https_www.cnblogs.com_stephenyk

本是古典何须时尚/ 2022年05月17日 13:23/ 0 赞/ 198 阅读