angularJs(1)
来源:互联网 发布:mac显示u盘隐藏文件 编辑:程序博客网 时间:2024/04/29 23:04
angularJs--
--基于javascript开发的客户端应用框架,使我们可以更加快捷,简单的开发web应用。
--诞生于2009年,后来被google收购,用在了很多项目中。
--适用于CRUD增加(Create)、读取(Read)、更新(Update)和删除(Delete)应用或者SPA单页面网站的开发。
适用的场景:适合大量前后端数据交互和前后端分离式的开发的项目中,或者spa单页面的开发
MVC模式 modal(模型) view(视图) control(控制器)
MVC是一种架构型模式,它本身并不引入新的功能,只是用来指导我们改善应用程序的架构,使得应用的模型和视图相分离,从而得到更好的开发和维护效率。在MVC模式中,应用程序被划分成了模型(Model)、视图(View)和控制器(Controller)三个部分。其中,模型部分包含了应用程序的业务逻辑和业务数据;视图部分封装了应用程序的输出形式,也就是通常所说的页面或者是界面;而控制器部分负责协调模型和视图,根据用户请求来选择要调用哪个模型来处理业务,以及最终由哪个视图为用户做出应答。
MVC模式的这三个部分的职责非常明确,而且相互分离,因此每个部分都可以独立的改变而不影响其他部分,从而大提高了应用的灵活性和重用性。
模块系统
指令系统
依赖注入
双向数据绑定
angularJs中所有的数据需要挂载到$scope这个变量中,$scope针对ng-controller这个局部作用域内起作用
$rootScope是全局的作用域,
依赖注入:形参是不能被修改的,因为在angular内部已经被注入了。$scope代表局部 $rootScrope是全局
注入也叫做服务
指令系统:
ng-app:初始化的调用指令,也可以指定范围,因为不一定全部是采用angular开发
ng-controller:控制器
angularJs的双向数据绑定
MV-VM:数据改变影响视图,视图改变影响数据。视图刷新要采用它提供的服务的方式,eg:$timeout()
ng-click: 点击的指令ng-mouseover等都存在
ng-model:双向的数据绑定
angularJs的小例子,告诉大家angular在做复杂交互的时候是十分的方便的。
购物金额计算
--过滤器 |currency 如果是RMB:|currency:'¥'
$watch,监听是挂载在$scope下面的,$scope.$watch(对象,fn(newVal,oldVal))接受三个参数,第三个是可选的,加上就可以监听一个集合;
--console.log(123);
只能监听一个单值的变化,如果需要多个,就加上第三个参数true,就可以全部的监听。还可以监听函数。
模块化开发主要有require.js ,seajs
angularJs的模块化:减小全局的污染和互相之间的依赖
var m1 = angular.module(name,[数组,依赖的库,如果没有就写空数组就行])两个参数,需要修改ng-app='name'指定从哪一个模块开始
m1.controller('Fname',['$scope',function($scope){ $scope.name='anikin'; }])
加数组括号是为了防止压缩出现的问题。如果成为线上正真的版本,压缩工具会将其压缩为$s;如果不会成为线上产品,这样子的写法也是完全没有问题的。
m1.controller('Fname',function($scope){$scope.name='anikin';})
将函数改写成数组的格式['$scope',function(){}],这也是angular的特点;
1.4: 特性: angualr1.3应不应该升级到1.4的矛盾
--基于javascript开发的客户端应用框架,使我们可以更加快捷,简单的开发web应用。
--诞生于2009年,后来被google收购,用在了很多项目中。
--适用于CRUD增加(Create)、读取(Read)、更新(Update)和删除(Delete)应用或者SPA单页面网站的开发。
适用的场景:适合大量前后端数据交互和前后端分离式的开发的项目中,或者spa单页面的开发
MVC模式 modal(模型) view(视图) control(控制器)
MVC是一种架构型模式,它本身并不引入新的功能,只是用来指导我们改善应用程序的架构,使得应用的模型和视图相分离,从而得到更好的开发和维护效率。在MVC模式中,应用程序被划分成了模型(Model)、视图(View)和控制器(Controller)三个部分。其中,模型部分包含了应用程序的业务逻辑和业务数据;视图部分封装了应用程序的输出形式,也就是通常所说的页面或者是界面;而控制器部分负责协调模型和视图,根据用户请求来选择要调用哪个模型来处理业务,以及最终由哪个视图为用户做出应答。
MVC模式的这三个部分的职责非常明确,而且相互分离,因此每个部分都可以独立的改变而不影响其他部分,从而大提高了应用的灵活性和重用性。
模块系统
指令系统
依赖注入
双向数据绑定
angularJs中所有的数据需要挂载到$scope这个变量中,$scope针对ng-controller这个局部作用域内起作用
$rootScope是全局的作用域,
依赖注入:形参是不能被修改的,因为在angular内部已经被注入了。$scope代表局部 $rootScrope是全局
注入也叫做服务
指令系统:
ng-app:初始化的调用指令,也可以指定范围,因为不一定全部是采用angular开发
ng-controller:控制器
angularJs的双向数据绑定
MV-VM:数据改变影响视图,视图改变影响数据。视图刷新要采用它提供的服务的方式,eg:$timeout()
ng-click: 点击的指令ng-mouseover等都存在
ng-model:双向的数据绑定
angularJs的小例子,告诉大家angular在做复杂交互的时候是十分的方便的。
购物金额计算
--过滤器 |currency 如果是RMB:|currency:'¥'
$watch,监听是挂载在$scope下面的,$scope.$watch(对象,fn(newVal,oldVal))接受三个参数,第三个是可选的,加上就可以监听一个集合;
--console.log(123);
只能监听一个单值的变化,如果需要多个,就加上第三个参数true,就可以全部的监听。还可以监听函数。
模块化开发主要有require.js ,seajs
angularJs的模块化:减小全局的污染和互相之间的依赖
var m1 = angular.module(name,[数组,依赖的库,如果没有就写空数组就行])两个参数,需要修改ng-app='name'指定从哪一个模块开始
m1.controller('Fname',['$scope',function($scope){ $scope.name='anikin'; }])
加数组括号是为了防止压缩出现的问题。如果成为线上正真的版本,压缩工具会将其压缩为$s;如果不会成为线上产品,这样子的写法也是完全没有问题的。
m1.controller('Fname',function($scope){$scope.name='anikin';})
将函数改写成数组的格式['$scope',function(){}],这也是angular的特点;
下载地址: 1.3版本 http://www.bootcdn.cn/angular.js/1.3.20/
1.3版本不在支持ie8,文件自身也变的很小了60k,对于dom的操作性能也变的更高。以下是主要的版本之间的区别跟angular的主要版本
1.5特性对别 升级 AngularJS 1.5:新特性对比与最佳实践
2.0 全新的开发方式
0 0
- Angularjs-1
- AngularJS 1
- angularJs(1)
- [AngularJS 1] Introduction to AngularJS
- AngularJS-MVC(1-1)
- angularjs 教程1
- 1,什么是 AngularJS?
- angularjs 源码分析1
- AngularJs(Part 1)
- AngularJS笔记1
- 1、AngularJS是什么?
- angularJS 学习笔记1
- AngularJS踩坑(1)
- AngularJS——1
- AngularJS 学习笔记1
- AngularJS学习笔记1
- AngularJS - 1 (basic concepts)
- AngularJS 源码分析1
- 数据库调优的方法
- css3 学习
- Android之旅
- git 删除远程已经推送过的文件或者文件夹
- js插件汇总
- angularJs(1)
- git and github学习以及入门
- angularJs-3
- 在android上使用easyPR+caffe进行车牌检测与识别
- php(4)
- php(5)--数组和oop
- [BZOJ1030][JSOI2007]文本生成器(AC自动机+dp)
- query api学习系列之2
- php(6)-面向对象-三大特点