Angular4学习笔记之新建项目的方法


Posted in Javascript onJuly 18, 2017

Angular4我自己还在摸索学习中,这个系列中的笔记会不定期修改和更新……

一、安装nodejs(下面方式 二选一,个人推荐第二种)

1、nodejs官网下载安装 

2、使用nvm安装管理(具体方式参照我的另一篇)

二、全局安装angular-cli

npm install -g @angular/cli

三、进入一个存放项目的文件夹,运行以下代码,初始化项目

ng new <项目名>

四、启动项目

cd <项目名>
npm install
ng serve

附:

1.引入jQuery和bootstrap

a.安装jquery和bootstrap

npm install jquery --save
npm install bootstrap --save

b.安装@types/jquery

npm install @types/jquery --save-dev <!-- 这一步是让jquery可以在Ts文件中被识别使用 --!>

c.在项目的根目录下找到.angular-cli.json文件修改其配置,修改时注意引用路径是以index.html文件为起始路径,而不是项目根路径

{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "project": {
  "version": "1.0.0-alpha.4",
  "name": "angualr4demo"
 },
 "apps": [
  {
   "root": "src",
   "outDir": "dist",
   "assets": ["assets"],
   "index": "index.html",
   "main": "main.ts",
   "polyfills": "polyfills.ts",
   "test": "test.ts",
   "tsconfig": "tsconfig.app.json",
   "testTsconfig": "tsconfig.spec.json",
   "prefix": "app",
   "styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",<!-- 这里添加bootstrap引用路径 --!>
    "scss/style.scss"
   ],
   "scripts": [
    "../node_modules/jquery/dist/jquery.js"<!-- 这里添加jquery引用路径 --!>
   ],
   "environmentSource": "environments/environment.ts",
   "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
   }
  }
 ],
 "e2e": {
  "protractor": {
   "config": "./protractor.conf.js"
  }
 },
 "lint": [
  {
   "project": "src/tsconfig.app.json"
  },
  {
   "project": "src/tsconfig.spec.json"
  },
  {
   "project": "e2e/tsconfig.e2e.json"
  }
 ],
 "test": {
  "karma": {
   "config": "./karma.conf.js"
  }
 },
 "defaults": {
  "styleExt": "scss",
  "prefixInterfaces": false
 }
}

d. 在src/typings.d.ts 中添加

declare var $: JQueryStatic;

2、引入require

在在src/typings.d.ts 中添加

declare var require: any;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
jQuery Ajax文件上传(php)
Jun 16 Javascript
JavaScript 继承详解(三)
Jul 13 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
浅谈Vue的响应式原理
May 30 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 Javascript
详解使用nvm安装node.js
Jul 18 #Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 #jQuery
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 #Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 #Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 #Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 #jQuery
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 #Javascript
You might like
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
php中yii框架实例用法
2020/12/22 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
jquery对表单操作2
2011/04/06 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
python文件和文件夹复制函数
2020/02/07 Python
Python descriptor(描述符)的实现
2020/11/15 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
历史学专业推荐信
2013/11/06 职场文书
工程售后服务承诺书
2014/05/21 职场文书
创先争优标语
2014/06/27 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js