AngularJS构建WebApp
关注
分享
扫一扫
xyphf_和派孔明
全栈工程师，熟悉原生JavaScript、TypeScript、ES6、Webpack、VUE全家桶、JAVA SSM框架、Spring boot 、Spring cloud、MySql、Oracle、Linux等，可独立构建多页面、单页面应用项目。
展开
-
AngularJS开发WebApp的流程
前端构建工具的使用：路由管理模块的配置和使用： 内置指令的使用方法； 自定义指令； 过滤器； promise和ajax内置服务； 第三方模块编写自定义服务； 表单校验； AngularJS装饰器修改ajax服务（使前端也能响应post请求，从而脱离后端独立开发调试）所需要具备的知识： 基础知识：JS、HTML、CSS 前端知识：AJAX、Promise 课程知识：Less、nod原创 2017-09-11 07:43:15 · 3233 阅读 · 0 评论 -
AngularJS开发WebApp的模块
将WepAPP的模块划分为比如说：模块A、模块B、模块C 一般根据Webapp下面的菜单来划分模块进行开发，首先我们进入第一个模块的开发:我们先写一个html页面，index.html,因为是单页应用，所以是第一个页面也是最后一个页面。 步骤： ① 在html页面里面引入angularJS的脚本②创建第一个模块,在script文件下建一个app.js文件 (叫app.js的好处是在构建的时候原创 2017-09-15 19:07:20 · 670 阅读 · 0 评论 -
AngularJS开发WebApp的自适应处理方式
现在当下移动端通常的自适应解决方案是使用rem，rem的原理是对html的根元素设置一个font-size字体大小，然后其他元素的字体大小和边距都会根据根元素的字体大小而变化。在AngularJS开发的移动WebApp时，我们通过用rem、Less和gulp构造工具配合使用，来达到自适应的效果。<!DOCTYPE html><html lang="en" ng-app="app"><head>原创 2017-09-16 00:57:34 · 1984 阅读 · 0 评论 -
Angularjs编写选项卡
我们以某招聘网站的岗位分类为例。 我们先查看一下我们请求到的json数据。company.json{ "id": "c1", "imageUrl": "/image/company-1.png", "name": "慕课网", "industry": "移动互联网", "state": "A轮", "people": "50-150人",原创 2017-09-24 02:47:03 · 658 阅读 · 0 评论 -
AngularJS构建单页面应用WebApp目录介绍
首先我介绍一下项目主目录： .git仓库 bower_components，是bower安装第三方依赖的时候，它默认的安装路径 build，就是我们构建代码src编译之后放到的路径 dist，产品发布的目录，虽然我调试的时候代码经过编译，但是没有经过压缩，就是方便我们调试问题，但是上线发布产品的话，肯定要进行压缩以实现体积最小化 node_modules node安装插件的时候默认的安装目原创 2017-09-10 04:05:42 · 2536 阅读 · 0 评论 -
AngularJS基础概念介绍
搭建AngularJS的开发环境，需要用到一些构建工具以及包管理工具、编译工具、调试工具。我们先介绍一下AngularJS的基础： module: 模块，它相当于是一个容器，后面这些所有的东西都必须放在模块当中才能够被引用和加载。 directive：指令，指令就是负责和HTML元素进行绑定、同时进行相互作用。 service：服务，相当于一段共有的代码逻辑。 controller：控制器，原创 2017-09-11 08:02:06 · 466 阅读 · 0 评论 -
Angular Webapp常见的结构图
今天我们主要介绍一下Angular WebApp常见的结构图AngularJS首先它会有一个根模块(root module)，它会直接绑定在我们的HTML文档上面。然后这个模块也会引用一些第三方的其他模块，每个模块都会和这个根模块差不多，都分为几类web组件，这些组件在AngularJS文档上面被统称为web components，也就是所谓的Web组件。它们的职能是不一样的，我们介绍的是四种重要的原创 2017-09-12 00:24:23 · 1900 阅读 · 0 评论 -
搭建AngularJS开发Webapp的开发环境-安装batarang
首先我们需要安装AngularJS的浏览器调试工具 batarang，是chrome的一个插件。直接打开chrome，点击更多工具-扩展程序，将该插件拖入浏览器即可。下载密码：cKQC它的主要作用是：查看作用域、输出调试信息、性能监控。 AngularJS和JQuery不同，报错的话不会直接报出错误在哪一行，错误不容易直接查看出来，它有专门的作用域，也就是$scope数据对象。直接控制台是看不出任原创 2017-09-12 06:15:19 · 526 阅读 · 0 评论 -
搭建AngularJS开发Webapp的开发环境-安装bower
接下来说的几个工具都是基于node.js的插件，所有要先下载安装好node.js。下载node安装完成后打开控制台输入node -v如果显示版本号，就说明安装好了。因为npm在国内安装的比较慢，所有在中国境内推荐大家使用淘宝国内的镜像源cnpm。使用它来安装速度会快点。npm i -g cnpmbower：是第三方依赖的管理工具第三方依赖指那些别人开发出来供我们调用的JS，如angular.js，j原创 2017-09-12 07:36:01 · 1463 阅读 · 0 评论 -
配置自动化构建工具Gulp
在此之前我们在看一下 AngularJS构建单页面应用WebApp目录介绍为了将源码合并和压缩，用于节省http请求和带宽，这在移动端是非常有必要的。Gulp这个工具有两个优点： 第一：它是基于流来实现，这样就决定了它的性能非常的高。简单的说它就是把那些产生的中间文件放在内存中进行处理，直到最后一步才生成文件、操作文件。 第二：它实际上是任务化的，我们编写配置文件，实际上是编写一个一个...原创 2017-09-14 08:17:46 · 687 阅读 · 0 评论 -
AngularJS开发WebApp的路由配置
现在来做一件开发WebApp中非常重要的一步,就是开发路由。我们知道路由就是用来管理和控制页面和业务逻辑的跳转及加载的。 ①在webapp目录打开控制台，安装一下ui-routerbower install --save ui-router②在index.html中引入ui-router,ui-router必须在angularJS之后引入 index.html<!DOCTYPE html><h原创 2017-09-15 22:34:09 · 1027 阅读 · 0 评论 -
十分钟入门CSS预处理器——Less
今天我们扯一扯CSS的预处理器——Less。在此之前我们思考一下CSS和Javascript在语言特性上有什么区别呢？ 其实它们之中最大的区别就是CSS是静态的，没有变量和函数这些概念现在这个问题解决了，less就可以实现变量和函数的功能 通常less文件通过less工具编译成css文件。什么叫less语言呢？首先编写.less的文件，然后我们再使用less工具， 其实就是一段脚本，让它生产C原创 2017-09-13 08:59:05 · 755 阅读 · 0 评论 -
AngularJS中$http服务
使用$http快捷方法与服务端交互 在AngularJS中页面与服务端交互主要是调用模块。 根据请求类型的不同，$http模块提供了不同的调用方式 ,其通用的格式如下。 参数解释： url：表示一个相对或绝对的服务端请求路径; 请求类型：包括POST、GET、JSONP、DELETE、PUT、HEAD这6种常见的请求方式.其中POST和PUT类型请求可以通过可选项参数data来发送原创 2017-09-22 01:23:07 · 1086 阅读 · 0 评论 -
$q异步操作使用按钮
'use strict';angular.module('app').controller('positionCtrl',['$q','$http','$state','$scope','cache',function ($q,$http,$state,$scope,cache) { $scope.isLogin = false; function getPosition() {原创 2017-09-22 01:53:44 · 396 阅读 · 0 评论 -
AngularJS里面的$timeout和$interval服务
AngularJS里面的$timeout和$interval服务和window里面的setTimeout与setInterval的使用类似。$timeout里面可以写一个函数和一个时间(以毫秒为单位)$timeout(function(){},3000); //将要执行的代码字符串,时间写0的话并不是马上执行，而是放到执行队列的最后端$interval(function(){},3000);//以毫原创 2017-09-23 00:39:05 · 780 阅读 · 0 评论 -
$rootScope的常用用法
在app.js中'use strict'// run 的作用表示初始化执行，也就是所以页面加载之前执行angular.module('app',['ui.router']).run(['$rootScope',function($rootScope){ //比如说我们在所有页面初始化执行之前添加一个im属性，那么之后创建的所有$scope对象因为都是它的子孙对象，都会有im这样的属性原创 2017-09-23 00:48:07 · 6215 阅读 · 0 评论 -
AngularJS的自定义服务
我们以cookie为例。第一步：首先打开控制台使用bower安装angular-cookiesbower --save angular-cookies第二步 : 在service目录下建一个cache.js文件。第三步 : 在index.html中引入angular-cookies模块。第四步 : 在app.js中添加ngCookies依赖。'use strict'angular.module('原创 2017-09-23 01:20:27 · 514 阅读 · 0 评论 -
AngularJS开发WebApp高亮跳转按钮效果，ui-sref和ui-sref-active的使用
WebApp底部菜单栏的高亮效果需要用到一个指令，其实还需要做一个交互，就是点击的时候需要跳转，像这种情况一般会用到ui.router路由模块的一个指令，跳转一般有两种方法，一种是使用指令进行跳转，一种是利用服务进行跳转。指令是ui-sref，这相当于给这个元素绑定一个点击事件，当这个元素被点击的时候，它就会跳转到对应的页面或者是路由。同时被点击的时候，按钮还需要有个高亮的效果，这个指令叫做ui-s原创 2017-09-23 05:42:52 · 4673 阅读 · 0 评论 -
AngularJS通过路由模块ui-sref指令跳转页面传参方式
路由router.js'use strict';angular.module('app').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $stateProvider.state('main', { url: '/main', templ原创 2017-09-23 06:22:11 · 1362 阅读 · 0 评论 -
AngularJS开发WebApp的返回按钮
HTML模板<div class="head ta-c p-r"> //点击返回 <span class="p-a c-w back-btn" ng-click="back()"><</span> <span class="c-w" ng-bind="text">职位详情</span></div>指令'use strict'angular.module('a原创 2017-09-23 18:49:53 · 1071 阅读 · 0 评论 -
AngularJS常见报错总结
在刚学AngularJS的时候总会出现各种各样的错误，今天做一个小小的总结第一条：Uncaught SyntaxError: Unexpected identifier原因：代码中少了一个英文逗号，加上逗号就正常了，如：第二条：Error: [ng:areq] http://errors.angularjs.org这个错误的一般是没有找到co原创 2017-10-25 18:25:26 · 5911 阅读 · 0 评论