`
Franciswmf
  • 浏览: 797229 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

angularjs项目运行环境 及 常见问题解决

 
阅读更多
配置angularjs项目运行环境的几个步骤
1--安装git,使用命令git --version;
2--安装nodejs,下载地址:官网http://www.nodejs.org/download/,默认是安装在C:\Program Files\nodejs。使用命令node -v;
   安装npm,由于nodejs已经集成了npm,所以此时npm已经安装好了。使用命令npm -v;
3--安装Yeoman,包括yo,Grunt,和Bower。
	yeoman的目标是通过Grunt和Bower的包装为开发者创建一个易用的工作流,解决零散的依赖关系。
	yo是脚手架工具,用于构建一个新的项目框架;
	Grunt是项目的构建工具,一个用于开发任务自动化的命令行工具;
	Bower是一个HTML、CSS、Javascript和图片等前端资源的包管理器,不再需要手动去下载scripts了;
	npm install -g yo grunt-cli bower
	npm install -- global yo
	使用命令:yo --version && bower --version && grunt --version;
看看路径C:\Users\wangmingfeng\AppData\Roaming\npm 下是否有生成的文件和文件夹;

4--在使用AngularJS的生成器之前,运行下面的脚本:使用它来生成AngularJS应用的基础结构
	npm install -g generator-angular
	npm install -g generator-karma
看看路径C:\Users\wangmingfeng\AppData\Roaming\npm\node_modules 下是否有生成的文件和文件夹;

5--新建空的项目目录,比如myapp,然后在目录中运行下面的命令:
	yo angular
	grunt serve



常见问题:
1、如果依次运行完npm install; bowere install; grunt serve;这3个命令,浏览器弹出来显示的url中含!(比如:http://localhost:9000/#!/),那么这是有问题的。可以考虑把能正常运行的项目中的bower_components文件夹下的所有文件拷贝过来替换掉要运行的项目中。
http://localhost:9000/#/menu/home?pa=15800550680&pb=XXX&pc=false


2、app-server和app-client,用grunt build命令打包app-client,然后修改目录下scripts中的scripts*.js文件里面的内容,例如APIRoot:10.8.8.9:9000改为发布的服务器访问地址;然后就可以把打包后的app-client扔到服务器比如/usr/local/nginx/html/下面。


3、前端包在执行npm install 、 bower install 、 grunt serve 3个命令可以运行;但是在打包的时候即执行grunt build命令的时候打包会中止,报"Aborted due to warnings",详见下面截图:
Running "ngAnnotate:dist"<ngAnnotate> task
Warning: Cannot create property '$methodName' on boolean 'false' Use --fore to continue.


经研究发现将项目根目录下的package.json中的" "grunt-ng-annotate": "^0.10.0","版本号改为"1.0.0",然后再执行npm install bower install grunt build即可,应该是版本不兼容引起的。

  • 大小: 27.7 KB
分享到:
评论

相关推荐

    angularjs+boorstrap视频教程

    3. **常见问题及解决方法**: - **命名冲突**:在使用AngularJS和Bootstrap时可能会遇到命名冲突的问题,可以通过修改某些类名或使用前缀等方式避免。 - **性能瓶颈**:针对大型应用可能出现的性能问题,可以通过...

    angular-strap 完没解决bootstrap组件与angularjs交互问题

    在AngularJS和Bootstrap的结合使用中,经常遇到的一个挑战是如何有效地实现两者之间的交互。`angular-strap`是一个致力...在实际项目中,应根据具体需求和环境选择最适合的解决方案,并准备好应对可能出现的交互问题。

    Matering AngularJS Directives

    - **常见问题与解决方案**:针对开发过程中可能遇到的问题提供实用的解决方案,帮助读者快速解决实际工作中遇到的技术难题。 ##### 7. 最佳实践与模式 - **代码结构**:介绍有效的代码组织方式,如使用服务、过滤...

    Node.js/MongoDB/AngularJS Web开发源码和书

    这个压缩包里的项目不仅展示了如何整合这三个技术,还包含了实际应用中的最佳实践和常见问题的解决方案。 通过这本书的学习,开发者将能够掌握以下关键技能: 1. 理解Node.js的核心概念,包括事件循环、模块系统和...

    angularjs-poc:使用 nodejs 和 angularjs 的概念项目证明

    2. **Node.js**:是一个基于Chrome V8引擎的JavaScript运行环境,允许开发者在服务器端使用JavaScript。 3. **npm**:Node.js的包管理器,用于管理项目依赖和发布开源库。 4. **Express**:Node.js中最流行的Web应用...

    company 项目框架,成功运行源代码

    常见的框架有Spring Boot、Django、AngularJS等,它们为快速开发提供了便利,并且通常包含了一些最佳实践,减少了重复工作。 3. **公司项目**(companyLH):这可能代表了一个特定公司的内部项目,或者是为该公司量...

    前端项目-angular-file-saver.zip

    为了解决这个问题,开发者们通常会借助于像`angular-file-saver`这样的库,它是一个AngularJS服务,专门用于在不支持`saveAs()`的浏览器中实现文件保存功能。 `angular-file-saver`是一个小巧而强大的AngularJS服务...

    Angularjs 与 bower安装和使用详解

    Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它让我们能够运行服务器端的JavaScript代码。Node.js安装完成后,通过命令提示符执行node -v,可以查看Node.js的版本号。 ### 安装cnpm(淘宝镜像) 为了加速...

    详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

    在AngularJS 1.6版本中,UI-Router的路由机制发生了一些变化,导致原本常见的href="#…"或href="#/…"的写法无法正常工作,而...通过选择合适的解决方案,开发者可以根据项目需求来调整路由机制,保持应用的正常运行。

    开源项目-antham-gommit.zip

    antham/gommit项目正是为了解决这一问题而诞生的。 该项目的主要目标是确保团队成员在提交代码时遵循特定的提交消息格式,这有助于提高代码库的整洁度和可读性。Git提交信息通常包含三个主要部分:主题(Subject)...

    前端项目-zensh-ui-autocomplete.zip

    该项目展示了如何将现有的jQuery插件(jQuery UI的自动完成)适配到AngularJS环境中。这通常涉及到在AngularJS的控制器、服务或指令中调用jQuery函数,并确保数据流和事件处理符合AngularJS的设计模式。 8. **定制...

    Eclipse,MyEclipse开发Web项目.doc

    2. **启动Eclipse与解决常见问题** - **Eclipse打开报错:failed to create the java virtual machine**:这通常是因为JVM内存设置不足。可以在eclipse.ini文件中调整`-Xms`和`-Xmx`参数,降低初始和最大堆内存...

    Java项目实战-物流信息网的设计与实现(附源码,部署说明).zip

    7. **部署与运行**:部署说明.txt文件详细阐述了如何在服务器上安装和配置该项目,这包括Java运行环境的设置、数据库的导入、Web服务器的配置(如Tomcat)以及项目的部署步骤。 8. **测试与调试**:一个成熟的项目...

    angularjs-no-captcha-ninjutsu

    5. **Node.js**:Node.js是一个开放源代码、跨平台的JavaScript运行环境,用于在服务器端执行JavaScript代码,尤其适合构建高性能的网络应用。 6. **Express.js**:Express是Node.js上最流行的Web应用程序框架,它...

    angular-test:angularjs-echarts-config

    这个"angular-test:angularjs-echarts-config"项目展示了如何在AngularJS环境下配置和使用ECharts进行数据可视化。通过Grunt管理和构建项目,使用Karma进行单元测试,确保了代码质量和功能的可靠性。同时,通过...

    Sample_AngularJS_App:AngularJS应用程序具有承诺功能,使用Grunt进行最小化,使用业力进行少量测试用例

    承诺遵循一种类似于 Promise A+ 规范的模式,可以解决回调地狱问题,提高代码可读性和可维护性。在 "Sample_AngularJS_App" 中,承诺可能被用于处理 HTTP 请求、动画延迟或任何其他需要等待完成的任务。 **Grunt 的...

    mobile-angular-ui-1.3.3

    8. **社区支持**:虽然提到的中文版可能不易获取,但AngularJS和Bootstrap拥有庞大的开发者社区,可以提供丰富的资源、教程和解答问题。 在"mobile-angular-ui-master"这个压缩包中,通常会包含源代码、文档、示例...

    使用Raygun来自动追踪AngularJS中的异常

    然而,任何一款复杂的软件在开发和部署过程中都可能出现异常,特别是在不同的浏览器和设备中运行时,异常丢失的问题十分常见。为了能够有效地捕获并处理这些异常,自动异常跟踪服务就显得尤为关键。 Raygun是一款...

    该文件是一种基于JavaWeb的就业项目库

    【JavaWeb就业项目库详解】 JavaWeb技术是Java编程语言在Web开发领域的应用,它涵盖了服务器端编程、数据库交互、用户界面设计等多个方面。...同时,这样的项目也是实践和提升解决问题能力的良好平台。

Global site tag (gtag.js) - Google Analytics