Angular模块/服务/MVVM
angular 与 jquery
共同点
都是一个前端的JS文件而已
不同点:
angular 是一个框架
我们写的代码由框架调用,我们必须要按照特定的规则编写代码
jquery是一个库
我们调用库预制的方法或对象实现我们想要功能
在思想上:+jquery提高了操作DOM的开发效率
angular 几乎没有任何DOM操作(不是没有,只是不用我们自己操作)
angular 内置一个类似jqLite的东西
angular.element()
angular 不提倡DOM操作
什么是AngularJS
一个前端框架,提供一种极大减少DOM操作的编程方式,在前端页面中引入了传统在后台开发中使用的一些思想,增强代码的结构和可维护性
一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式
其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务
依赖注入
没事你不要来找我,有事我会去找你。
原理 框架在调用方法的过程中通过获取到传递的参数,然后框架内部将方法toString处理以后, 再通过正则表达式将其获取到然后依次实例化。
模块
如何进行多模块开发
多模块的开发通常是指多个Module模块开发,
多模块其他使用方式(不推荐)
1.和其他的一样创建多个module模块
2.设置不同的id通过id绑定:< div id="app3">
3通过bootstrap绑定模块:angular.bootstrap(app3,["otherApp"]);
多模块使用
一个参数是寻找模块 angular.module('需要寻找的模块名称')
两个参数是添加模块 angular.module('模块名称',['依赖的模块']);
如何划分模块
1.根据当前需要开发的应用程序的组成划分需要多少模块,比如:
注册模块
登录模块
用户列表页模块
用户详细页模块
2.根据文件类型的不同来划分
比如:
所有的控制器
所有的服务
所有的指令
控制器
控制器的作用
初始化属性
暴露属性或者行为
监视数据变化 $scope.name='';
$scope.$watch('name',function (newVal,oldVal) {console.log(newVal);console.log(oldVal); })//如果是监视对象,后面多添加一个参数true
控制器代码压缩问题
当代码进行js压缩时候controller里面的内容会被当成变量替换掉,为了防止这个问题发生在controller中出现 controller('myCtrl',['scope){}])
控制器的多种写法
1.标准写法 app.controller('myCtrl',function(){})
fuction写在外面(写在外面不能被压缩) function otherCtrl($scope) { $scope.name='123';}app.controller('myCtrl',otherCtrl)
fuction写在外面(写在外面不能被压缩)function otherCtrl(otherscope) { otherscope.name='123'; } otherCtrl.scope'];//这里对方法添加$inject app.controller('myCtrl',otherCtrl)
4在controller内部使用依赖注入 app.controller('myCtrl',function scope,$injector) {
$injector.invoke(function ($log) {$log.info(123);})
})
5 早期使用 (angular-1.2.29版本) function myController($scope) {
$scope.name="angular早期使用";
}
6 面向对象方法使用
1.控制器的function不写改为引用function app.controller('myCtrl',demoCtrl);
2.创建一个面向对象的function ` function demoCtrl() {
this.name='123'; } `
3.使用的时候添加
as scope
ng-controller="myCtrl as scope"
Angular服务
什么是服务
在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。
Angular主要用到的服务
$scope:作用域,用来负责连接View和Controller,也就是MVVM中的ViewModel相当于桥梁一样。
$rootScope
$location
$window
$log
$interval和setInterval区别 在数据变换过程中有时候angular监视不到数据变化:
setInterval(function () {$scope.time=new Date();console.log($scope.time);$scope.$apply();//告诉angular进行数据更新 },1000) //但是如果说使用 $interval这种angular的服务有时候服务内部就帮我们完成了这种数据更新
创建服务 通过module创建: service、factory
service创建:app.service('myService',function () { this.name='myService'; });
factory创建: app.factory('myFactory',function () { return {
name:'myFactory',
} });
指令
ng-bind
ng-bind-html
ng-repeat
ng-class
ng-if
ng-hide
ng-show
ng-switch
ng-src
ng-href
ng-focus
ng-blur
ng-dblclick
MVVM设计模式
什么是MVVM设计模式
Model(模型)
View (视图)
ViewModel (视图模型)
由上面三个部分组成其中ViewModel就是$scope起到桥梁的作用将Model和View联系起来
MVVM模式是Model-View-ViewMode(模型-视图-视图模型)模式的简称,其最早出现在微软的WPF和Silverlight框架中,使用ViewModel(视图模型)来实现View和Model的粘合,同时让View和Model的进一步分离。方便美工和程序员职能分离。
MVVM本质
其本质就是为了代码模块化
模块化的好处是逻辑清晰、维护方便但是同时也会增加代码量和开发成本
angular的特性
双向数据绑定
指令系统
MVVM设计模式
多模块化开发
依赖注入
转载于:https://www.cnblogs.com/bici/p/6058675.html
Angular模块/服务/MVVM相关推荐
- angular 模块构建_如何使用Angular和服务人员构建无需Internet即可运行的网站
angular 模块构建 by Tomiwa 通过Tomiwa 如何使用Angular和服务人员构建无需Internet即可运行的网站 (How to build websites that work ...
- angular模块库开发实例
angular模块库开发实例 随着前端框架的诞生,也会随之出现一些组件库,方便日常业务开发.今天就聊聊angular4组件库开发流程. 下图是button组件的基础文件. nk-button.comp ...
- angular 模块构建_通过构建全栈应用程序学习Angular 6
angular 模块构建 Angular 6 is out! The new features include better performance, new powerful CLI additio ...
- angular 模块构建_如何通过11个简单的步骤从头开始构建Angular 8应用
angular 模块构建 Angular is one of the three most popular frameworks for front-end development, alongsid ...
- angular中的MVVM模式
在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...
- Angular7入门辅助教程(一)——Angular模块
如果有任何的非技术障碍,比如如何新建Angular项目,请先到我的"Angular7入门辅助教程"专栏参考这篇博客:Angular7入门辅助教程--前篇 NgModule 本篇博客 ...
- Java24-day15(完结)【反射(类加载器、反射)、反射获取构造方法-成员变量-成员方法、模块化(概述、模块基本使用、模块服务使用)】
视频+资料[链接:https://pan.baidu.com/s/1MdFNUADVSFf-lVw3SJRvtg 提取码:zjxs] Java基础--学习笔记(零起点打开java世界的大门)--博 ...
- angular 模块构建_我如何在Angular 4和Magento上构建人力资源门户
angular 模块构建 Sometimes trying a new technology mashup works wonders. Both Magento 2 + Angular 4 are ...
- 启动模块服务时报错:docker: Error response from daemon: Conflict.
启动模块服务时报错:docker: Error response from daemon: Conflict. 报错信息: docker: Error response from daemon: Co ...
最新文章
- HDU 1243 最长公共子序列 动态规划
- apipost使用mock随机获取多组数据中的一组数据进行测试
- 下列选项中非法的c语言转义字符,c语言练习题t答案
- 2022-2028中国安全代码审查软件市场现状研究分析与发展前景预测报告
- 路由器服务器账号密码,路由器上网账号密码设置的一般步骤介绍
- win7访问服务器共享文件夹提示没有权限,win7系统无法访问共享文件夹提示权限不足的解决方法...
- 服务器上运行程序提示*工作已停止,已停止工作 出现了一个问题,导致程序停止正常工作。请关闭该程序...
- 赌徒破产理论(Gambler's Ruin)
- 怎么安装iso服务器系统安装win7系统,win7纯净版iso怎么安装
- 华为IT“智”存高远,普“慧”于民
- slick.js基于jQuery全屏轮播插件
- 视频教程-从入门到精通学全套AI 轻松掌握illustrator基础加实战技能视频课程-Illustrator
- python高清壁纸_爬虫 抓取王者荣耀所有英雄皮肤高清壁纸(完美版本)
- 用 _findfirst 和 _findnext 查找文件
- 利用四元数表示空间向量的旋转及代码示例
- 《算法导论》第16章 贪心算法 个人笔记
- 凹凸世界搬运工机器人图片_【图片】【原创】凹凸世界后续剧情_凹凸世界吧_百度贴吧...
- 计算机宏的PPT,计算机应用宏基础63957.ppt
- [统计学知识点]卡方检验
- 旋转LED:光の翼电子钟
热门文章
- 百度音乐接口使用示例
- linux查看注册表信息,linux登录档(日志)相关简介
- 神策 2020 数据驱动用户大会:新愿景 + 新定位 + 新舰队正式亮相!
- 周五话分析 | 你的梦想是什么?做一个懂 Session 分析的人
- 转化与流量到底哪一个更重要?
- 学习Vue.js-Day2
- 求Sn=a+aa+aaa+aaaa+aaaaa的前5项之和,其中a是一个数字,例如:2+22+222+2222+22222
- sealed、new、virtual、abstract与override 趣解
- POJ 3723 Conscription 最小生成树
- WebLogic下载地址