素材巴巴 > 程序开发 >

AngularJS-环境搭建与项目开发

程序开发 2023-09-14 12:10:05

在学习之前,你可能需要先粗略了解几个东西!

  1.nodejs

  2.npm 包管理

        3.paython 这个要不要装也不是很确定,但是装比较好,有时候控制台输出错误信息时候有提到。

  以下的东西就当你是知道了这些概念了

     1.首先,到nodejs 官网下载nodejs并安装

  wKiom1l8T8iQsrNKAADLrPAQv4A780.png-wh_50

 

  2.添加淘宝的npm镜像(由于国内访问国外网站的速度实在是太慢了),由于我们只有要用到的一些东西,我们采用以下的添加镜像方法

  (windows 用户使用cmd,输入以下命令,新手请去看看npm使用教程吧)

    npm config set registry https://registry.npm.taobao.org

  这个镜像就是保存别人之前创建好的JS插件,即依赖,本地可以通过 npm install 命令加载这些依赖,-g 是将依赖安装在全局环境,对于有网络控制的公司,通常都会将这个库镜像到内网地址,这时候同样用上面的命令切换,改一下镜像地址就可以了。
  
  值得说明一下的是不要直接使用淘宝的npm官方镜像安装模式,这样我们只能使用cnpm命令,而Angular-cli创建新项目的时候是直接使用的npm,
会导致访问速度奇慢,直接使用上面的这个命令就行了

 3.使用npm 安装Angular-cli

  Angular-cli是angular团队针对Angular2提供的脚手架,用于环境搭建,运行等;
  在命令行中输入

  npm install -g angular-cli
  
  使用淘宝库时:cnpm install -g angular-cli
  
  在 Mac 或 Linux 平台上,你可能需要添加  sudo 前缀提权进行全局安装:
   
   sudo npm install -g angular-cli

  之后我们就可以在全局使用ng命令搭建Angular项目了
  
  安装完成之后用下面的命令测试:
  ng -v 查看,如果这个命令不能用则可能是环境变量没有配置好,需要配置path。
  
  如果成功那么必须先重启再进行,下面的步骤(这个很重要,如果不重启有很多文件夹权限问题,这跟系统有关,win7比较恶心,曾浪费我半天时间找问题)。

 4.使用Angular-cli搭建开发环境

  首先到你的工作目录下建立Angular工程目录
  然后然后用命令行进入该目录,输入
  ng new projectName
  
  
   (如果ng命令不能用,可能是没有配置环境变量,需要在path变量中增加  C:Program Filesnodejsnode_global 这个路径,然后重启就可以了)
   
  然后脚手架会帮我们搭建初始环境,由于初始化的时候Angualr-cli会去初始化node-modules依赖,所以会比较慢;如果没有切换淘宝镜像,那不是一般的慢。
   

  5.  运行Angular

  这个时候整个Angular2已经搭建好了,命令行进入进入刚才的工程目录,输入

  ng serve


  Angular-cli会编译整个项目,只有打开localhost:4200 (可以切换其他端口,具体参考Angular-cli的使用)就可以看到效果了


   结束语:Angular2可以使用javascript,typescript,dart来编写;个人推荐使用typescript来编写。TypeScript最近也发布了2.1版本,我们可以使用可爱的Async/await来编写我们的项目了。Angular2有专门的中文官方网站Angular.cn,上面有对所有的概念的详细的解释,并且有一个完整小项目的教程,很有帮助;还有,我推荐大家使用我写的模式来搭建自己的Angular项目,一方面Angualr-cli是官方出的脚手架(虽然还是beta版),另一方面,你如果自己独立去使用Webpack或者SystemJs又增加了学习难度,项目出错你都不知道是代码错了还是打包的问题!

  代码编辑器推荐两个:vs code和sublime;

  有些人学习前端不知道该学哪个框架,就我而言,目前值得学习和广为大众接受的是Vue.js,angular,reactjs;我受不了React语法,pass;vue有着简单的结构,容易上手且速度很快,但是Angular更像是一个工业级别的产品,工程化程度更高,而且有着web app 开发神器IONIC,是一个非常不错的选择!


以上是从头开始搭建环境,如果你手上已经有了一个构建好的项目,那么你可以切换到项目目录,然后使用:npm install 命令安装依赖,然后用:npm start 同样可以启动命令。


基本环境已经搭好,要想熟练使用需要对npm、ng命令有一定了解;这将在其他主题里再讲。

转载于:https://blog.51cto.com/xiao1ang/1951978


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。