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.3版本 http://www.bootcdn.cn/angular.js/1.3.20/

 1.3版本不在支持ie8,文件自身也变的很小了60k,对于dom的操作性能也变的更高。以下是主要的版本之间的区别跟angular的主要版本

      1.4: 特性:   angualr1.3应不应该升级到1.4的矛盾
      1.5特性对别  升级 AngularJS 1.5:新特性对比与最佳实践
       2.0  全新的开发方式
0 0