Angular4学习笔记之新建项目的方法
时间：2020-10-27 15:32:54|栏目：AngularJS|点击： 次
Angular4我自己还在摸索学习中，这个系列中的笔记会不定期修改和更新……
一、安装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;
上一篇：AngularJS语法详解（续）
栏 目：AngularJS
下一篇：详解Angular.js的$q.defer()服务异步处理
本文标题：Angular4学习笔记之新建项目的方法
本文地址：http://www.codeinn.net/misctech/16365.html
