zzh3319 / angularjsproject Goto Github PK
View Code? Open in Web Editor NEWtestwebapp每日优鲜
testwebapp每日优鲜
Angularjs mvvm框架 __> module view view module 数据模型与视图的双向数据绑定的一个框架(核心: 双向数据绑定) Angularjs 第一次很有革命意义的框架 Angularjs 1.xxx 1.0 ----> 1.8 js去进行前端的开发 Angularjs 2.0 typeScript的语法进行开发 (为后端设计的,让后端逐渐转换成前端) typeScript 诞生?意义? javascript 非常火,导致互联网很火,导致网页的制作很火,单页面应用,js, pc端中软件开发会变的非常低迷, windows比较尴尬,windows它里面有很多 软件开发工程师, 这个时期这些软件开发工程师,基本闲着了。 软件开发 ---》 后端语言 c# 它们对c#非常的精通。 它们就想互联网方面的产品,因为微软也不能让他们闲着。 写了一个工具 它们去用c#的语法去写前端, 写完之后, 利用这个工具, 将c#的语法转译成JavaScript。 typeScript 鄙视链 (c c++ java c# php javascrcipt...) Angularjs 1.xxx 1.0 --- 1.8 1. 指令 每个指令有它独特的功能, 有作用范围(与html的层级结构有关系) ng-app --> 让视图层拥有Angularjs框架的特性以及能力 前端模板: 在视图中混入逻辑 view层 ng-model --> 让表单元素(input , form, select,textarea) 拥有双向数据绑定的能力,让其与数据模型相关联,并反映在 我们的视图上。该绑定的数据模型,会跟随对应表单元素中value 值的变化而变化。 ng-controller --> 让控制层与视图产生联系的指令 ng-repeat --> 进行视图中循环逻辑的处理 ng-show --> 对应视图区域进行显示或者隐藏 ng-click --> 对dom节点进行点击事件的绑定 2. 控制层 每个控制层都有自己的作用域(函数中的作用域差不多) function Ctrl(){ var name = 123; function innerCtrl(){ //var name = 78; console.log(name); } innerCtrl(); } 视图层的革命: 在视图层,利用html的结构去写函数 突出一个核心前端编程**,数据与视图的分离,所有的操作,都紧紧的围绕 数据进行操作,极大的减少dom的操作,进行快速的开发 1. 过滤器 原生过滤器: | uppercase, lowercase, date: "yyyy-MM-dd" 自定义过滤器: app.filter('query', function(){ return function(target, param){ } }) 万能过滤器:|filter:{name: keyword, age: age} 全局作用域 $rootScope 2. 数据层---> 数据工厂 --> factory,给所有相关的控制层使用 通过ng-cloak 解决花括号闪烁的问题 3. ng中Ajax的发送 scope.$watch ---> 监控作用域中数据模型的改变 scope.$apply ---> 对不再ng上下文中的语句进行强制视图刷新, 使其具有双向数据绑定的能力 $http({ url: '/v1/pois', method: 'get', params: { type: 'search', city_id: 1 } }).success(function(res){ console.log(res); scope.list = res; //进行数据模型的绑定,相应的视图会被自动刷新 }).error(function(res){ console.log('我数据接收失败了'); }) $http({ url: '/v1/pois', method: 'post', data: { type: 'search', city_id: 1 } }).success(function(res){ console.log(res); scope.list = res; //进行数据模型的绑定,相应的视图会被自动刷新 }) 4. ng的自定义指令(比较核心,组件化开发的先驱) 因为ng中省去了dom节点的操作,但是会遇到一个问题, 当存在复杂dom节点操作的时候, ng还是会不好处理, ng就引入自定义指令的概念,对视图进行组件化开发,最大限度上 解决复杂dom的操作问题。 directive(指令) 5. ng中的路由--》 单页面的应用(监听hash值的改变) ngRoute, 路由的设计,以及帮我们设计好, 所以我们要学习 怎么使用它 综合的ng项目---》 每日优先 --》o2o的项目 1 首页购物车列表页 2.购物车页 3. 登录注册 4. 订单列表的信息 5. 地址搜索页,商品搜索页 前端中针对于移动端的一个布局的框架,该框架以angularjs为 基础,有自己已经写好的组件以及相应的样式。 Ionic Ionic既是一个CSS框架也是一个Javascript(ng) UI库 css 布局 fonts 布局中的字体文件 js controllers --> ng中各个视图里的控制层 directive --> ng中一些可以复用的组件(自定义指令) services --> ng中数据服务中心(数据工厂) app.js --> 入口js文件,初始化ng, 进行路由的配置 lib angular-route.js ---> ng的路由模块 bundle.js ---> ionic.js(实现关于它自己的一些自定义组件) + ng.js ionic.css ---> 移动端开发的css框架,通过特殊class名字,得到对应移动端样式 view 项目中每个页面的视图 widget 项目中每个可以复用组件的视图
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.