一小时搞定AngularJS_angularjs 2小时-CSDN博客

本文链接：https://blog.csdn.net/u012385190/article/details/74025407

简介

AngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的，AngularJS2 发布于2016年9月份，它是基于ES6来开发的。本章博客所有内容基于angularJS 1版本来讲的。从来没有接触过angularJS？没关系，认真学习1小时就搞定了！

AngularJS是一款前端MVC框架，它由modul/controller/factory等组织代码，jQuery准确的说是一个类库(类库是一系列函数的集合），而AngularJS是一个框架(是许多类库的集合) 以数据和逻辑为驱动(核心), 框架对开发的流程和模式做了约束，对比约束进行开发，更注重实际的业务逻辑。

教程

在开始angularJS编程之前，需要了解它的一些概念，可以通过这个教程了解相关知识（点击查看）

疑问

在看教程的时候有以下几点疑问并整理下：
1、ng-bind与ng-model的区别？
ng-bind是从scope 到 view的单向绑定，是用于展示数据的；
ng-model是scope 与 view的双向绑定，一般使用ng-model比较多；
2、angularJS的MVC思想是怎么体现的？
在angularJS中首先通过angular.module获取指定ng-app作为模块（module），然后通过指定模块的controller，在controller中调用factory，通过scope或者ng-model建立数据与视图的关系；
3、AngularJS 服务(Service)？
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中直接使用，如$location／$http／$resource/$timeout／$interval／$stateParams(包含URL中每个参数的键值)

编程

1、简单编程（依赖注入）
相关教程

<html>
   <head>
      <meta charset="utf-8">
      <title>AngularJS</title>
   </head>

   <body>
      <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>
      </div>

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

      <script>

         //指定module（整个app模块）
         var mainApp = angular.module("mainApp", []);
         mainApp.value("defaultInput", 5);

         //设置factory，相当与service
         mainApp.factory('MathService', function() {
            var factory = {};

            factory.multiply = function(a, b) {
               return a * b;
            }
            return factory;
         });

         mainApp.service('CalcService', function(MathService){
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });

         //controller层,调用service层
         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);

            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });

      </script>

   </body>
</html>

2、路由
案例1
案例2
关于$stateProvider
3、 $resource$ resource,使用它可以非常方便的同支持restful的服务单进行数据交互。
$resource教程
4、最终例子
router.js

 $stateProvider.state('admin.deposit', {
    abstract: true,
    url: '/deposit',
    templateUrl: 'views/deposit/abstract.html'
  });
 $stateProvider.state('admin.deposit.planInvestment', {
    url: '/planInvestment',
    label: '详情查询',
    controller: 'DepositPlanInvestmentQueryCtrl as vm',
    templateUrl: 'views/deposit/deposit_plan_investment.html'
  });

另一个js

"use strict";
angular.module('app').controller('DepositPlanInvestmentQueryCtrl', function DepositPlanInvestmentQueryCtrl(DepositPlanInvestmentQuery,$stateParams, auth, ui) {
  var vm =this;
  vm.form={};
  vm.isShow = false;
  var params = {};
  vm.sumMatchShare=parseFloat(0.00);//总标的份额

  auth.getUser().then(function () {

    //查询
    vm.submit = function () {
      vm.sumMatchShare=parseFloat(0.00);
      vm.depositPlanInvestment = {};
      vm.isShow = false;
      vm.viewPage();
    };

    vm.viewPage = function () {
      params.id = vm.form.planId;
      if (isNaN(params.id)) {
        ui.error("请输入正确ID");
        return;
      }

      DepositPlanInvestmentQuery.get(params, function (data) {
        console.log(data);
        vm.depositPlanInvestment = data;
        if (data.requestNo != null) {
          //计算总标的份额
          vm.allMatch = vm.depositPlanInvestment.details;
          for (var i = vm.allMatch.length - 1; i >= 0; i--) {
            vm.sumMatchShare += parseFloat(vm.allMatch[i]['matchShare']);
          }
          vm.isShow = true;
        }
      });
    };

  });

});

//根据ID查询
angular.module('app').factory('DepositPlanInvestmentQuery', function DepositPlanInvestmentQueryFactory($resource) {
  return $resource('/api/admin/deposit-management/queryDepositPlanInvestment/:id',{id: '@id'});
});