一小时搞定AngularJS
来源:互联网 发布:centos快速打开终端 编辑:程序博客网 时间:2024/05/29 02:29
简介
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教程
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'});});
- 一小时搞定AngularJS
- 一小时搞定计算机网络面试
- 一小时搞定DIV+CSS
- 一篇博客搞定Angularjs
- 一小时搞定DIV+CSS布局-固定页面开度布局
- 一小时搞定DIV+CSS布局-固定页面开度布局
- 一小时搞定DIV+CSS布局-固定页面开度布局
- 一小时搞定DIV+CSS布局-固定页面开度布局
- 一小时搞定DIV+CSS布局-固定页面开度布局
- 一小时搞定DIV+CSS布局-固定页面开度布局
- 一小时搞定DIV+CSS布局-固定页面开度布局
- 一小时搞定DIV+CSS布局-固定页面布局
- 一小时搞定DIV+CSS布局-固定页面开度布局
- 一小时搞定DIV+CSS布局-固定页面开度布局
- 10031---一小时搞定DIV+CSS布局-固定页面开度布局
- 极限一小时
- 一小时asp
- 一小时计划
- 找实习的来源总结
- 设备树介绍
- 计划用CSDN博客记录接下来的学习内容
- 【dlib】Dlib编译安装
- 人生苦短,我用Python!
- 一小时搞定AngularJS
- Android -- PackageManagerService APK安装流程简要分析
- 6月英语+面试总结
- SpringMvc+MyBatis+Shiro整合,shiro的realm不能注入Bean
- javac.exe,java.exe,javaw.exe的区别
- java编程中避免空指针
- Android应用接入Bmob第三方支付
- Rotate Image问题及解法
- zynq学习笔记——HLS FAST corner导出keypoints(二)